added

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>

src/components/generic/AdminStickyAnnouncementBar.jsx

@@ -1,116 +1,163 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { X } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { Button } from "@/components/ui/button";
-import {
-  AlertDialog, AlertDialogAction, AlertDialogCancel,
-  AlertDialogContent, AlertDialogDescription,
-  AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
 import { useAdminNotifications } from "@/contexts/AdminNotificationContext";
-import { NotificationIcon, getTypeAccent, resolveStickyStyle } from "@/components/generic/notificationDisplay";
+import { getTierColor, getContrastText } from "@/utils/tierColors";
+import AnnouncementCarouselDialog from "@/components/generic/AnnouncementCarouselDialog";
+
+const ROTATE_INTERVAL_MS = 6000;
 
 // Admin counterpart to StickyAnnouncementBar (client). Only supports the
 // explicit link_url from the "On Open" section — the type-based fallback
 // resolver in notificationDisplay.jsx points at client-only routes
 // (/course/:id, /plans, /group/:id), which don't exist in the admin app.
+function resolveClickAction(stickyAnnouncement) {
+  const linkUrl = stickyAnnouncement.data?.linkUrl || null;
+  if (!linkUrl) return null;
+  return {
+    label: stickyAnnouncement.data?.linkLabel || "Open Link",
+    go: (navigate) => (linkUrl.startsWith("/")
+      ? navigate(linkUrl)
+      : window.open(linkUrl, "_blank", "noopener,noreferrer")),
+  };
+}
+
 export default function AdminStickyAnnouncementBar() {
   const navigate = useNavigate();
-  const { stickyAnnouncement, markSeen } = useAdminNotifications();
+  const { stickyAnnouncements, bannerImage, markSeen } = useAdminNotifications();
+  const [activeIndex, setActiveIndex] = useState(0);
   const [detailsOpen, setDetailsOpen] = useState(false);
 
+  const count = stickyAnnouncements.length;
+  // Derived rather than clamped via effect — safe the instant the array
+  // shrinks (e.g. after a dismiss), no render with a stale out-of-range index.
+  const safeIndex = count ? Math.min(activeIndex, count - 1) : 0;
+
+  useEffect(() => {
+    if (count <= 1) return;
+    const id = setInterval(() => {
+      setActiveIndex((i) => (i + 1) % count);
+    }, ROTATE_INTERVAL_MS);
+    return () => clearInterval(id);
+  }, [count]);
+
+  const current = stickyAnnouncements[safeIndex];
+
   const onDismiss = useCallback(async () => {
-    if (!stickyAnnouncement) return;
+    if (!current) return;
-    await markSeen(stickyAnnouncement.notification_id);
+    await markSeen(current.notification_id);
-  }, [stickyAnnouncement, markSeen]);
+  }, [current, markSeen]);
 
-  // Opening the dialog must NOT mark it seen — markSeen clears
+  // Opening the dialog must NOT mark it seen — markSeen removes the row from
-  // stickyAnnouncement, which would unmount this component (dialog included)
+  // stickyAnnouncements, which would unmount this component (dialog included)
-  // before it ever shows. Only the X button dismisses/marks seen.
+  // before it ever shows.
   const onClickBanner = useCallback(() => {
-    if (!stickyAnnouncement) return;
+    if (!current) return;
     setDetailsOpen(true);
-  }, [stickyAnnouncement]);
+  }, [current]);
 
-  if (!stickyAnnouncement) return null;
+  // Closing the details dialog (X, Escape, overlay click — any reason)
+  // dismisses whichever announcement was being viewed at the time. This is
+  // the only dismiss path when multiple are active (no per-item X on the bar
+  // itself — see the count > 1 branch below).
+  const onDialogOpenChange = useCallback((open) => {
+    setDetailsOpen(open);
+    if (!open) void onDismiss();
+  }, [onDismiss]);
 
-  const accentClass = getTypeAccent(stickyAnnouncement.type);
+  if (!current) return null;
-  const inlineStyle = resolveStickyStyle(stickyAnnouncement.data);
-  const linkUrl = stickyAnnouncement.data?.linkUrl || null;
 
-  const openLink = () => {
+  const swatch    = getTierColor(current.color || "indigo").swatch;
-    if (!linkUrl) return;
+  const textColor = getContrastText(swatch, current.color || "indigo");
-    if (linkUrl.startsWith("/")) navigate(linkUrl);
+  const clickAction = resolveClickAction(current);
-    else window.open(linkUrl, "_blank", "noopener,noreferrer");
-  };
 
   return (
     <>
-      <div
+      <div role="status" className="w-full shadow-sm px-4 md:px-6" style={{ backgroundColor: swatch }}>
-        role="status"
-        className="w-full border-b shadow-sm px-4 md:px-6"
-      >
         <div
           onClick={onClickBanner}
-          className="w-full cursor-pointer bg-card rounded-none py-3 flex items-center justify-between gap-4"
+          className="relative w-full cursor-pointer rounded-none py-3 flex items-center justify-center gap-4 px-10"
-          style={inlineStyle ?? undefined}
         >
-          <div className="flex items-start gap-3 min-w-0">
+          <div className="flex items-center gap-3 min-w-0">
-            <div className={`flex h-9 w-9 items-center justify-center rounded ${accentClass}`}>
+            <p className="text-sm font-semibold leading-snug truncate" style={{ color: textColor }}>
-              <NotificationIcon type={stickyAnnouncement.type} className="h-5 w-5" />
+              {current.title || "Announcement"}
-            </div>
+            </p>
 
-            <div className="min-w-0">
+            {clickAction && (
-              <p className="text-sm font-semibold leading-snug truncate">
+              <Button
-                {stickyAnnouncement.title || "Announcement"}
+                variant="outline"
-              </p>
+                size="sm"
-              <p className="text-sm text-muted-foreground leading-snug line-clamp-2">
+                className="shrink-0 text-foreground"
-                {stickyAnnouncement.message || ""}
+                onClick={(e) => {
-              </p>
+                  e.preventDefault();
-            </div>
+                  e.stopPropagation();
+                  clickAction.go(navigate);
+                }}
+              >
+                {clickAction.label}
+              </Button>
+            )}
           </div>
 
-          <Button
+          {count > 1 && (
-            variant="outline"
+            <div className="absolute right-2 flex items-center gap-1.5">
-            size="icon"
+              {stickyAnnouncements.map((a, i) => (
-            onClick={(e) => {
+                <button
-              e.preventDefault();
+                  key={a.notification_id}
-              e.stopPropagation();
+                  type="button"
-              void onDismiss();
+                  aria-label={`Show announcement ${i + 1}`}
-            }}
+                  onClick={(e) => {
-            aria-label="Dismiss sticky announcement"
+                    e.preventDefault();
-            title="Dismiss"
+                    e.stopPropagation();
-          >
+                    setActiveIndex(i);
-            <X className="size-4" />
+                  }}
-          </Button>
+                  className="size-1.5 rounded-full transition-opacity"
+                  style={{ backgroundColor: textColor, opacity: i === safeIndex ? 1 : 0.35 }}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Dismiss-X only makes sense for a single active announcement —
+              with multiple, the dialog's own close button (shadcn Dialog)
+              is the way to close/step away, no per-item dismiss from the bar. */}
+          {count <= 1 && (
+            <div
+              role="button"
+              tabIndex={0}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                void onDismiss();
+              }}
+              onKeyDown={(e) => {
+                if (e.key !== "Enter" && e.key !== " ") return;
+                e.preventDefault();
+                e.stopPropagation();
+                void onDismiss();
+              }}
+              aria-label="Dismiss sticky announcement"
+              title="Dismiss"
+              className="absolute right-2 inline-flex items-center justify-center size-8 rounded-lg cursor-pointer hover:opacity-70 transition-opacity"
+              style={{ color: textColor }}
+            >
+              <X className="size-4" />
+            </div>
+          )}
         </div>
       </div>
 
-      <AlertDialog open={detailsOpen} onOpenChange={setDetailsOpen}>
+      <AnnouncementCarouselDialog
-        <AlertDialogContent>
+        open={detailsOpen}
-          <AlertDialogHeader>
+        onOpenChange={onDialogOpenChange}
-            <AlertDialogTitle className="flex items-center gap-2">
+        announcements={stickyAnnouncements}
-              <div className={`flex h-8 w-8 items-center justify-center rounded shrink-0 ${accentClass}`}>
+        activeIndex={safeIndex}
-                <NotificationIcon type={stickyAnnouncement.type} className="h-4 w-4" />
+        onIndexChange={setActiveIndex}
-              </div>
+        resolveClickAction={resolveClickAction}
-              {stickyAnnouncement.title || "Announcement"}
+        navigate={navigate}
-            </AlertDialogTitle>
+        bannerImage={bannerImage}
-            <AlertDialogDescription asChild>
+      />
-              <p className="whitespace-pre-wrap text-left pt-1 text-foreground">
-                {stickyAnnouncement.message || ""}
-              </p>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Close</AlertDialogCancel>
-            {linkUrl && (
-              <AlertDialogAction onClick={openLink}>
-                Open Link
-              </AlertDialogAction>
-            )}
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
     </>
   );
 }

src/components/generic/AnnouncementCarouselDialog.jsx

@@ -0,0 +1,83 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { resolveAssetSrc } from "@/utils/media.util";
+
+// Shared details view for the sticky announcement bar (client + admin
+// variants) — pages through every currently-active sticky announcement (max
+// 3, see notificationBroadcasts.controller.js's countActiveSticky) with a
+// segmented progress bar. bannerImage is ONE shared image for the whole set
+// (not per-announcement) — see NotificationBroadcastList.jsx's banner picker
+// and the sticky_banner_settings singleton.
+export default function AnnouncementCarouselDialog({
+    open,
+    onOpenChange,
+    announcements,
+    activeIndex,
+    onIndexChange,
+    resolveClickAction,
+    navigate,
+    bannerImage,
+}) {
+    const current = announcements[activeIndex];
+    if (!current) return null;
+
+    const clickAction = resolveClickAction(current);
+    const imageSrc = resolveAssetSrc(bannerImage);
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-2xl p-0 overflow-hidden gap-0">
+                <div className="grid sm:grid-cols-2">
+                    <div className="p-6 flex flex-col gap-3 min-w-0">
+                        <DialogHeader className="text-left">
+                            <DialogTitle className="text-lg">
+                                {current.title || "Announcement"}
+                            </DialogTitle>
+                            <DialogDescription asChild>
+                                <p className="whitespace-pre-wrap text-left text-foreground">
+                                    {current.message || ""}
+                                </p>
+                            </DialogDescription>
+                        </DialogHeader>
+
+                        <div className="mt-auto flex flex-col gap-2 pt-4">
+                            {clickAction && (
+                                <Button
+                                    className="self-start"
+                                    onClick={() => clickAction.go(navigate)}
+                                >
+                                    {clickAction.label}
+                                </Button>
+                            )}
+
+                            {announcements.length > 1 && (
+                                <div className="flex gap-1.5">
+                                    {announcements.map((a, i) => (
+                                        <button
+                                            key={a.notification_id}
+                                            type="button"
+                                            aria-label={`Show announcement ${i + 1}`}
+                                            onClick={() => onIndexChange(i)}
+                                            className={[
+                                                "h-1.5 flex-1 rounded-full transition-colors",
+                                                i === activeIndex ? "bg-foreground" : "bg-muted-foreground/25 hover:bg-muted-foreground/40",
+                                            ].join(" ")}
+                                        />
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                    <div className="aspect-video sm:aspect-auto sm:h-96 bg-muted flex items-center justify-center overflow-hidden">
+                        {imageSrc ? (
+                            <img src={imageSrc} alt="" className="w-full h-full object-cover" />
+                        ) : (
+                            <span className="text-xs text-muted-foreground">No image</span>
+                        )}
+                    </div>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}

src/components/generic/Blocks/Client/Advertisements/Popup.jsx

@@ -1,71 +0,0 @@
-// components/blocks/Popup.jsx
-
-import { Button } from "@/components/ui/button";
-import ResponsiveModal from "@/components/generic/ResponsiveModal";
-import { resolveAssetSrc } from "@/utils/media.util";
-
-// ── Popup ────────────────────────────────────────────────────────────────────
-/**
- * Generic popup advertisement block.
- * Modal-style placement shown on page load — wraps ResponsiveModal so it gets
- * dialog/drawer behavior for free. Caller owns the `open` state (typically set
- * to true once an active popup ad resolves from the API).
- *
- * Props:
- *   ad                — advertisement object { headline, description, ctas, image, image_url, advertisement_id }
- *   open              — boolean, modal visibility
- *   onOpenChange      — (open: boolean) => void
- *   onCtaClick        — (ad, cta) => void, called when a footer CTA button is clicked
- *   onDismissForever  — () => void, called when the user picks "Don't show this ad again"
- */
-export function Popup({ ad, open, onOpenChange, onCtaClick, onDismissForever }) {
-    if (!ad) return null;
-
-    const imageSrc = resolveAssetSrc(ad.image) || ad.image_url || null;
-    const ctas = Array.isArray(ad.ctas) ? ad.ctas : [];
-
-    const handleDismissForever = () => {
-        onOpenChange?.(false);
-        onDismissForever?.();
-    };
-
-    return (
-        <ResponsiveModal
-            open={open}
-            onOpenChange={onOpenChange}
-            title={ad.headline || "Announcement"}
-            description={ad.description || undefined}
-            footer={
-                ctas.length > 0 ? (
-                    <>
-                        {ctas.map((cta, i) => (
-                            <Button
-                                key={i}
-                                variant={cta.variant === "outline" ? "outline" : "default"}
-                                onClick={() => onCtaClick?.(ad, cta)}
-                            >
-                                {cta.label}
-                            </Button>
-                        ))}
-                    </>
-                ) : undefined
-            }
-        >
-            {imageSrc && (
-                <div className="rounded-lg bg-muted aspect-video flex items-center justify-center overflow-hidden pointer-events-none select-none">
-                    <img src={imageSrc} alt={ad.headline || "Advertisement"} className="w-full h-full object-cover" />
-                </div>
-            )}
-
-            {onDismissForever && (
-                <button
-                    type="button"
-                    onClick={handleDismissForever}
-                    className="w-fit justify-self-start rounded text-xs text-muted-foreground hover:text-foreground underline underline-offset-2 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
-                >
-                    Don't show this ad again
-                </button>
-            )}
-        </ResponsiveModal>
-    );
-}

src/components/generic/Blocks/Client/Advertisements/Sidebar.jsx

@@ -1,78 +0,0 @@
-// components/blocks/Sidebar.jsx
-
-import { Megaphone } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
-import { resolveAssetSrc } from "@/utils/media.util";
-
-// ── Sidebar ──────────────────────────────────────────────────────────────────
-/**
- * Generic sidebar advertisement block.
- * Compact vertical card — image on top, optional short headline/description and
- * a single CTA below. Meant to sit in a narrow column (sidebars, rail layouts),
- * not stretch full-width like Hero/Banner.
- *
- * Props:
- *   ad         — advertisement object { headline, description, ctas, image, image_url, advertisement_id }
- *   onCtaClick — (ad, cta) => void, called when the CTA button (or card, if no CTA) is clicked
- */
-export function Sidebar({ ad, onCtaClick }) {
-    if (!ad) return null;
-
-    const imageSrc = resolveAssetSrc(ad.image) || ad.image_url || null;
-    const ctas = Array.isArray(ad.ctas) ? ad.ctas : [];
-    const primaryCta = ctas[0];
-
-    const handleCardClick = () => {
-        if (!primaryCta) onCtaClick?.(ad, undefined);
-    };
-
-    return (
-        <div
-            className="w-full max-w-xs rounded-lg border bg-card overflow-hidden flex flex-col cursor-pointer"
-            onClick={handleCardClick}
-        >
-            <div className="aspect-square bg-muted flex items-center justify-center overflow-hidden pointer-events-none select-none">
-                {imageSrc ? (
-                    <img src={imageSrc} alt={ad.headline || "Advertisement"} className="w-full h-full object-cover" />
-                ) : (
-                    <Megaphone className="size-6 text-muted-foreground" />
-                )}
-            </div>
-
-            {(ad.headline || ad.description || primaryCta) && (
-                <div className="p-3 flex flex-col gap-1.5">
-                    {ad.headline && <p className="text-sm font-medium leading-snug pointer-events-none select-none">{ad.headline}</p>}
-                    {ad.description && <p className="text-xs text-muted-foreground line-clamp-2 pointer-events-none select-none">{ad.description}</p>}
-                    {primaryCta && (
-                        <Button
-                            size="sm"
-                            className="mt-1 w-full"
-                            onClick={(e) => {
-                                e.stopPropagation();
-                                onCtaClick?.(ad, primaryCta);
-                            }}
-                        >
-                            {primaryCta.label}
-                        </Button>
-                    )}
-                </div>
-            )}
-        </div>
-    );
-}
-
-// ── SidebarSkeleton ──────────────────────────────────────────────────────────
-
-export function SidebarSkeleton() {
-    return (
-        <div className="w-full max-w-xs rounded-lg border bg-card overflow-hidden flex flex-col">
-            <Skeleton className="aspect-square w-full" />
-            <div className="p-3 flex flex-col gap-1.5">
-                <Skeleton className="h-4 w-3/4" />
-                <Skeleton className="h-3 w-full" />
-                <Skeleton className="h-8 w-full mt-1" />
-            </div>
-        </div>
-    );
-}

src/components/generic/BroadcastTargetPicker.jsx

@@ -32,7 +32,7 @@ const TARGET_CONFIGS = {
     },
 };
 
-export function BroadcastTargetPicker({ targetType, value, onChange }) {
+export function BroadcastTargetPicker({ targetType, value, onChange, onLabelResolved }) {
     const config = TARGET_CONFIGS[targetType];
 
     const [items, setItems] = useState([]);
@@ -57,9 +57,17 @@ export function BroadcastTargetPicker({ targetType, value, onChange }) {
         return items.filter((item) => String(item[config.labelKey] ?? "").toLowerCase().includes(q));
     }, [items, query, config]);
 
-    if (!config) return null;
+    const selected = config ? items.find((item) => String(item[config.idKey]) === String(value)) : undefined;
 
-    const selected = items.find((item) => String(item[config.idKey]) === String(value));
+    // Lets the parent (Review step summaries, etc.) show the resolved name
+    // instead of just the raw id — fires whenever the matched item changes,
+    // including on initial load once the fetched list resolves `value`.
+    useEffect(() => {
+        onLabelResolved?.(selected ? selected[config.labelKey] : null);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selected]);
+
+    if (!config) return null;
 
     return (
         <Popover open={open} onOpenChange={(v) => { setOpen(v); if (!v) setQuery(""); }}>

src/components/generic/Sheet/FilterSheet.jsx

@@ -15,14 +15,22 @@ const FIELD_DISPLAY_MAP = {
 const BOOLEAN_FIELDS = Object.keys(FIELD_DISPLAY_MAP);
 
 // ─── Generic formatter ────────────────────────────────────────────────────────
+// Audit fields (createdBy/updatedBy/deletedBy) come back from the field-values
+// API as { value: user_id, label: full_name } — filtering has to select on the
+// id, but the sheet should still display the name. Every other field type
+// still hands this plain primitives, which pass through unchanged.
+const itemValue = (item) => (item && typeof item === "object" && "value" in item) ? item.value : item;
+const itemLabel = (item) => (item && typeof item === "object" && "label" in item) ? item.label : item;
+
 const formatFilterItem = (item, field, type, fmtDate) => {
+  const label = itemLabel(item);
   if (FIELD_DISPLAY_MAP[field]) {
-    return FIELD_DISPLAY_MAP[field][String(item)] ?? item;
+    return FIELD_DISPLAY_MAP[field][String(label)] ?? label;
   }
-  if (type === "date" && item) {
+  if (type === "date" && label) {
-    return fmtDate(item);
+    return fmtDate(label);
   }
-  return item;
+  return label;
 };
 
 // ─── Reusable empty state ─────────────────────────────────────────────────────
@@ -37,17 +45,20 @@ const FilterList = ({ items, field, type, selected, onToggle, inputType = "check
   const { fmtDate } = useDateFormat();
   if (items.length === 0) return <EmptyState />;
 
-  return items.map((item) => (
+  return items.map((item) => {
-    <label key={item} className="flex items-center gap-2 text-sm cursor-pointer">
+    const value = itemValue(item);
-      <input
+    return (
-        type={inputType}
+      <label key={value} className="flex items-center gap-2 text-sm cursor-pointer">
-        name={inputType === "radio" ? field : undefined}
+        <input
-        checked={selected.includes(String(item))}
+          type={inputType}
-        onChange={() => onToggle(item)}
+          name={inputType === "radio" ? field : undefined}
-      />
+          checked={selected.includes(String(value))}
-      {formatFilterItem(item, field, type, fmtDate)}
+          onChange={() => onToggle(value)}
-    </label>
+        />
-  ));
+        {formatFilterItem(item, field, type, fmtDate)}
+      </label>
+    );
+  });
 };
 
 export function FilterSheet({ open, onOpenChange, column, attr, data = [], loading }) {

src/components/generic/StickyAnnouncementBar.jsx

@@ -1,22 +1,22 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { X } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import {
-  AlertDialog, AlertDialogAction, AlertDialogCancel,
-  AlertDialogContent, AlertDialogDescription,
-  AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
 import { useNavigate } from "react-router-dom";
 import { useClientNotifications } from "@/contexts/ClientNotificationContext";
-import { NotificationIcon, getTypeAccent, resolveNotificationLink, resolveStickyStyle } from "@/components/generic/notificationDisplay";
+import { resolveNotificationLink } from "@/components/generic/notificationDisplay";
+import { getTierColor, getContrastText } from "@/utils/tierColors";
+import AnnouncementCarouselDialog from "@/components/generic/AnnouncementCarouselDialog";
 
-// Explicit link_url (from the admin "On Open" section) always wins. Falls back
+const ROTATE_INTERVAL_MS = 6000;
-// to the type-based resolver for broadcasts sent before that field existed.
+
+// Explicit link_url (from the admin "On Open" section) always wins, using the
+// admin-authored button label when set. Falls back to the type-based resolver
+// for broadcasts sent before that field existed.
 function resolveClickAction(stickyAnnouncement) {
   const explicitUrl = stickyAnnouncement.data?.linkUrl || null;
   if (explicitUrl) {
     return {
-      label: "Open Link",
+      label: stickyAnnouncement.data?.linkLabel || "Open Link",
       go: (navigate) => (explicitUrl.startsWith("/")
         ? navigate(explicitUrl)
         : window.open(explicitUrl, "_blank", "noopener,noreferrer")),
@@ -27,99 +27,140 @@ function resolveClickAction(stickyAnnouncement) {
 
 export default function StickyAnnouncementBar() {
   const navigate = useNavigate();
-  const { stickyAnnouncement, markSeen } = useClientNotifications();
+  const { stickyAnnouncements, bannerImage, markSeen } = useClientNotifications();
+  const [activeIndex, setActiveIndex] = useState(0);
   const [detailsOpen, setDetailsOpen] = useState(false);
 
+  const count = stickyAnnouncements.length;
+  // Derived rather than clamped via effect — safe the instant the array
+  // shrinks (e.g. after a dismiss), no render with a stale out-of-range index.
+  const safeIndex = count ? Math.min(activeIndex, count - 1) : 0;
+
+  // Auto-rotate through active announcements while more than one is live.
+  useEffect(() => {
+    if (count <= 1) return;
+    const id = setInterval(() => {
+      setActiveIndex((i) => (i + 1) % count);
+    }, ROTATE_INTERVAL_MS);
+    return () => clearInterval(id);
+  }, [count]);
+
+  const current = stickyAnnouncements[safeIndex];
+
   const onDismiss = useCallback(async () => {
-    if (!stickyAnnouncement) return;
+    if (!current) return;
-    await markSeen(stickyAnnouncement.notification_id);
+    await markSeen(current.notification_id);
-  }, [stickyAnnouncement, markSeen]);
+  }, [current, markSeen]);
 
-  // Opening the dialog must NOT mark it seen — markSeen clears
+  // Opening the dialog must NOT mark it seen — markSeen removes the row from
-  // stickyAnnouncement, which would unmount this component (dialog included)
+  // stickyAnnouncements, which would unmount this component (dialog included)
-  // before it ever shows. Only the X button dismisses/marks seen.
+  // before it ever shows.
   const onClickBanner = useCallback(() => {
-    if (!stickyAnnouncement) return;
+    if (!current) return;
     setDetailsOpen(true);
-  }, [stickyAnnouncement]);
+  }, [current]);
 
-  if (!stickyAnnouncement) return null;
+  // Closing the details dialog (X, Escape, overlay click — any reason)
+  // dismisses whichever announcement was being viewed at the time. This is
+  // the only dismiss path when multiple are active (no per-item X on the bar
+  // itself — see the count > 1 branch below).
+  const onDialogOpenChange = useCallback((open) => {
+    setDetailsOpen(open);
+    if (!open) void onDismiss();
+  }, [onDismiss]);
 
-  const accentClass = getTypeAccent(stickyAnnouncement.type);
+  if (!current) return null;
-  const inlineStyle = resolveStickyStyle(stickyAnnouncement.data);
+
-  const clickAction  = resolveClickAction(stickyAnnouncement);
+  const swatch      = getTierColor(current.color || "indigo").swatch;
+  const textColor   = getContrastText(swatch, current.color || "indigo");
+  const clickAction = resolveClickAction(current);
 
   return (
     <>
-      <div
+      <div role="status" className="w-full shadow-sm px-4 md:px-6" style={{ backgroundColor: swatch }}>
-        role="status"
-        className="w-full border-b shadow-sm px-4 md:px-6"
-      >
         <div
           onClick={onClickBanner}
-          className="w-full cursor-pointer bg-card rounded-none py-3 flex items-center justify-between gap-4"
+          className="relative w-full cursor-pointer rounded-none py-3 flex items-center justify-center gap-4 px-10"
-          style={inlineStyle ?? undefined}
         >
-          <div className="flex items-start gap-3 min-w-0">
+          <div className="flex items-center gap-3 min-w-0">
-            <div className={`flex h-9 w-9 items-center justify-center rounded ${accentClass}`}>
+            <p className="text-sm font-semibold leading-snug truncate" style={{ color: textColor }}>
-              <NotificationIcon type={stickyAnnouncement.type} className="h-5 w-5" />
+              {current.title || "Announcement"}
-            </div>
+            </p>
 
-            <div className="min-w-0">
+            {clickAction && (
-              <p className="text-sm font-semibold leading-snug truncate">
+              <Button
-                {stickyAnnouncement.title || "Announcement"}
+                variant="outline"
-              </p>
+                size="sm"
-              <p className="text-sm text-muted-foreground leading-snug line-clamp-2">
+                className="shrink-0 text-foreground"
-                {stickyAnnouncement.message || ""}
+                onClick={(e) => {
-              </p>
+                  e.preventDefault();
-            </div>
+                  e.stopPropagation();
+                  clickAction.go(navigate);
+                }}
+              >
+                {clickAction.label}
+              </Button>
+            )}
           </div>
 
-          <Button
+          {count > 1 && (
-            variant="outline"
+            <div className="absolute right-2 flex items-center gap-1.5">
-            size="icon"
+              {stickyAnnouncements.map((a, i) => (
-            onClick={(e) => {
+                <button
-              e.preventDefault();
+                  key={a.notification_id}
-              e.stopPropagation();
+                  type="button"
-              void onDismiss();
+                  aria-label={`Show announcement ${i + 1}`}
-            }}
+                  onClick={(e) => {
-            aria-label="Dismiss sticky announcement"
+                    e.preventDefault();
-            title="Dismiss"
+                    e.stopPropagation();
-          >
+                    setActiveIndex(i);
-            <X className="size-4" />
+                  }}
-          </Button>
+                  className="size-1.5 rounded-full transition-opacity"
+                  style={{ backgroundColor: textColor, opacity: i === safeIndex ? 1 : 0.35 }}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Dismiss-X only makes sense for a single active announcement —
+              with multiple, the dialog's own close button (shadcn Dialog)
+              is the way to close/step away, no per-item dismiss from the bar. */}
+          {count <= 1 && (
+            <div
+              role="button"
+              tabIndex={0}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                void onDismiss();
+              }}
+              onKeyDown={(e) => {
+                if (e.key !== "Enter" && e.key !== " ") return;
+                e.preventDefault();
+                e.stopPropagation();
+                void onDismiss();
+              }}
+              aria-label="Dismiss sticky announcement"
+              title="Dismiss"
+              className="absolute right-2 inline-flex items-center justify-center size-8 rounded-lg cursor-pointer hover:opacity-70 transition-opacity"
+              style={{ color: textColor }}
+            >
+              <X className="size-4" />
+            </div>
+          )}
         </div>
       </div>
 
-      {/* Full-content view — plain text info, or with an Open Link action
+      <AnnouncementCarouselDialog
-          when the announcement was created with a link (see AddNotificationBroadcast's
+        open={detailsOpen}
-          "On Open" section). */}
+        onOpenChange={onDialogOpenChange}
-      <AlertDialog open={detailsOpen} onOpenChange={setDetailsOpen}>
+        announcements={stickyAnnouncements}
-        <AlertDialogContent>
+        activeIndex={safeIndex}
-          <AlertDialogHeader>
+        onIndexChange={setActiveIndex}
-            <AlertDialogTitle className="flex items-center gap-2">
+        resolveClickAction={resolveClickAction}
-              <div className={`flex h-8 w-8 items-center justify-center rounded shrink-0 ${accentClass}`}>
+        navigate={navigate}
-                <NotificationIcon type={stickyAnnouncement.type} className="h-4 w-4" />
+        bannerImage={bannerImage}
-              </div>
+      />
-              {stickyAnnouncement.title || "Announcement"}
-            </AlertDialogTitle>
-            <AlertDialogDescription asChild>
-              <p className="whitespace-pre-wrap text-left pt-1 text-foreground">
-                {stickyAnnouncement.message || ""}
-              </p>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Close</AlertDialogCancel>
-            {clickAction && (
-              <AlertDialogAction onClick={() => clickAction.go(navigate)}>
-                {clickAction.label}
-              </AlertDialogAction>
-            )}
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
     </>
   );
 }
-

src/components/generic/Table/DataTable.jsx

@@ -97,6 +97,15 @@ export default function DataTable({
   const handleOpenFilterSheet = async (e, column, attr) => {
     e.preventDefault();
     setActiveColumn(null);
+
+    // Enum/boolean columns already carry their full value set in
+    // attr.options.choices (see FilterSheet.jsx's sourceData) — hitting
+    // the field-values endpoint for them is a wasted round-trip.
+    if (attr?.type === "enum") {
+      setFilterState({ open: true, column, attr, data: [] });
+      return;
+    }
+
     const data = await onFetchFilterData(attr.field);
     setFilterState({ open: true, column, attr, data });
   };

src/components/generic/notificationDisplay.jsx

@@ -22,26 +22,6 @@ const TYPE_ACCENT = {
     assessment:   "bg-blue-100 text-blue-700 dark:bg-blue-950/40 dark:text-blue-400",
 };
 
-// Shared by StickyAnnouncementBar (client) and AdminStickyAnnouncementBar —
-// supports multiple possible admin-authored shapes without tightly coupling
-// to one admin UI.
-export function resolveStickyStyle(data) {
-    const style = data?.sticky_style ?? data?.stickyStyle ?? data?.stickyColors ?? data?.colors ?? null;
-    if (!style) return null;
-
-    const background = style.background ?? style.bg ?? style.backgroundColor ?? null;
-    const text       = style.text ?? style.color ?? style.foreground ?? null;
-    const border     = style.border ?? style.borderColor ?? null;
-
-    if (!background && !text && !border) return null;
-
-    return {
-        ...(background ? { backgroundColor: background } : null),
-        ...(text ? { color: text } : null),
-        ...(border ? { borderColor: border } : null),
-    };
-}
-
 export function NotificationIcon({ type, className }) {
     const Icon = TYPE_ICON[type] ?? Bell;
     return <Icon className={cn("shrink-0", className)} />;

src/contexts/AdminAchievementsContext.jsx

@@ -1,76 +0,0 @@
-import { createContext, useCallback, useContext, useState } from "react";
-import api from "@/utils/api.util";
-import { toast } from "sonner";
-
-const AdminAchievementsContext = createContext(null);
-
-export function useAdminAchievements() {
-    const ctx = useContext(AdminAchievementsContext);
-    if (!ctx) throw new Error("useAdminAchievements must be used inside AdminAchievementsProvider");
-    return ctx;
-}
-
-export function AdminAchievementsProvider({ children }) {
-    const [achievements, setAchievements] = useState([]);
-    const [achievement,  setAchievement]  = useState(null);
-    const [loading,      setLoading]      = useState(false);
-
-    const request = useCallback(async (fn) => {
-        setLoading(true);
-        try { return await fn(); }
-        catch (err) {
-            toast(err?.response?.data?.message ?? "Something went wrong.");
-            return null;
-        } finally { setLoading(false); }
-    }, []);
-
-    const fetchAchievements = useCallback(() =>
-        request(async () => {
-            const { data } = await api.get("/admin/achievements");
-            setAchievements(data.data ?? []);
-            return data.data;
-        }), [request]);
-
-    const fetchAchievement = useCallback((id) =>
-        request(async () => {
-            const { data } = await api.get(`/admin/achievements/${id}`);
-            setAchievement(data.data ?? null);
-            return data.data;
-        }), [request]);
-
-    const createAchievement = useCallback((payload) =>
-        request(async () => {
-            const { data } = await api.post("/admin/achievements", payload);
-            toast("Achievement created.");
-            return data.data;
-        }), [request]);
-
-    const updateAchievement = useCallback((id, payload) =>
-        request(async () => {
-            const { data } = await api.put(`/admin/achievements/${id}`, payload);
-            setAchievements((prev) =>
-                prev.map((a) => (String(a.achievement_definition_id) === String(id) ? data.data : a))
-            );
-            if (achievement && String(achievement.achievement_definition_id) === String(id)) setAchievement(data.data);
-            toast("Achievement updated.");
-            return data.data;
-        }), [request, achievement]);
-
-    const deleteAchievement = useCallback((id) =>
-        request(async () => {
-            await api.delete(`/admin/achievements/${id}`);
-            setAchievements((prev) => prev.filter((a) => String(a.achievement_definition_id) !== String(id)));
-            toast("Achievement deleted.");
-            return true;
-        }), [request]);
-
-    return (
-        <AdminAchievementsContext.Provider value={{
-            achievements, achievement, loading,
-            fetchAchievements, fetchAchievement,
-            createAchievement, updateAchievement, deleteAchievement,
-        }}>
-            {children}
-        </AdminAchievementsContext.Provider>
-    );
-}

src/contexts/AdminAssetsContext.jsx

@@ -218,9 +218,11 @@ export function AssetsProvider({ children }) {
                 });
                 if (file) formData.append("file", file);
 
-                const res = await api.patch(`/admin/assets/${assetId}`, formData, {
+                // No explicit Content-Type here — axios/the browser must set it
-                    headers: { "Content-Type": "multipart/form-data" },
+                // itself so the multipart boundary is included. A hardcoded
-                });
+                // "multipart/form-data" header (no boundary) makes multer fail
+                // to parse the body, silently dropping the file and every field.
+                const res = await api.patch(`/admin/assets/${assetId}`, formData);
 
                 const asset = res.data?.data?.data ?? null;
                 if (asset) {

src/contexts/AdminNotificationBroadcastContext.jsx

@@ -26,6 +26,7 @@ export function NotificationBroadcastsProvider({ children }) {
     const [attributes, setAttributes] = useState([]);
     const [pagination, setPagination] = useState(PAGINATION_INIT);
     const [selectedBroadcast, setSelectedBroadcast] = useState(null);
+    const [stickyBannerSetting, setStickyBannerSetting] = useState(null);
     const [loading, setLoading] = useState(false);
 
     const request = useCallback(async (fn) => {
@@ -207,6 +208,35 @@ export function NotificationBroadcastsProvider({ children }) {
         [request]
     );
 
+    // ─── GET /api/admin/announcements/sticky-banner ───────────────────────────
+    // Shared banner image for the whole rotating sticky bar — one image for
+    // all (up to 3) concurrently-active announcements, not one per announcement.
+    const fetchStickyBannerSetting = useCallback(
+        () =>
+            request(async () => {
+                const res = await api.get("/admin/announcements/sticky-banner");
+                const setting = res.data?.data?.data ?? null;
+                setStickyBannerSetting(setting);
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── PATCH /api/admin/announcements/sticky-banner ────────────────────────
+    const updateStickyBannerSetting = useCallback(
+        (fields) =>
+            request(async () => {
+                const res = await api.patch("/admin/announcements/sticky-banner", fields);
+                const setting = res.data?.data?.data ?? null;
+                if (setting) {
+                    setStickyBannerSetting((prev) => ({ ...prev, ...setting }));
+                    toast("Sticky banner image updated.");
+                }
+                return res.data;
+            }),
+        [request]
+    );
+
     // ─── DELETE /api/admin/announcements/bulk/permanent ──────────────────────
     const permanentlyDeleteBroadcasts = useCallback(
         ({ ids }) =>
@@ -225,6 +255,7 @@ export function NotificationBroadcastsProvider({ children }) {
             attributes,
             pagination,
             selectedBroadcast,
+            stickyBannerSetting,
             loading,
             setPagination,
             setSelectedBroadcast,
@@ -240,6 +271,8 @@ export function NotificationBroadcastsProvider({ children }) {
             restoreBroadcasts,
             permanentlyDeleteBroadcast,
             permanentlyDeleteBroadcasts,
+            fetchStickyBannerSetting,
+            updateStickyBannerSetting,
         }}>
             {children}
         </NotificationBroadcastsContext.Provider>

src/contexts/AdminNotificationContext.jsx

@@ -14,7 +14,8 @@ export function useAdminNotifications() {
 export function AdminNotificationProvider({ children }) {
     const [notifications, setNotifications] = useState([]);
     const [unseenCount, setUnseenCount]     = useState(0);
-    const [stickyAnnouncement, setStickyAnnouncement] = useState(null);
+    const [stickyAnnouncements, setStickyAnnouncements] = useState([]);
+    const [bannerImage, setBannerImage]     = useState(null);
     const [loading, setLoading]             = useState(false);
     const intervalRef = useRef(null);
 
@@ -30,7 +31,8 @@ export function AdminNotificationProvider({ children }) {
     const fetchStickyAnnouncement = useCallback(async () => {
         try {
             const res = await api.get("/admin/notifications/sticky");
-            setStickyAnnouncement(res.data?.data?.announcement ?? null);
+            setStickyAnnouncements(res.data?.data?.announcements ?? []);
+            setBannerImage(res.data?.data?.bannerImage ?? null);
         } catch {
             // silent
         }
@@ -57,7 +59,7 @@ export function AdminNotificationProvider({ children }) {
                 prev.map(n => n.notification_id === id ? { ...n, seen: true } : n)
             );
             setUnseenCount(prev => Math.max(0, prev - 1));
-            setStickyAnnouncement(prev => (prev?.notification_id === id ? null : prev));
+            setStickyAnnouncements(prev => prev.filter(a => a.notification_id !== id));
         } catch {
             // silent
         }
@@ -68,7 +70,7 @@ export function AdminNotificationProvider({ children }) {
             await api.patch("/admin/notifications/seen-all");
             setNotifications(prev => prev.map(n => ({ ...n, seen: true })));
             setUnseenCount(0);
-            setStickyAnnouncement(null);
+            setStickyAnnouncements([]);
         } catch {
             // silent
         }
@@ -89,7 +91,8 @@ export function AdminNotificationProvider({ children }) {
         <AdminNotificationContext.Provider value={{
             notifications,
             unseenCount,
-            stickyAnnouncement,
+            stickyAnnouncements,
+            bannerImage,
             loading,
             fetchNotifications,
             markSeen,

src/contexts/AdminNotificationTemplateContext.jsx

@@ -1,76 +0,0 @@
-import { createContext, useCallback, useContext, useState } from "react";
-import api from "@/utils/api.util";
-import { toast } from "sonner";
-
-const AdminNotificationTemplateContext = createContext(null);
-
-export function useAdminNotificationTemplates() {
-    const ctx = useContext(AdminNotificationTemplateContext);
-    if (!ctx) throw new Error("useAdminNotificationTemplates must be used inside AdminNotificationTemplateProvider");
-    return ctx;
-}
-
-export function AdminNotificationTemplateProvider({ children }) {
-    const [templates, setTemplates] = useState([]);
-    const [template,  setTemplate]  = useState(null);
-    const [loading,   setLoading]   = useState(false);
-
-    const request = useCallback(async (fn) => {
-        setLoading(true);
-        try { return await fn(); }
-        catch (err) {
-            toast(err?.response?.data?.message ?? "Something went wrong.");
-            return null;
-        } finally { setLoading(false); }
-    }, []);
-
-    const fetchTemplates = useCallback(() =>
-        request(async () => {
-            const { data } = await api.get("/admin/announcement-templates");
-            setTemplates(data.data ?? []);
-            return data.data;
-        }), [request]);
-
-    const fetchTemplate = useCallback((id) =>
-        request(async () => {
-            const { data } = await api.get(`/admin/announcement-templates/${id}`);
-            setTemplate(data.data ?? null);
-            return data.data;
-        }), [request]);
-
-    const updateTemplate = useCallback((id, payload) =>
-        request(async () => {
-            const { data } = await api.put(`/admin/announcement-templates/${id}`, payload);
-            setTemplates((prev) =>
-                prev.map((t) => (String(t.notification_template_id) === String(id) ? data.data : t))
-            );
-            if (template && String(template.notification_template_id) === String(id)) setTemplate(data.data);
-            toast("Notification template updated.");
-            return data.data;
-        }), [request, template]);
-
-    const createTemplate = useCallback((payload) =>
-        request(async () => {
-            const { data } = await api.post("/admin/announcement-templates", payload);
-            setTemplates((prev) => [...prev, data.data]);
-            toast("Announcement template created.");
-            return data.data;
-        }), [request]);
-
-    const deleteTemplate = useCallback((id) =>
-        request(async () => {
-            await api.delete(`/admin/announcement-templates/${id}`);
-            setTemplates((prev) => prev.filter((t) => String(t.notification_template_id) !== String(id)));
-            toast("Announcement template deleted.");
-            return true;
-        }), [request]);
-
-    return (
-        <AdminNotificationTemplateContext.Provider value={{
-            templates, template, loading,
-            fetchTemplates, fetchTemplate, updateTemplate, createTemplate, deleteTemplate,
-        }}>
-            {children}
-        </AdminNotificationTemplateContext.Provider>
-    );
-}

src/contexts/ClientAdvertisementContext.jsx

@@ -29,7 +29,7 @@ export function useClientAdvertisements() {
 
 export function ClientAdvertisementsProvider({ children }) {
     const navigate = useNavigate();
-    const { profile, getProfile, updateProfile } = useProfile();
+    const { profile, getProfile } = useProfile();
 
     // Keyed by placement so multiple slots on the same page (e.g. dashboard.hero +
     // dashboard.popup) can be fetched independently without clobbering each other.
@@ -43,7 +43,6 @@ export function ClientAdvertisementsProvider({ children }) {
     const [listLoading, setListLoading] = useState({});
     const [clickCounts, setClickCounts] = useState(loadClickCounts);
     const [pendingClick, setPendingClick] = useState(null); // { ad, cta } awaiting confirmation
-    const [dismissConfirmOpen, setDismissConfirmOpen] = useState(false);
 
     // Ad fetches must know the real preference before deciding visibility — never
     // assume "show" as a default just because profile hasn't loaded yet. profileRef
@@ -63,14 +62,11 @@ export function ClientAdvertisementsProvider({ children }) {
         return fresh;
     }, [getProfile]);
 
-    // Popups are gated separately from hero/banner/sidebar so "Don't show this
+    // Gated by the Settings → Advertisements "Other ads" toggle.
-    // ad again" only ever touches popups, per the Settings → Advertisements toggles.
     const resolveVisibility = (profileData, ad) => {
         if (!ad) return ad;
-        const showPopupAds = profileData?.personal_info?.show_popup_ads ?? true;
         const showOtherAds = profileData?.personal_info?.show_other_ads ?? true;
-        const hidden = ad.type === "popup" ? !showPopupAds : !showOtherAds;
+        return showOtherAds ? ad : null;
-        return hidden ? null : ad;
     };
 
     // ─── GET /api/client/advertisements/active?placement=dashboard.hero ───────
@@ -171,15 +167,18 @@ export function ClientAdvertisementsProvider({ children }) {
         []
     );
 
-    // Tracks the click then follows the CTA link (external → new tab, internal → router nav).
+    // Tracks the click then follows the link: the CTA's own link wins if present,
+    // else the ad's redirect_link, else its internal Page Builder landing page
+    // (/ads/:uuid) if one was authored. External links open in a new tab.
     const goToCta = useCallback(
         (ad, cta) => {
             trackClick(ad?.advertisement_id);
-            if (!cta?.link) return;
+            const link = cta?.link || ad?.redirect_link || (ad?.landing_page ? `/ads/${ad.uuid}` : null);
-            if (/^https?:\/\//.test(cta.link)) {
+            if (!link) return;
-                window.open(cta.link, "_blank", "noopener,noreferrer");
+            if (/^https?:\/\//.test(link)) {
+                window.open(link, "_blank", "noopener,noreferrer");
             } else {
-                navigate(cta.link);
+                navigate(link);
             }
         },
         [navigate, trackClick]
@@ -219,20 +218,6 @@ export function ClientAdvertisementsProvider({ children }) {
         setPendingClick(null);
     };
 
-    // ─── "Don't show this ad again" (popups only) ──────────────────────────
-    // Persists the preference to the account (so it follows across devices),
-    // then shows a one-time confirmation pointing at where to turn it back on.
-    const dismissPopupForever = useCallback(async () => {
-        const result = await updateProfile({ show_popup_ads: false });
-        if (result?.data) profileRef.current = result.data;
-        setDismissConfirmOpen(true);
-    }, [updateProfile]);
-
-    const goToAdSettings = () => {
-        setDismissConfirmOpen(false);
-        navigate("/settings");
-    };
-
     return (
         <ClientAdvertisementsContext.Provider value={{
             advertisements,
@@ -244,7 +229,6 @@ export function ClientAdvertisementsProvider({ children }) {
             getActiveAdvertisementList,
             trackClick,
             handleAdCtaClick,
-            dismissPopupForever,
         }}>
             {children}
 
@@ -260,19 +244,6 @@ export function ClientAdvertisementsProvider({ children }) {
                     </>
                 }
             />
-
-            <ResponsiveModal
-                open={dismissConfirmOpen}
-                onOpenChange={setDismissConfirmOpen}
-                title="Popup ads turned off"
-                description="You won't see popup ads anymore. You can turn them back on anytime in Settings → Advertisements."
-                footer={
-                    <>
-                        <Button variant="outline" onClick={() => setDismissConfirmOpen(false)}>Got it</Button>
-                        <Button onClick={goToAdSettings}>Go to Settings</Button>
-                    </>
-                }
-            />
         </ClientAdvertisementsContext.Provider>
     );
 }

src/contexts/ClientNotificationContext.jsx

@@ -17,7 +17,8 @@ const DEFAULT_PAGINATION = { page: 1, limit: 10, pages: 1, total: 0 };
 export function ClientNotificationProvider({ children }) {
     const [notifications, setNotifications] = useState([]);
     const [unseenCount, setUnseenCount]     = useState(0);
-    const [stickyAnnouncement, setStickyAnnouncement] = useState(null);
+    const [stickyAnnouncements, setStickyAnnouncements] = useState([]);
+    const [bannerImage, setBannerImage]     = useState(null);
     const [loading, setLoading]             = useState(false);
     const [pagination, setPagination]       = useState(DEFAULT_PAGINATION);
     const intervalRef   = useRef(null);
@@ -35,7 +36,8 @@ export function ClientNotificationProvider({ children }) {
     const fetchStickyAnnouncement = useCallback(async () => {
         try {
             const res = await api.get("/client/notifications/sticky");
-            setStickyAnnouncement(res.data?.data?.announcement ?? null);
+            setStickyAnnouncements(res.data?.data?.announcements ?? []);
+            setBannerImage(res.data?.data?.bannerImage ?? null);
         } catch {
             // silent
         }
@@ -66,7 +68,7 @@ export function ClientNotificationProvider({ children }) {
             setNotifications([]);
             setUnseenCount(0);
             setPagination(DEFAULT_PAGINATION);
-            setStickyAnnouncement(null);
+            setStickyAnnouncements([]);
             return true;
         } catch {
             return false;
@@ -80,9 +82,7 @@ export function ClientNotificationProvider({ children }) {
                 prev.map(n => n.notification_id === id ? { ...n, seen: true } : n)
             );
 
-            if (stickyAnnouncement?.notification_id === id) {
+            setStickyAnnouncements(prev => prev.filter(a => a.notification_id !== id));
-                setStickyAnnouncement(null);
-            }
 
             // Re-sync badge + sticky immediately (handles cases where the marked
             // row isn't present in the currently loaded notifications page).
@@ -90,14 +90,14 @@ export function ClientNotificationProvider({ children }) {
         } catch {
             // silent
         }
-    }, [stickyAnnouncement?.notification_id, fetchUnseen, fetchStickyAnnouncement]);
+    }, [fetchUnseen, fetchStickyAnnouncement]);
 
     const markAllSeen = useCallback(async () => {
         try {
             await api.patch("/client/notifications/seen-all");
             setNotifications(prev => prev.map(n => ({ ...n, seen: true })));
             setUnseenCount(0);
-            setStickyAnnouncement(null);
+            setStickyAnnouncements([]);
         } catch {
             // silent
         }
@@ -131,7 +131,8 @@ export function ClientNotificationProvider({ children }) {
         <ClientNotificationContext.Provider value={{
             notifications,
             unseenCount,
-            stickyAnnouncement,
+            stickyAnnouncements,
+            bannerImage,
             loading,
             pagination,
             fetchNotifications,

src/data/adminTiles.data.js

@@ -1,4 +1,4 @@
-import { Users, GitFork, FolderOpen, BookText, BookCheck, FileText, ListCheck, ShieldCheck, Megaphone, Bell, Trophy, Cog } from "lucide-react";
+import { Users, GitFork, FolderOpen, BookText, BookCheck, FileText, ListCheck, ShieldCheck, Megaphone, Bell, Cog } from "lucide-react";
 
 export const ADMIN_SECTIONS = [
     {
@@ -43,7 +43,6 @@ export const ADMIN_SECTIONS = [
         tiles: [
             { key: "advertisements", label: "Advertisements", icon: Megaphone, link: "/admin/advertisements" },
             { key: "notifications", label: "Announcements", icon: Bell, link: "/admin/announcements" },
-            { key: "achievements", label: "Achievements", icon: Trophy, link: "/admin/achievements" },
         ],
     },
     {

src/data/advertisement.data.js

@@ -1,40 +1,36 @@
 // data/advertisements.data.js
-import { Megaphone, Image, BellRing, PanelRight } from "lucide-react";
+import { Megaphone, Image } from "lucide-react";
 
 // ─── Types ──────────────────────────────────────────────────────────────────
 // Drives: filter dropdown options, type badge label/icon on each card,
 // and which fields the Add/Edit form shows (hero needs headline/description/ctas,
-// banner/popup/sidebar are closer to image-only).
+// banner is closer to image-only).
 
-// TODO(ads-1): Once placements are re-categorized (Hero -> Dashboard, Banner ->
-// Tier Plans) and popup/sidebar placements are removed, drop the "popup" and
-// "sidebar" entries here too — see data/placement.data.js.
 export const ADVERTISEMENT_TYPES = [
     { value: "hero",    label: "Hero",    icon: Megaphone,   description: "Large featured banner with headline, description, and CTAs" },
     { value: "banner",  label: "Banner",  icon: Image,       description: "Simple image banner" },
-    { value: "popup",   label: "Popup",   icon: BellRing,    description: "Modal-style popup shown on page load" },
-    { value: "sidebar", label: "Sidebar", icon: PanelRight,  description: "Compact image placed in a sidebar slot" },
 ];
 
 export const ADVERTISEMENT_TYPE_MAP = Object.fromEntries(
     ADVERTISEMENT_TYPES.map((t) => [t.value, t])
 );
 
-// Types that show the rich content fields (headline, description, CTAs) in the form
+// ─── Content modes ──────────────────────────────────────────────────────────
-export const RICH_CONTENT_TYPES = ["hero"];
+// Whether an ad is image-only or carries badge/headline/description/CTAs
+// alongside the image — an explicit admin choice, decoupled from placement/format.
+export const CONTENT_MODES = [
+    { value: "image",   label: "Full image" },
+    { value: "content", label: "Content + image" },
+];
 
 // ─── Statuses ───────────────────────────────────────────────────────────────
 // Drives: filter dropdown options, status badge color/label on each card.
 
-// TODO(ads-4): Remove "archived" from this list — it should no longer show up
-// in the "All statuses" filter on AdvertisementList.jsx (archived ads live in
-// their own separate Archived list/table, not mixed into the active filter).
 export const ADVERTISEMENT_STATUSES = [
     { value: "draft",     label: "Draft",     badgeClass: "bg-muted text-muted-foreground" },
     { value: "active",    label: "Active",    badgeClass: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400" },
     { value: "scheduled", label: "Scheduled", badgeClass: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400" },
     { value: "expired",   label: "Expired",   badgeClass: "bg-muted text-muted-foreground" },
-    { value: "archived",  label: "Archived",  badgeClass: "bg-muted text-muted-foreground" },
 ];
 
 export const ADVERTISEMENT_STATUS_MAP = Object.fromEntries(

src/data/notificationTemplatePlaceholders.data.js

@@ -1,20 +0,0 @@
-// Reference-only registry of {{placeholder}} tokens available per system
-// notification type. Purely informational for the admin editor — the backend
-// derives the real substitution data from wherever renderNotification({ type,
-// data }) is called in code, this just tells the admin what's actually
-// available to reference. Mirrors emailTemplatePlaceholders.data.js.
-export const NOTIFICATION_TEMPLATE_PLACEHOLDERS = {
-    task_overdue:               ["count", "task_word"],
-    user_registration:          ["groupName", "groupCode", "userEmail"],
-    nogrp_user_registered:      ["userEmail", "regType"],
-    task_requirements_updated:  ["taskName", "taskListId", "groupId"],
-    user_task_overdue:          ["count", "task_label", "task_list_ids"],
-    task_reminder:              ["taskName", "deadline", "taskListId", "groupId"],
-    course_unlocked:            ["courseTitle", "courseUuid"],
-    course_completed:           ["courseTitle", "courseUuid"],
-    certificate_issued:         ["courseTitle", "courseUuid"],
-    welcome:                    ["greeting", "group_suffix", "groupName", "groupCode", "accType"],
-    nogrp_welcome:              [],
-    assessment_updated:         ["assessmentTitle", "courseTitle", "courseUuid"],
-    tier_expired:               ["planLabel", "tier", "label", "planId"],
-};

src/data/notificationTemplateTypes.data.js

@@ -1,20 +0,0 @@
-import { ListChecks, GraduationCap, Megaphone, ClipboardCheck, CreditCard, UserPlus, Users } from "lucide-react";
-
-// Groups notification templates by the `notify_type` written into the
-// delivered notification row — every row here is is_system, so a category
-// axis (like email templates' announcement/advertisement/system/other) would
-// always resolve to a single value and add nothing. This is the axis that
-// actually varies. Mirrors the shape of emailTemplateCategories.data.js.
-export const NOTIFICATION_TEMPLATE_TYPES = [
-    { value: "task_overdue",          label: "Tasks (Admin)",     icon: ListChecks },
-    { value: "task",                  label: "Tasks (User)",      icon: ListChecks },
-    { value: "course",                label: "Courses",           icon: GraduationCap },
-    { value: "announcement",          label: "Announcements",     icon: Megaphone },
-    { value: "assessment",            label: "Assessments",       icon: ClipboardCheck },
-    { value: "tier_expired",          label: "Subscriptions",     icon: CreditCard },
-    { value: "user_registration",     label: "New Registrations", icon: UserPlus },
-    { value: "nogrp_user_registered", label: "Unaffiliated Users", icon: Users },
-];
-
-export const getNotificationTemplateType = (value) =>
-    NOTIFICATION_TEMPLATE_TYPES.find((t) => t.value === value) ?? null;

src/data/placement.data.js

@@ -6,17 +6,10 @@
 // backend registry when adding a new placement — same pattern as ADVERTISEMENT_TYPES already
 // mirroring the backend type ENUM.
 
-// TODO(ads-1): Re-categorize placements — Hero -> Dashboard, Banner -> Tier Plans.
-// Remove the "popup" and "sidebar" formats entirely (dashboard.popup,
-// course_details.sidebar). Keep in sync with the backend registry at
-// new_starr/models/advertisements/advertisements.placements.js.
 export const PLACEMENTS = [
     { key: "dashboard.hero",         format: "hero",    page: "dashboard",      pageLabel: "Dashboard",      slotLabel: "Hero (top of page)" },
-    { key: "dashboard.popup",        format: "popup",   page: "dashboard",      pageLabel: "Dashboard",      slotLabel: "Popup (on load)" },
+    { key: "tier_plans.banner",      format: "banner",  page: "tier_plans",     pageLabel: "Tier Plans",     slotLabel: "Banner (above plan cards)" },
-    { key: "course_list.banner",     format: "banner",  page: "course_list",    pageLabel: "Courses",        slotLabel: "Banner (above course grid)" },
     { key: "course_details.banner",  format: "banner",  page: "course_details", pageLabel: "Course Details", slotLabel: "Banner (below hero)" },
-    { key: "course_details.sidebar", format: "sidebar", page: "course_details", pageLabel: "Course Details", slotLabel: "Sidebar (beside course content)" },
-    { key: "plans.banner",           format: "banner",  page: "plans",          pageLabel: "Plans",          slotLabel: "Banner (above plan cards)" },
 ];
 
 export const PLACEMENT_MAP = Object.fromEntries(PLACEMENTS.map((p) => [p.key, p]));

src/data/placementLayouts.data.js

@@ -26,46 +26,15 @@ export const PLACEMENT_LAYOUTS = {
             { kind: "grid", label: "Courses" },
         ],
     },
-    "dashboard.popup": {
-        blocks: [
-            { kind: "nav" },
-            { kind: "bar", size: "xl" },
-            { kind: "list", label: "My Groups" },
-            { kind: "grid", label: "Courses" },
-        ],
-        overlay: { label: "Popup" },
-    },
-    "course_list.banner": {
-        blocks: [
-            { kind: "nav" },
-            { kind: "filters" },
-            { kind: "bar", size: "md", highlight: true, label: "Banner" },
-            { kind: "grid", label: "Course cards" },
-        ],
-    },
     "course_details.banner": {
         blocks: [
             { kind: "nav" },
             { kind: "bar", size: "lg", label: "Course hero" },
             { kind: "bar", size: "sm", highlight: true, label: "Banner" },
-            { kind: "row", columns: [
+            { kind: "list", label: "Course content" },
-                { label: "Course content", width: "flex-1" },
-                { label: "Sidebar", width: "w-1/4" },
-            ] },
         ],
     },
-    "course_details.sidebar": {
+    "tier_plans.banner": {
-        blocks: [
-            { kind: "nav" },
-            { kind: "bar", size: "lg", label: "Course hero" },
-            { kind: "bar", size: "sm", label: "Banner" },
-            { kind: "row", columns: [
-                { label: "Course content", width: "flex-1" },
-                { label: "Sidebar", width: "w-1/4", highlight: true },
-            ] },
-        ],
-    },
-    "plans.banner": {
         blocks: [
             { kind: "nav" },
             { kind: "bar", size: "md", highlight: true, label: "Banner" },

src/modules/admin/config/advertisements/archive/columns.config.jsx

@@ -11,10 +11,6 @@ export const columnPinning = {
 
 const cellOverrides = {};
 
-// TODO(ads-9): Fix Sort and Columns on the Archived Advertisements table —
-// sorting/column visibility currently misbehaves. Compare against a working
-// DataTable usage elsewhere in admin/config to see what's diverging (likely
-// an attributes/sort-key mismatch coming out of the paginate() response).
 /**
  * Builds the full column array for the Archived Advertisements table.
  *

src/modules/admin/pages/achievements/Achievements.jsx

@@ -1,172 +0,0 @@
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import * as LucideIcons from "lucide-react";
-import { House, Plus, Pencil, Trash2, Trophy, Lock } from "lucide-react";
-import { Button }    from "@/components/ui/button";
-import { Badge }     from "@/components/ui/badge";
-import { Spinner }   from "@/components/ui/spinner";
-import { Separator } from "@/components/ui/separator";
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from "@/components/ui/dialog";
-import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
-import { PageMeta }  from "@/contexts/MetadataContext";
-import {
-    AdminAchievementsProvider,
-    useAdminAchievements,
-} from "@/contexts/AdminAchievementsContext";
-
-function AchievementCard({ item, onEdit, onDelete }) {
-    const Icon = LucideIcons[item.icon] ?? Trophy;
-    return (
-        <div className="rounded-lg border bg-card p-5 flex items-start justify-between gap-4">
-            <div className="flex items-start gap-4">
-                <div className="w-12 h-12 rounded-lg border bg-muted flex items-center justify-center shrink-0">
-                    <Icon className="h-5 w-5 text-muted-foreground" />
-                </div>
-                <div className="min-w-0">
-                    <div className="flex items-center gap-2 flex-wrap">
-                        <p className="text-sm font-semibold">{item.label}</p>
-                        <code className="text-[10px] bg-muted px-1.5 py-0.5 rounded text-muted-foreground">{item.key}</code>
-                        <Badge variant="outline" className="text-[10px] capitalize">{item.type}</Badge>
-                        {!item.is_active && <Badge variant="secondary">Inactive</Badge>}
-                        {item.is_system && (
-                            <Badge variant="secondary" className="gap-1">
-                                <Lock className="h-2.5 w-2.5" /> System
-                            </Badge>
-                        )}
-                    </div>
-                    {item.description && (
-                        <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{item.description}</p>
-                    )}
-                    {item.trigger && (
-                        <p className="text-xs text-muted-foreground mt-0.5">
-                            Trigger: <span className="font-medium text-foreground capitalize">{item.trigger}</span>
-                        </p>
-                    )}
-                </div>
-            </div>
-            <div className="flex items-center gap-1 shrink-0">
-                <Button type="button" variant="ghost" size="icon" onClick={() => onEdit(item)}>
-                    <Pencil className="h-4 w-4" />
-                </Button>
-                {!item.is_system && (
-                    <Button type="button" variant="ghost" size="icon" onClick={() => onDelete(item)}>
-                        <Trash2 className="h-4 w-4 text-destructive" />
-                    </Button>
-                )}
-            </div>
-        </div>
-    );
-}
-
-function AchievementsInner() {
-    const navigate = useNavigate();
-    const { achievements, loading, fetchAchievements, deleteAchievement } = useAdminAchievements();
-
-    const [deleteTarget, setDeleteTarget] = useState(null);
-    const [deleting,     setDeleting]     = useState(false);
-
-    useEffect(() => { fetchAchievements(); }, []);
-
-    const confirmDelete = async () => {
-        if (!deleteTarget) return;
-        setDeleting(true);
-        await deleteAchievement(deleteTarget.achievement_definition_id);
-        setDeleting(false);
-        setDeleteTarget(null);
-    };
-
-    return (
-        <section className="bg-muted/60 min-h-full">
-            <PageMeta title="Achievements - STARR" />
-            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
-                <div className="w-full max-w-2xl mx-auto">
-
-                    <div className="flex flex-col gap-2 mb-6">
-                        <AppBreadcrumb items={[
-                            { label: "Home", icon: <House className="size-4" />, to: "/admin" },
-                            { label: "Achievements" },
-                        ]} />
-                    </div>
-
-                    <div className="flex items-center justify-between mb-6">
-                        <div>
-                            <h1 className="text-xl font-semibold">Achievements</h1>
-                            <p className="text-sm text-muted-foreground mt-0.5">
-                                Badges and milestones learners can earn across the platform.
-                            </p>
-                        </div>
-                        <Button size="sm" onClick={() => navigate("/admin/achievements/add")}>
-                            <Plus className="h-4 w-4 mr-2" />
-                            Add Achievement
-                        </Button>
-                    </div>
-
-                    <div className="rounded-lg border bg-card p-4 flex items-start gap-3 mb-5">
-                        <Lock className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
-                        <p className="text-xs text-muted-foreground">
-                            <strong>System</strong> achievements are auto-granted by platform events (registration, course completion, etc.)
-                            and cannot be deleted or have their key/type changed — everything else stays editable.
-                        </p>
-                    </div>
-
-                    <Separator className="mb-5" />
-
-                    {loading && !achievements.length ? (
-                        <div className="flex justify-center py-12"><Spinner className="h-5 w-5" /></div>
-                    ) : !achievements.length ? (
-                        <p className="text-sm text-muted-foreground text-center py-12">No achievements found.</p>
-                    ) : (
-                        <div className="space-y-3">
-                            {achievements.map((item) => (
-                                <AchievementCard
-                                    key={item.achievement_definition_id}
-                                    item={item}
-                                    onEdit={(a) => navigate(`/admin/achievements/${a.achievement_definition_id}/edit`)}
-                                    onDelete={(a) => setDeleteTarget(a)}
-                                />
-                            ))}
-                        </div>
-                    )}
-                </div>
-            </div>
-
-            {/* Delete confirmation dialog */}
-            <Dialog open={!!deleteTarget} onOpenChange={(open) => { if (!open) setDeleteTarget(null); }}>
-                <DialogContent className="sm:max-w-sm">
-                    <DialogHeader>
-                        <DialogTitle>Delete Achievement</DialogTitle>
-                        <DialogDescription>
-                            Are you sure you want to delete{" "}
-                            <span className="font-semibold text-foreground">{deleteTarget?.label}</span>?
-                            This action cannot be undone. Any courses referencing this achievement must be unassigned first.
-                        </DialogDescription>
-                    </DialogHeader>
-                    <DialogFooter>
-                        <Button variant="outline" onClick={() => setDeleteTarget(null)} disabled={deleting}>
-                            Cancel
-                        </Button>
-                        <Button variant="destructive" onClick={confirmDelete} disabled={deleting}>
-                            {deleting && <Spinner className="h-4 w-4 mr-2" />}
-                            Delete
-                        </Button>
-                    </DialogFooter>
-                </DialogContent>
-            </Dialog>
-        </section>
-    );
-}
-
-export default function Achievements() {
-    return (
-        <AdminAchievementsProvider>
-            <AchievementsInner />
-        </AdminAchievementsProvider>
-    );
-}

src/modules/admin/pages/achievements/EditAchievement.jsx

@@ -1,255 +0,0 @@
-import { useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import { ArrowLeft, House, X, Lock } from "lucide-react";
-import { BADGE_ICON_OPTIONS } from "@/modules/admin/pages/tiers/EditTierCategory";
-import { Button }   from "@/components/ui/button";
-import { Input }    from "@/components/ui/input";
-import { Label }    from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Spinner }  from "@/components/ui/spinner";
-import { Switch }   from "@/components/ui/switch";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
-import { PageMeta }  from "@/contexts/MetadataContext";
-import {
-    AdminAchievementsProvider,
-    useAdminAchievements,
-} from "@/contexts/AdminAchievementsContext";
-
-const TRIGGER_OPTIONS = [
-    { value: "auth",    label: "Auth (registration / login)" },
-    { value: "tier",    label: "Tier (subscription purchase)" },
-    { value: "course",  label: "Course (lessons / quizzes)" },
-    { value: "profile", label: "Profile completion" },
-    { value: "social",  label: "Social (referrals / community)" },
-    { value: "manual",  label: "Manual (admin-granted only)" },
-];
-
-function SectionCard({ title, children }) {
-    return (
-        <div className="rounded-lg border bg-card p-5 space-y-4">
-            {title && <p className="text-sm font-semibold border-b pb-3">{title}</p>}
-            {children}
-        </div>
-    );
-}
-
-function FieldError({ message }) {
-    if (!message) return null;
-    return <p className="text-xs text-destructive mt-1">{message}</p>;
-}
-
-function EditAchievementInner({ isAdd }) {
-    const navigate    = useNavigate();
-    const { id }      = useParams();
-    const { achievement, loading, fetchAchievement, createAchievement, updateAchievement } = useAdminAchievements();
-
-    const [key,         setKey]         = useState("");
-    const [type,        setType]        = useState("badge");
-    const [label,       setLabel]       = useState("");
-    const [description, setDescription] = useState("");
-    const [icon,        setIcon]        = useState(null);
-    const [trigger,     setTrigger]     = useState("manual");
-    const [isActive,    setIsActive]    = useState(true);
-    const [errors,      setErrors]      = useState({});
-
-    useEffect(() => {
-        if (!isAdd && id) fetchAchievement(id);
-    }, [id, isAdd]);
-
-    useEffect(() => {
-        if (achievement && !isAdd) {
-            setKey(achievement.key ?? "");
-            setType(achievement.type ?? "badge");
-            setLabel(achievement.label ?? "");
-            setDescription(achievement.description ?? "");
-            setIcon(achievement.icon ?? null);
-            setTrigger(achievement.trigger ?? "manual");
-            setIsActive(achievement.is_active ?? true);
-        }
-    }, [achievement, isAdd]);
-
-    const validate = () => {
-        const e = {};
-        if (!label.trim()) e.label = "Label is required.";
-        if (isAdd && !key.trim()) e.key = "Key is required.";
-        if (isAdd && !/^[a-z0-9_]+$/.test(key)) e.key = "Key must be lowercase letters, numbers or underscores.";
-        setErrors(e);
-        return !Object.keys(e).length;
-    };
-
-    const handleSave = async () => {
-        if (!validate()) return;
-
-        const payload = {
-            type,
-            label:       label.trim(),
-            description: description.trim() || null,
-            icon:        icon    || null,
-            trigger:     trigger || null,
-            is_active:   isActive,
-        };
-
-        if (isAdd) {
-            payload.key = key.trim();
-            const result = await createAchievement(payload);
-            if (result) navigate("/admin/achievements");
-        } else {
-            const result = await updateAchievement(id, payload);
-            if (result) navigate("/admin/achievements");
-        }
-    };
-
-    const isSystem = !isAdd && achievement?.is_system;
-
-    return (
-        <section className="bg-muted/60 min-h-full">
-            <PageMeta title={isAdd ? "Add Achievement - STARR" : "Edit Achievement - STARR"} />
-            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
-                <div className="w-full max-w-2xl mx-auto">
-
-                    <div className="flex flex-col gap-2 mb-6">
-                        <AppBreadcrumb items={[
-                            { label: "Home",         icon: <House className="size-4" />, to: "/admin" },
-                            { label: "Achievements", to: "/admin/achievements" },
-                            { label: isAdd ? "Add Achievement" : (achievement?.label ?? "Edit") },
-                        ]} />
-                    </div>
-
-                    <div className="flex items-center gap-3 mb-6">
-                        <Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
-                            <ArrowLeft className="h-4 w-4" />
-                        </Button>
-                        <div>
-                            <h1 className="text-xl font-semibold">{isAdd ? "Add Achievement" : "Edit Achievement"}</h1>
-                            <p className="text-sm text-muted-foreground">
-                                {isAdd ? "Define a new badge or milestone learners can earn." : "Update this achievement's details."}
-                            </p>
-                        </div>
-                    </div>
-
-                    {isSystem && (
-                        <div className="rounded-lg border bg-card p-4 flex items-start gap-3 mb-5">
-                            <Lock className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
-                            <p className="text-xs text-muted-foreground">
-                                This is a <strong>system</strong> achievement — it's auto-granted by platform code that references
-                                its key directly, so the key and type are locked. Label, description, icon, trigger and active state are still editable.
-                            </p>
-                        </div>
-                    )}
-
-                    <div className="space-y-5">
-
-                        <SectionCard title="Achievement Details">
-                            <div className="space-y-1.5">
-                                <Label htmlFor="key">Key <span className="text-destructive">*</span></Label>
-                                <Input
-                                    id="key"
-                                    value={key}
-                                    onChange={(e) => setKey(e.target.value.toLowerCase())}
-                                    placeholder="e.g. course_marathon"
-                                    disabled={!isAdd}
-                                />
-                                <p className="text-xs text-muted-foreground">Lowercase, no spaces. Cannot be changed after creation.</p>
-                                <FieldError message={errors.key} />
-                            </div>
-
-                            <div className="space-y-1.5">
-                                <Label htmlFor="label">Label <span className="text-destructive">*</span></Label>
-                                <Input id="label" value={label} onChange={(e) => setLabel(e.target.value)} placeholder="e.g. Course Marathon" />
-                                <FieldError message={errors.label} />
-                            </div>
-
-                            <div className="space-y-1.5">
-                                <Label htmlFor="description">Description</Label>
-                                <Textarea id="description" value={description} onChange={(e) => setDescription(e.target.value)} rows={2} placeholder="What does a learner do to earn this?" />
-                            </div>
-
-                            <div className="grid grid-cols-2 gap-4">
-                                <div className="space-y-1.5">
-                                    <Label>Type</Label>
-                                    <Select value={type} onValueChange={setType} disabled={isSystem}>
-                                        <SelectTrigger><SelectValue /></SelectTrigger>
-                                        <SelectContent>
-                                            <SelectItem value="badge">Badge</SelectItem>
-                                            <SelectItem value="milestone">Milestone</SelectItem>
-                                        </SelectContent>
-                                    </Select>
-                                </div>
-                                <div className="space-y-1.5">
-                                    <Label>Trigger</Label>
-                                    <Select value={trigger} onValueChange={setTrigger}>
-                                        <SelectTrigger><SelectValue /></SelectTrigger>
-                                        <SelectContent>
-                                            {TRIGGER_OPTIONS.map((opt) => (
-                                                <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
-                                            ))}
-                                        </SelectContent>
-                                    </Select>
-                                    <p className="text-xs text-muted-foreground">Informational only — doesn't wire up new automatic grants by itself.</p>
-                                </div>
-                            </div>
-
-                            <div className="flex items-center gap-3">
-                                <Switch id="is_active" checked={isActive} onCheckedChange={setIsActive} />
-                                <Label htmlFor="is_active">Active</Label>
-                            </div>
-                        </SectionCard>
-
-                        <SectionCard title="Icon">
-                            <p className="text-xs text-muted-foreground -mt-1">
-                                Shown next to this achievement wherever it's displayed to learners.
-                            </p>
-                            <div className="flex flex-wrap gap-2">
-                                <button
-                                    type="button"
-                                    onClick={() => setIcon(null)}
-                                    className={`flex items-center justify-center w-9 h-9 rounded-lg border-2 text-xs text-muted-foreground transition-all ${!icon ? "border-foreground bg-muted scale-105" : "border-border hover:border-muted-foreground"}`}
-                                    title="No icon"
-                                >
-                                    <X className="size-3.5" />
-                                </button>
-                                {BADGE_ICON_OPTIONS.map(({ name, icon: Icon }) => {
-                                    const selected = icon === name;
-                                    return (
-                                        <button
-                                            key={name}
-                                            type="button"
-                                            title={name}
-                                            onClick={() => setIcon(name)}
-                                            className={`flex items-center justify-center w-9 h-9 rounded-lg border-2 transition-all ${selected ? "bg-secondary text-secondary-foreground border-foreground scale-105" : "border-border hover:border-muted-foreground"}`}
-                                        >
-                                            <Icon className="size-4" />
-                                        </button>
-                                    );
-                                })}
-                            </div>
-                            {icon && (
-                                <p className="text-xs text-muted-foreground">Selected: <span className="font-medium">{icon}</span></p>
-                            )}
-                        </SectionCard>
-
-                        <div className="flex justify-end gap-3">
-                            <Button type="button" variant="outline" onClick={() => navigate(-1)} disabled={loading}>Cancel</Button>
-                            <Button type="button" onClick={handleSave} disabled={loading}>
-                                {loading && <Spinner className="h-4 w-4 mr-2" />}
-                                {isAdd ? "Create Achievement" : "Save Changes"}
-                            </Button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-}
-
-function Wrapper({ isAdd }) {
-    return (
-        <AdminAchievementsProvider>
-            <EditAchievementInner isAdd={isAdd} />
-        </AdminAchievementsProvider>
-    );
-}
-
-export function AddAchievement()  { return <Wrapper isAdd={true} />; }
-export function EditAchievement() { return <Wrapper isAdd={false} />; }

src/modules/admin/pages/advertisements/AddAdvertisement.jsx

@@ -7,7 +7,7 @@ import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
     House, Plus, Trash2, ImagePlus, MapPin, FileText,
-    Link2, CalendarClock, Check, ChevronLeft, ChevronRight,
+    LayoutTemplate, CalendarClock, Check, ChevronLeft, ChevronRight,
 } from "lucide-react";
 
 import { useAdvertisements } from "@/contexts/AdminAdvertisementContext";
@@ -25,16 +25,18 @@ import { Switch } from "@/components/ui/switch";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { DateTimePicker } from "@/components/ui/date-time-picker";
 import { AssetPickerSheet } from "@/components/generic/AssetPickerSheet";
 import { PlacementSkeleton } from "@/components/generic/PlacementSkeleton";
 
-import { RICH_CONTENT_TYPES, MAX_CTAS } from "@/data/advertisement.data";
+import { MAX_CTAS, CONTENT_MODES } from "@/data/advertisement.data";
-import { AD_PAGES, PLACEMENT_MAP } from "@/data/placement.data";
+import { PLACEMENTS, PLACEMENT_MAP } from "@/data/placement.data";
 
 // ─── Schema ─────────────────────────────────────────────────────────────────
 
 const schema = z.object({
     placement:     z.string().min(1, "Placement is required."),
+    content_mode:  z.enum(["image", "content"]).default("image"),
     badge_label:   z.string().optional(),
     headline:      z.string().optional(),
     description:   z.string().optional(),
@@ -45,6 +47,16 @@ const schema = z.object({
         link:    z.string().min(1, "Link is required."),
         variant: z.enum(["default", "outline"]).default("default"),
     })).max(MAX_CTAS, `A maximum of ${MAX_CTAS} buttons is allowed.`).default([]),
+    redirect_link: z.string().optional(),
+    landing_page: z.object({
+        title:       z.string().optional(),
+        description: z.string().optional(),
+        body:        z.string().optional(),
+        links:       z.array(z.object({
+            label: z.string().optional(),
+            link:  z.string().optional(),
+        })).default([]),
+    }).default({}),
     start_date: z.string().optional(),
     end_date:   z.string().optional(),
     order:      z.coerce.number().min(0).default(0),
@@ -64,31 +76,16 @@ const schema = z.object({
     }
 });
 
-// TODO(ads-6): Rework this wizard to match the target spec:
-//   Step 1 Placement    — choose ONLY Dashboard, Tier Plans, or Course Details
-//                          (depends on ads-1 registry re-categorization).
-//   Step 2 Content      — pick "full image" vs "content + image":
-//                          full image  -> image only
-//                          content+img -> badge label, headline, description,
-//                                         CTAs, redirect link
-//   Step 3 Page Builder — only shown when no redirect link was provided;
-//                          builds an internal landing page (title, description,
-//                          body, links, etc.) — new step, doesn't exist yet.
-//   Step 4 Scheduling & Display — start date, end date, order, and an
-//                          active/draft switch labeled "Draft" when off
-//                          (currently has start/end/order but check the
-//                          on/off switch's Draft/Inactive labeling matches).
-//   Step 5 Review       — display all details.
 // ─── Steps ────────────────────────────────────────────────────────────────────
-// richOnly steps are skipped entirely for placements whose format isn't a
+// The Page Builder step only shows up when no redirect_link was given — it's
-// RICH_CONTENT_TYPES format (banner/popup/sidebar never had CTAs).
+// the alternative click-through destination (an internally-authored landing
+// page) for ads that don't link straight out to a URL.
 const ALL_STEPS = [
-    { id: "placement",  label: "Placement",           icon: MapPin,       description: "Choose the page and position this ad will appear in." },
+    { id: "placement",    label: "Placement",           icon: MapPin,         description: "Choose where this ad appears — Dashboard, Tier Plans, or Course Details." },
-    { id: "content",    label: "Content",              icon: FileText,     description: "Headline, description, and badge text for this placement." },
+    { id: "content",      label: "Content",              icon: FileText,       description: "Full image, or content with badge, headline, description, and CTAs." },
-    { id: "image",      label: "Image",                icon: ImagePlus,    description: "Choose an existing asset from Asset Management." },
+    { id: "pageBuilder",  label: "Page Builder",         icon: LayoutTemplate, description: "No redirect link? Build an internal landing page for this ad instead.", skippable: true },
-    { id: "ctas",       label: "CTAs",                 icon: Link2,        description: `Up to ${MAX_CTAS} buttons shown on the placement.`, richOnly: true },
+    { id: "scheduling",   label: "Scheduling & Display", icon: CalendarClock,  description: "Start/end dates, display order, and draft/active status." },
-    { id: "scheduling", label: "Scheduling & Display", icon: CalendarClock, description: "Optional start/end dates, manual ordering, and the on/off switch." },
+    { id: "review",       label: "Review",               icon: Check,          description: "Confirm everything before creating this advertisement." },
-    { id: "review",     label: "Review",               icon: Check,        description: "Confirm everything before creating this advertisement." },
 ];
 
 // ─── Helpers ────────────────────────────────────────────────────────────────
@@ -152,49 +149,27 @@ function Stepper({ steps, stepIndex }) {
     );
 }
 
-// ─── Step: Placement ────────────────────────────────────────────────────────
+// ─── Step 1: Placement ──────────────────────────────────────────────────────
 
-function StepPlacement({ selectedPage, setSelectedPage, placement, setValue, positionOptions, errors, format, isBanner, watch }) {
+function StepPlacement({ placement, setValue, errors, format, isBanner, watch }) {
     return (
         <div className="space-y-5">
-            <div className="grid grid-cols-2 gap-3">
+            <div>
-                <div>
+                <Label className="mb-1.5 block">Placement</Label>
-                    <Label className="mb-1.5 block">Page</Label>
+                <Select
-                    <Select
+                    value={placement || undefined}
-                        value={selectedPage ?? undefined}
+                    onValueChange={(v) => setValue("placement", v, { shouldValidate: true })}
-                        onValueChange={(v) => {
+                >
-                            setSelectedPage(v);
+                    <SelectTrigger>
-                            setValue("placement", "", { shouldValidate: false });
+                        <SelectValue placeholder="Select a placement" />
-                        }}
+                    </SelectTrigger>
-                    >
+                    <SelectContent>
-                        <SelectTrigger>
+                        {PLACEMENTS.map((p) => (
-                            <SelectValue placeholder="Select a page" />
+                            <SelectItem key={p.key} value={p.key}>{p.pageLabel}</SelectItem>
-                        </SelectTrigger>
+                        ))}
-                        <SelectContent>
+                    </SelectContent>
-                            {AD_PAGES.map((p) => (
+                </Select>
-                                <SelectItem key={p.page} value={p.page}>{p.pageLabel}</SelectItem>
+                <FieldError message={errors.placement?.message} />
-                            ))}
-                        </SelectContent>
-                    </Select>
-                </div>
-                <div>
-                    <Label className="mb-1.5 block">Position</Label>
-                    <Select
-                        value={placement || undefined}
-                        onValueChange={(v) => setValue("placement", v, { shouldValidate: true })}
-                        disabled={!selectedPage}
-                    >
-                        <SelectTrigger>
-                            <SelectValue placeholder={selectedPage ? "Select a position" : "Select a page first"} />
-                        </SelectTrigger>
-                        <SelectContent>
-                            {positionOptions.map((p) => (
-                                <SelectItem key={p.key} value={p.key}>{p.slotLabel}</SelectItem>
-                            ))}
-                        </SelectContent>
-                    </Select>
-                    <FieldError message={errors.placement?.message} />
-                </div>
             </div>
 
             {placement && (
@@ -231,47 +206,9 @@ function StepPlacement({ selectedPage, setSelectedPage, placement, setValue, pos
     );
 }
 
-// ─── Step: Content ──────────────────────────────────────────────────────────
+// ─── Step 2: Content ────────────────────────────────────────────────────────
 
-function StepContent({ register, errors, showRichContent, description, format }) {
+function StepImagePicker({ selectedAsset, imageUrl, setPickerOpen }) {
-    if (!showRichContent) {
-        return (
-            <div>
-                <Label className="mb-1.5 block">Headline (optional)</Label>
-                <Input placeholder="Internal label for this ad" {...register("headline")} />
-            </div>
-        );
-    }
-
-    return (
-        <div className="space-y-5">
-            <div>
-                <Label className="mb-1.5 block">Badge label</Label>
-                <Input placeholder="e.g. Advertisement" {...register("badge_label")} />
-            </div>
-            <div>
-                <Label className="mb-1.5 block">Headline</Label>
-                <Input placeholder="e.g. Discover the World Top Designers" {...register("headline")} />
-            </div>
-            <div>
-                <Label className="mb-1.5 block">Description</Label>
-                <Textarea rows={3} placeholder="Supporting text under the headline" {...register("description")} />
-                {format === "hero" && (
-                    <div className="flex justify-between items-start mt-1">
-                        <FieldError message={errors.description?.message} />
-                        <span className={`text-xs ml-auto ${(description?.length ?? 0) > 200 ? "text-destructive" : "text-muted-foreground"}`}>
-                            {description?.length ?? 0}/200
-                        </span>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-}
-
-// ─── Step: Image ────────────────────────────────────────────────────────────
-
-function StepImage({ selectedAsset, imageUrl, setPickerOpen }) {
     return selectedAsset ? (
         <div
             className="relative rounded-lg overflow-hidden cursor-pointer border h-36 group"
@@ -298,71 +235,191 @@ function StepImage({ selectedAsset, imageUrl, setPickerOpen }) {
     );
 }
 
-// ─── Step: CTAs ─────────────────────────────────────────────────────────────
+function StepContent({
+    register, errors, setValue, watch, description, format,
+    selectedAsset, imageUrl, setPickerOpen,
+    ctaFields, appendCta, removeCta,
+}) {
+    const contentMode = watch("content_mode");
 
-function StepCtas({ ctaFields, register, errors, watch, setValue, appendCta, removeCta }) {
     return (
-        <div className="space-y-3">
+        <div className="space-y-5">
-            {ctaFields.map((field, index) => (
+            <div>
-                <div key={field.id} className="flex gap-2 items-start">
+                <Label className="mb-1.5 block">Content type</Label>
-                    <div className="flex-1">
+                <div className="grid grid-cols-2 gap-3">
-                        <Input placeholder="Label (e.g. Explore)" {...register(`ctas.${index}.label`)} />
+                    {CONTENT_MODES.map((m) => (
-                        <FieldError message={errors.ctas?.[index]?.label?.message} />
+                        <button
-                    </div>
+                            key={m.value}
-                    <div className="flex-1">
+                            type="button"
-                        <Input placeholder="Link (e.g. /courses)" {...register(`ctas.${index}.link`)} />
+                            onClick={() => setValue("content_mode", m.value, { shouldValidate: true })}
-                        <FieldError message={errors.ctas?.[index]?.link?.message} />
+                            className={cn(
-                    </div>
+                                "rounded-lg border p-3 text-left transition-colors",
-                    <div className="w-[120px]">
+                                contentMode === m.value ? "border-primary bg-primary/5" : "hover:bg-muted/50"
-                        <Select
+                            )}
-                            value={watch(`ctas.${index}.variant`) ?? "default"}
-                            onValueChange={(v) => setValue(`ctas.${index}.variant`, v)}
                         >
-                            <SelectTrigger>
+                            <p className="text-sm font-medium">{m.label}</p>
-                                <SelectValue placeholder="Style" />
+                            <p className="text-xs text-muted-foreground mt-0.5">
-                            </SelectTrigger>
+                                {m.value === "image" ? "Just an image, no text overlay." : "Badge, headline, description, and CTAs."}
-                            <SelectContent>
+                            </p>
-                                {CTA_VARIANTS.map((v) => (
+                        </button>
-                                    <SelectItem key={v.value} value={v.value}>{v.label}</SelectItem>
+                    ))}
-                                ))}
+                </div>
-                            </SelectContent>
+            </div>
-                        </Select>
+
-                    </div>
+            <div>
-                    <Button type="button" variant="ghost" size="icon" onClick={() => removeCta(index)} aria-label="Remove">
+                <Label className="mb-1.5 block">Image</Label>
-                        <Trash2 className="size-4" />
+                <StepImagePicker selectedAsset={selectedAsset} imageUrl={imageUrl} setPickerOpen={setPickerOpen} />
-                    </Button>
+            </div>
+
+            {contentMode === "content" && (
+                <div className="space-y-5">
+                    <div>
+                        <Label className="mb-1.5 block">Badge label</Label>
+                        <Input placeholder="e.g. Advertisement" {...register("badge_label")} />
+                    </div>
+                    <div>
+                        <Label className="mb-1.5 block">Headline</Label>
+                        <Input placeholder="e.g. Discover the World Top Designers" {...register("headline")} />
+                    </div>
+                    <div>
+                        <Label className="mb-1.5 block">Description</Label>
+                        <Textarea rows={3} placeholder="Supporting text under the headline" {...register("description")} />
+                        {format === "hero" && (
+                            <div className="flex justify-between items-start mt-1">
+                                <FieldError message={errors.description?.message} />
+                                <span className={`text-xs ml-auto ${(description?.length ?? 0) > 200 ? "text-destructive" : "text-muted-foreground"}`}>
+                                    {description?.length ?? 0}/200
+                                </span>
+                            </div>
+                        )}
+                    </div>
+
+                    <div>
+                        <Label className="mb-1.5 block">Calls to action</Label>
+                        <div className="space-y-3">
+                            {ctaFields.map((field, index) => (
+                                <div key={field.id} className="flex gap-2 items-start">
+                                    <div className="flex-1">
+                                        <Input placeholder="Label (e.g. Explore)" {...register(`ctas.${index}.label`)} />
+                                        <FieldError message={errors.ctas?.[index]?.label?.message} />
+                                    </div>
+                                    <div className="flex-1">
+                                        <Input placeholder="Link (e.g. /courses)" {...register(`ctas.${index}.link`)} />
+                                        <FieldError message={errors.ctas?.[index]?.link?.message} />
+                                    </div>
+                                    <div className="w-[120px]">
+                                        <Select
+                                            value={watch(`ctas.${index}.variant`) ?? "default"}
+                                            onValueChange={(v) => setValue(`ctas.${index}.variant`, v)}
+                                        >
+                                            <SelectTrigger>
+                                                <SelectValue placeholder="Style" />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                {CTA_VARIANTS.map((v) => (
+                                                    <SelectItem key={v.value} value={v.value}>{v.label}</SelectItem>
+                                                ))}
+                                            </SelectContent>
+                                        </Select>
+                                    </div>
+                                    <Button type="button" variant="ghost" size="icon" onClick={() => removeCta(index)} aria-label="Remove">
+                                        <Trash2 className="size-4" />
+                                    </Button>
+                                </div>
+                            ))}
+                            {ctaFields.length < MAX_CTAS ? (
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => appendCta({ label: "", link: "", variant: ctaFields.length === 0 ? "default" : "outline" })}
+                                >
+                                    <Plus className="size-3.5" />
+                                    Add CTA
+                                </Button>
+                            ) : (
+                                <p className="text-xs text-muted-foreground">Maximum of {MAX_CTAS} buttons reached.</p>
+                            )}
+                        </div>
+                    </div>
                 </div>
-            ))}
-            {ctaFields.length < MAX_CTAS ? (
-                <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={() => appendCta({ label: "", link: "", variant: ctaFields.length === 0 ? "default" : "outline" })}
-                >
-                    <Plus className="size-3.5" />
-                    Add CTA
-                </Button>
-            ) : (
-                <p className="text-xs text-muted-foreground">Maximum of {MAX_CTAS} buttons reached.</p>
             )}
+
+            <Separator />
+
+            <div>
+                <Label className="mb-1.5 block">Redirect link</Label>
+                <Input placeholder="e.g. /courses or https://example.com" {...register("redirect_link")} />
+                <p className="text-xs text-muted-foreground mt-1.5">
+                    Where clicking the ad itself goes to. Leave blank to build an internal landing page in the next step instead.
+                </p>
+            </div>
         </div>
     );
 }
 
-// ─── Step: Scheduling & Display ─────────────────────────────────────────────
+// ─── Step 3: Page Builder ───────────────────────────────────────────────────
+
+function StepPageBuilder({ register, linkFields, appendLink, removeLink }) {
+    return (
+        <div className="space-y-5">
+            <div>
+                <Label className="mb-1.5 block">Page title</Label>
+                <Input placeholder="e.g. Why upgrade to Pro" {...register("landing_page.title")} />
+            </div>
+            <div>
+                <Label className="mb-1.5 block">Page description</Label>
+                <Textarea rows={2} placeholder="Short summary shown under the title" {...register("landing_page.description")} />
+            </div>
+            <div>
+                <Label className="mb-1.5 block">Body</Label>
+                <Textarea rows={6} placeholder="Main page content" {...register("landing_page.body")} />
+            </div>
+            <div>
+                <Label className="mb-1.5 block">Links</Label>
+                <div className="space-y-2">
+                    {linkFields.map((field, index) => (
+                        <div key={field.id} className="flex gap-2 items-start">
+                            <Input placeholder="Label" className="flex-1" {...register(`landing_page.links.${index}.label`)} />
+                            <Input placeholder="URL or path" className="flex-1" {...register(`landing_page.links.${index}.link`)} />
+                            <Button type="button" variant="ghost" size="icon" onClick={() => removeLink(index)} aria-label="Remove">
+                                <Trash2 className="size-4" />
+                            </Button>
+                        </div>
+                    ))}
+                    <Button type="button" variant="outline" size="sm" onClick={() => appendLink({ label: "", link: "" })}>
+                        <Plus className="size-3.5" />
+                        Add link
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// ─── Step 4: Scheduling & Display ───────────────────────────────────────────
 
 function StepScheduling({ register, watch, setValue }) {
+    const isActive = watch("is_active");
+
     return (
         <div className="space-y-5">
             <div className="grid grid-cols-2 gap-3">
                 <div>
                     <Label className="mb-1.5 block">Start date</Label>
-                    <Input type="datetime-local" {...register("start_date")} />
+                    <DateTimePicker
+                        value={watch("start_date") || null}
+                        onChange={(iso) => setValue("start_date", iso ?? "", { shouldValidate: true })}
+                        placeholder="No start date"
+                    />
                 </div>
                 <div>
                     <Label className="mb-1.5 block">End date</Label>
-                    <Input type="datetime-local" {...register("end_date")} />
+                    <DateTimePicker
+                        value={watch("end_date") || null}
+                        onChange={(iso) => setValue("end_date", iso ?? "", { shouldValidate: true })}
+                        placeholder="No end date"
+                    />
                 </div>
             </div>
             <Separator />
@@ -372,9 +429,9 @@ function StepScheduling({ register, watch, setValue }) {
                     <Input type="number" min={0} {...register("order")} />
                 </div>
                 <div className="flex items-center justify-between border rounded-md px-3 h-9">
-                    <Label className="text-sm">Active</Label>
+                    <Label className="text-sm">{isActive ? "Active" : "Draft"}</Label>
                     <Switch
-                        checked={watch("is_active")}
+                        checked={isActive}
                         onCheckedChange={(v) => setValue("is_active", v)}
                     />
                 </div>
@@ -383,7 +440,7 @@ function StepScheduling({ register, watch, setValue }) {
     );
 }
 
-// ─── Step: Review ───────────────────────────────────────────────────────────
+// ─── Step 5: Review ─────────────────────────────────────────────────────────
 
 function SummaryRow({ label, value }) {
     if (!value) return null;
@@ -398,6 +455,7 @@ function SummaryRow({ label, value }) {
 function StepReview({ data, selectedAsset, imageUrl }) {
     const placementMeta = PLACEMENT_MAP[data.placement];
     const ctas = (data.ctas ?? []).filter((c) => c.label || c.link);
+    const hasLandingPage = !data.redirect_link && (data.landing_page?.title || data.landing_page?.body);
 
     return (
         <div className="space-y-4">
@@ -407,16 +465,20 @@ function StepReview({ data, selectedAsset, imageUrl }) {
                     <span className="text-sm font-medium">Placement</span>
                     {placementMeta && <Badge variant="secondary" className="ml-auto capitalize">{placementMeta.format}</Badge>}
                 </div>
-                <SummaryRow label="Page"     value={placementMeta?.pageLabel} />
+                <SummaryRow label="Page" value={placementMeta?.pageLabel} />
-                <SummaryRow label="Position" value={placementMeta?.slotLabel} />
+                <SummaryRow label="Size" value={data.size} />
-                <SummaryRow label="Size"     value={data.size} />
             </div>
 
             <div className="border rounded-lg p-4 space-y-1">
                 <p className="text-sm font-medium mb-2">Content</p>
-                <SummaryRow label="Badge"       value={data.badge_label} />
+                <SummaryRow label="Type" value={data.content_mode === "content" ? "Content + image" : "Full image"} />
-                <SummaryRow label="Headline"    value={data.headline} />
+                {data.content_mode === "content" && (
-                <SummaryRow label="Description" value={data.description} />
+                    <>
+                        <SummaryRow label="Badge"       value={data.badge_label} />
+                        <SummaryRow label="Headline"    value={data.headline} />
+                        <SummaryRow label="Description" value={data.description} />
+                    </>
+                )}
             </div>
 
             <div className="border rounded-lg p-4 space-y-1">
@@ -441,12 +503,26 @@ function StepReview({ data, selectedAsset, imageUrl }) {
                 </div>
             )}
 
+            <div className="border rounded-lg p-4 space-y-1">
+                <p className="text-sm font-medium mb-2">Click-through</p>
+                {data.redirect_link ? (
+                    <SummaryRow label="Redirect link" value={data.redirect_link} />
+                ) : hasLandingPage ? (
+                    <>
+                        <SummaryRow label="Page title" value={data.landing_page?.title} />
+                        <SummaryRow label="Links" value={(data.landing_page?.links ?? []).filter((l) => l.label || l.link).length || null} />
+                    </>
+                ) : (
+                    <p className="text-sm text-muted-foreground">No redirect link or landing page set — this ad won't link anywhere when clicked.</p>
+                )}
+            </div>
+
             <div className="border rounded-lg p-4 space-y-1">
                 <p className="text-sm font-medium mb-2">Scheduling & display</p>
                 <SummaryRow label="Start date" value={data.start_date} />
                 <SummaryRow label="End date"   value={data.end_date} />
                 <SummaryRow label="Order"      value={data.order} />
-                <SummaryRow label="Active"     value={data.is_active ? "Yes" : "No"} />
+                <SummaryRow label="Status"     value={data.is_active ? "Active" : "Draft"} />
             </div>
         </div>
     );
@@ -462,7 +538,6 @@ export default function AddAdvertisement() {
     const [pickerOpen, setPickerOpen] = useState(false);
     const [selectedAsset, setSelectedAsset] = useState(null);
     const [imagePreviewUrl, setImagePreviewUrl] = useState(null);
-    const [selectedPage, setSelectedPage] = useState(null);
     const [step, setStep] = useState(0);
 
     const {
@@ -478,11 +553,14 @@ export default function AddAdvertisement() {
         resolver: zodResolver(schema),
         defaultValues: {
             placement: undefined,
+            content_mode: "image",
             badge_label: "",
             headline: "",
             description: "",
             image_asset_id: null,
             ctas: [],
+            redirect_link: "",
+            landing_page: { title: "", description: "", body: "", links: [] },
             start_date: "",
             end_date: "",
             order: 0,
@@ -492,23 +570,23 @@ export default function AddAdvertisement() {
     });
 
     const { fields: ctaFields, append: appendCta, remove: removeCta } = useFieldArray({ control, name: "ctas" });
+    const { fields: linkFields, append: appendLink, remove: removeLink } = useFieldArray({ control, name: "landing_page.links" });
 
-    // selectedPage/selectedAsset live outside the form and their setValue()
+    // selectedAsset lives outside the form and its setValue() call doesn't pass
-    // calls don't pass shouldDirty, so isDirty alone would miss them.
+    // shouldDirty, so isDirty alone would miss it.
     const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(
-        isDirty || !!selectedAsset || !!selectedPage
+        isDirty || !!selectedAsset
     );
 
     const placement = watch("placement");
     const description = watch("description");
+    const redirectLink = watch("redirect_link");
     const format = PLACEMENT_MAP[placement]?.format;
-    const showRichContent = RICH_CONTENT_TYPES.includes(format);
     const isBanner = format === "banner";
-    const positionOptions = AD_PAGES.find((p) => p.page === selectedPage)?.placements ?? [];
 
     const steps = useMemo(
-        () => ALL_STEPS.filter((s) => !s.richOnly || showRichContent),
+        () => ALL_STEPS.filter((s) => !s.skippable || !redirectLink?.trim()),
-        [showRichContent]
+        [redirectLink]
     );
     const stepIndex = Math.min(step, steps.length - 1);
     const current = steps[stepIndex];
@@ -523,8 +601,7 @@ export default function AddAdvertisement() {
     const handleNext = async () => {
         let fields = [];
         if (current.id === "placement") fields = ["placement"];
-        else if (current.id === "content") fields = showRichContent ? ["headline", "description", "badge_label"] : ["headline"];
+        else if (current.id === "content") fields = watch("content_mode") === "content" ? ["headline", "description", "badge_label", "ctas"] : [];
-        else if (current.id === "ctas") fields = ["ctas"];
 
         const valid = fields.length ? await trigger(fields) : true;
         if (valid) setStep((s) => Math.min(s + 1, steps.length - 1));
@@ -537,6 +614,8 @@ export default function AddAdvertisement() {
         const payload = {
             ...values,
             image_asset_id: values.image_asset_id || null,
+            redirect_link:  values.redirect_link || null,
+            landing_page:   values.redirect_link ? null : values.landing_page,
             start_date: values.start_date || null,
             end_date:   values.end_date   || null,
             size:       PLACEMENT_MAP[values.placement]?.format === "banner" ? (values.size || "md") : null,
@@ -557,7 +636,7 @@ export default function AddAdvertisement() {
                 <div className="w-full max-w-2xl pb-10 space-y-6">
                     <div>
                         <h1 className="text-2xl font-semibold tracking-tight mb-1">New advertisement</h1>
-                        <p className="text-sm text-muted-foreground">Create a banner, popup, or hero placement.</p>
+                        <p className="text-sm text-muted-foreground">Create a hero or banner placement.</p>
                     </div>
 
                     <Stepper steps={steps} stepIndex={stepIndex} />
@@ -570,11 +649,8 @@ export default function AddAdvertisement() {
 
                         {current.id === "placement" && (
                             <StepPlacement
-                                selectedPage={selectedPage}
-                                setSelectedPage={setSelectedPage}
                                 placement={placement}
                                 setValue={setValue}
-                                positionOptions={positionOptions}
                                 errors={errors}
                                 format={format}
                                 isBanner={isBanner}
@@ -585,25 +661,26 @@ export default function AddAdvertisement() {
                             <StepContent
                                 register={register}
                                 errors={errors}
-                                showRichContent={showRichContent}
+                                setValue={setValue}
+                                watch={watch}
                                 description={description}
                                 format={format}
-                            />
+                                selectedAsset={selectedAsset}
-                        )}
+                                imageUrl={imagePreviewUrl}
-                        {current.id === "image" && (
+                                setPickerOpen={setPickerOpen}
-                            <StepImage selectedAsset={selectedAsset} imageUrl={imagePreviewUrl} setPickerOpen={setPickerOpen} />
-                        )}
-                        {current.id === "ctas" && (
-                            <StepCtas
                                 ctaFields={ctaFields}
-                                register={register}
-                                errors={errors}
-                                watch={watch}
-                                setValue={setValue}
                                 appendCta={appendCta}
                                 removeCta={removeCta}
                             />
                         )}
+                        {current.id === "pageBuilder" && (
+                            <StepPageBuilder
+                                register={register}
+                                linkFields={linkFields}
+                                appendLink={appendLink}
+                                removeLink={removeLink}
+                            />
+                        )}
                         {current.id === "scheduling" && (
                             <StepScheduling register={register} watch={watch} setValue={setValue} />
                         )}

src/modules/admin/pages/advertisements/AdvertisementList.jsx

@@ -18,37 +18,40 @@ import {
 } from "@/components/ui/alert-dialog";
 
 import { ADVERTISEMENT_TYPES, ADVERTISEMENT_TYPE_MAP, ADVERTISEMENT_STATUSES, ADVERTISEMENT_STATUS_MAP } from "@/data/advertisement.data";
-import { PLACEMENTS, PLACEMENT_MAP } from "@/data/placement.data";
+import { PLACEMENT_MAP } from "@/data/placement.data";
+import { TablePagination } from "@/components/generic/Table/TablePagination";
+
+const PAGE_SIZE = 24;
 
 export default function AdvertisementList() {
     const navigate = useNavigate();
     const { advertisements, pagination, loading, fetchAdvertisements, archiveAdvertisement } = useAdvertisements();
 
     const [typeFilter, setTypeFilter] = useState("all");
-    const [placementFilter, setPlacementFilter] = useState("all");
     const [statusFilter, setStatusFilter] = useState("all");
     const [searchInput, setSearchInput] = useState("");
     const [search, setSearch] = useState("");
+    const [page, setPage] = useState(1);
 
-    // TODO(ads-3): Filters are not actually filtering — the "status" filter in
+    const buildFilters = () => {
-    // particular compares against the stored `status` column, but status is only
-    // recomputed on read (see deriveStatus() in
-    // controllers/admin/advertisements.controller.js) and never persisted back
-    // to the DB. An ad that lapsed to "expired" still has status="active" in
-    // the row, so filtering by status here misses/matches the wrong rows.
-    // Needs either persisting the derived status on write/read, or filtering
-    // server-side using the same derivation logic. Also verify type/placement
-    // filters actually round-trip once ads-1/ads-2 land.
-    useEffect(() => {
         const filters = [];
-        if (typeFilter !== "all")      filters.push({ field: "type", value: typeFilter });
+        if (typeFilter !== "all")   filters.push({ id: "type",     value: typeFilter });
-        if (placementFilter !== "all") filters.push({ field: "placement", value: placementFilter });
+        if (statusFilter !== "all") filters.push({ id: "status",   value: statusFilter });
-        if (statusFilter !== "all")    filters.push({ field: "status", value: statusFilter });
+        if (search.trim())         filters.push({ id: "headline", value: search.trim() });
-        if (search.trim())            filters.push({ field: "headline", op: "ilike", value: search.trim() });
+        return filters;
+    };
 
-        fetchAdvertisements({ page: 1, limit: 24, filters });
+    // Single source of truth for fetching — filter setters below always pair
+    // their state update with setPage(1) in the same handler so this only
+    // ever fires once per change (no separate "reset page" effect racing it).
+    useEffect(() => {
+        fetchAdvertisements({ page, limit: PAGE_SIZE, filters: buildFilters() });
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [typeFilter, placementFilter, statusFilter, search]);
+    }, [typeFilter, statusFilter, search, page]);
+
+    const handleTypeFilter = (v) => { setTypeFilter(v); setPage(1); };
+    const handleStatusFilter = (v) => { setStatusFilter(v); setPage(1); };
+    const runSearch = () => { setSearch(searchInput); setPage(1); };
 
     const items = [
         { label: "Home", icon: <House className="size-4" />, to: "/admin" },
@@ -77,7 +80,7 @@ export default function AdvertisementList() {
                     <div className="flex items-center justify-between flex-wrap gap-3">
                         <div>
                             <h1 className="text-2xl font-semibold tracking-tight">Advertisements</h1>
-                            <p className="text-sm text-muted-foreground">Manage public-facing banners, popups, and promotional placements</p>
+                            <p className="text-sm text-muted-foreground">Manage public-facing hero and banner placements</p>
                         </div>
                         <div className="flex items-center gap-2">
                             <Button variant="outline" onClick={() => navigate("/admin/advertisements/archived")}>
@@ -101,7 +104,7 @@ export default function AdvertisementList() {
 
                     {/* ── Filters ────────────────────────────────────────────────── */}
                     <div className="flex items-center gap-2 flex-wrap">
-                        <Select value={typeFilter} onValueChange={setTypeFilter}>
+                        <Select value={typeFilter} onValueChange={handleTypeFilter}>
                             <SelectTrigger className="w-[150px] bg-background">
                                 <SelectValue placeholder="All types" />
                             </SelectTrigger>
@@ -113,20 +116,7 @@ export default function AdvertisementList() {
                             </SelectContent>
                         </Select>
 
-                        {/* TODO(ads-2): Remove this "All placements" dropdown entirely. */}
+                        <Select value={statusFilter} onValueChange={handleStatusFilter}>
-                        <Select value={placementFilter} onValueChange={setPlacementFilter}>
-                            <SelectTrigger className="w-[220px] bg-background">
-                                <SelectValue placeholder="All placements" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="all">All placements</SelectItem>
-                                {PLACEMENTS.map((p) => (
-                                    <SelectItem key={p.key} value={p.key}>{p.pageLabel} — {p.slotLabel}</SelectItem>
-                                ))}
-                            </SelectContent>
-                        </Select>
-
-                        <Select value={statusFilter} onValueChange={setStatusFilter}>
                             <SelectTrigger className="w-[150px] bg-background">
                                 <SelectValue placeholder="All statuses" />
                             </SelectTrigger>
@@ -138,31 +128,23 @@ export default function AdvertisementList() {
                             </SelectContent>
                         </Select>
 
-                        {/* TODO(ads-5): Verify this already satisfies the spec — search only
-                            fires on button click / Enter (`search` state, not `searchInput`,
-                            drives the fetch effect above), typing alone does not refetch.
-                            Looks done already; double-check then mark complete. */}
                         <div className="flex items-center gap-2 flex-1 min-w-[160px]">
-                            <div className="relative flex-1">
+                            <div className="relative w-64">
                                 <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
                                 <Input
                                     placeholder="Search advertisements..."
                                     className="pl-8 bg-background"
                                     value={searchInput}
                                     onChange={(e) => setSearchInput(e.target.value)}
-                                    onKeyDown={(e) => { if (e.key === "Enter") setSearch(searchInput); }}
+                                    onKeyDown={(e) => { if (e.key === "Enter") runSearch(); }}
                                 />
                             </div>
-                            <Button variant="outline" size="icon" className="shrink-0 bg-background" onClick={() => setSearch(searchInput)} aria-label="Search">
+                            <Button variant="outline" size="icon" className="shrink-0 bg-background" onClick={runSearch} aria-label="Search">
                                 <Search className="size-4" />
                             </Button>
                         </div>
                     </div>
 
-                    {/* TODO(ads-8): Add pagination controls for this grid — currently
-                        always fetches page 1 / limit 24 with no way to reach further
-                        pages (see `pagination` from useAdvertisements, already returned
-                        by the API but unused here). */}
                     {/* ── Grid ───────────────────────────────────────────────────── */}
                     {loading ? (
                         <div className="flex items-center justify-center py-20">
@@ -171,17 +153,28 @@ export default function AdvertisementList() {
                     ) : advertisements.length === 0 ? (
                         <EmptyState onCreate={() => navigate("/admin/advertisements/add")} />
                     ) : (
-                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                        <>
-                            {advertisements.map((ad) => (
+                            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                                <AdvertisementCard
+                                {advertisements.map((ad) => (
-                                    key={ad.advertisement_id}
+                                    <AdvertisementCard
-                                    ad={ad}
+                                        key={ad.advertisement_id}
-                                    onView={() => navigate(`/admin/advertisements/${ad.advertisement_id}/view`)}
+                                        ad={ad}
-                                    onEdit={() => navigate(`/admin/advertisements/${ad.advertisement_id}/edit`)}
+                                        onView={() => navigate(`/admin/advertisements/${ad.advertisement_id}/view`)}
-                                    onArchive={() => handleArchive(ad.advertisement_id)}
+                                        onEdit={() => navigate(`/admin/advertisements/${ad.advertisement_id}/edit`)}
+                                        onArchive={() => handleArchive(ad.advertisement_id)}
+                                    />
+                                ))}
+                            </div>
+
+                            <div className="bg-background rounded-lg border">
+                                <TablePagination
+                                    pagination={pagination}
+                                    onPageChange={setPage}
+                                    rowCount={advertisements.length}
+                                    recordLabel="advertisement"
                                 />
-                            ))}
+                            </div>
-                        </div>
+                        </>
                     )}
                 </div>
             </div>
@@ -298,7 +291,7 @@ function EmptyState({ onCreate }) {
             <Megaphone className="size-8 text-muted-foreground" />
             <div>
                 <p className="font-medium">No advertisements yet</p>
-                <p className="text-sm text-muted-foreground">Create your first banner, popup, or hero placement.</p>
+                <p className="text-sm text-muted-foreground">Create your first hero or banner placement.</p>
             </div>
             <Button onClick={onCreate}>
                 <Plus className="size-4" />

src/modules/admin/pages/advertisements/EditAdvertisement.jsx

@@ -11,6 +11,7 @@ import { useAdvertisements } from "@/contexts/AdminAdvertisementContext";
 import { useAuth } from "@/contexts/AuthContext";
 import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
 import { resolveAssetSrc } from "@/utils/media.util";
+import { cn } from "@/lib/utils";
 import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -18,16 +19,19 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Spinner } from "@/components/ui/spinner";
 import { Switch } from "@/components/ui/switch";
+import { Separator } from "@/components/ui/separator";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { DateTimePicker } from "@/components/ui/date-time-picker";
 import { AssetPickerSheet } from "@/components/generic/AssetPickerSheet";
 
-import { RICH_CONTENT_TYPES, MAX_CTAS } from "@/data/advertisement.data";
+import { MAX_CTAS, CONTENT_MODES } from "@/data/advertisement.data";
-import { AD_PAGES, PLACEMENT_MAP } from "@/data/placement.data";
+import { PLACEMENTS, PLACEMENT_MAP } from "@/data/placement.data";
 
 // ─── Schema ─────────────────────────────────────────────────────────────────
 
 const schema = z.object({
     placement:     z.string().min(1, "Placement is required."),
+    content_mode:  z.enum(["image", "content"]).default("image"),
     badge_label:   z.string().optional(),
     headline:      z.string().optional(),
     description:   z.string().optional(),
@@ -38,6 +42,16 @@ const schema = z.object({
         link:    z.string().min(1, "Link is required."),
         variant: z.enum(["default", "outline"]).default("default"),
     })).max(MAX_CTAS, `A maximum of ${MAX_CTAS} buttons is allowed.`).default([]),
+    redirect_link: z.string().optional(),
+    landing_page: z.object({
+        title:       z.string().optional(),
+        description: z.string().optional(),
+        body:        z.string().optional(),
+        links:       z.array(z.object({
+            label: z.string().optional(),
+            link:  z.string().optional(),
+        })).default([]),
+    }).default({}),
     start_date: z.string().optional(),
     end_date:   z.string().optional(),
     order:      z.coerce.number().min(0).default(0),
@@ -78,14 +92,6 @@ function SectionCard({ title, description, children }) {
     );
 }
 
-// Convert ISO datetime to value usable by <input type="datetime-local">
-function toLocalInputValue(iso) {
-    if (!iso) return "";
-    const d = new Date(iso);
-    const pad = (n) => String(n).padStart(2, "0");
-    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
-}
-
 const BANNER_SIZES = [
     { value: "sm", label: "Small" },
     { value: "md", label: "Medium" },
@@ -109,13 +115,9 @@ export default function EditAdvertisement() {
     const [pickerOpen, setPickerOpen] = useState(false);
     const [selectedAsset, setSelectedAsset] = useState(null);
     const [imagePreviewUrl, setImagePreviewUrl] = useState(null);
-    const [selectedPage, setSelectedPage] = useState(null);
     // Gates the form's first paint until the fetched advertisement has been
-    // applied via reset() + setSelectedPage(). Without this, the Page/Position
+    // applied via reset(). Without this, fields briefly mount with their empty
-    // selects briefly mount with their empty defaultValues (no page selected,
+    // defaultValues before the fetch resolves.
-    // no position options yet) before the fetch resolves — that first paint is
-    // enough for the position <Select> to lose track of the eventual value,
-    // leaving it visually unselected even after reset() runs.
     const [ready, setReady] = useState(false);
 
     const {
@@ -130,11 +132,14 @@ export default function EditAdvertisement() {
         resolver: zodResolver(schema),
         defaultValues: {
             placement: undefined,
+            content_mode: "image",
             badge_label: "",
             headline: "",
             description: "",
             image_asset_id: null,
             ctas: [],
+            redirect_link: "",
+            landing_page: { title: "", description: "", body: "", links: [] },
             start_date: "",
             end_date: "",
             order: 0,
@@ -144,15 +149,16 @@ export default function EditAdvertisement() {
     });
 
     const { fields: ctaFields, append: appendCta, remove: removeCta } = useFieldArray({ control, name: "ctas" });
+    const { fields: linkFields, append: appendLink, remove: removeLink } = useFieldArray({ control, name: "landing_page.links" });
 
     const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty);
 
     const placement = watch("placement");
     const description = watch("description");
+    const contentMode = watch("content_mode");
+    const redirectLink = watch("redirect_link");
     const format = PLACEMENT_MAP[placement]?.format;
-    const showRichContent = RICH_CONTENT_TYPES.includes(format);
     const isBanner = format === "banner";
-    const positionOptions = AD_PAGES.find((p) => p.page === selectedPage)?.placements ?? [];
 
     const breadcrumbItems = [
         { label: "Home", icon: <House className="size-4" />, to: "/admin" },
@@ -174,10 +180,10 @@ export default function EditAdvertisement() {
                 // — no separate token round-trip needed.
                 setImagePreviewUrl(resolveAssetSrc(ad.image));
             }
-            setSelectedPage(PLACEMENT_MAP[ad.placement]?.page ?? null);
 
             reset({
                 placement:      ad.placement ?? undefined,
+                content_mode:   ad.content_mode ?? "image",
                 badge_label:    ad.badge_label ?? "",
                 headline:       ad.headline ?? "",
                 description:    ad.description ?? "",
@@ -187,8 +193,15 @@ export default function EditAdvertisement() {
                     link:    c.link ?? "",
                     variant: c.variant ?? (i === 0 ? "default" : "outline"),
                 })),
-                start_date:     toLocalInputValue(ad.start_date),
+                redirect_link: ad.redirect_link ?? "",
-                end_date:       toLocalInputValue(ad.end_date),
+                landing_page: {
+                    title:       ad.landing_page?.title ?? "",
+                    description: ad.landing_page?.description ?? "",
+                    body:        ad.landing_page?.body ?? "",
+                    links:       (ad.landing_page?.links ?? []).map((l) => ({ label: l.label ?? "", link: l.link ?? "" })),
+                },
+                start_date:     ad.start_date ?? "",
+                end_date:       ad.end_date ?? "",
                 order:          ad.order ?? 0,
                 is_active:      ad.is_active ?? true,
                 size:           ad.size ?? null,
@@ -205,6 +218,8 @@ export default function EditAdvertisement() {
         const payload = {
             ...values,
             image_asset_id: values.image_asset_id || null,
+            redirect_link:  values.redirect_link || null,
+            landing_page:   values.redirect_link ? null : values.landing_page,
             start_date: values.start_date || null,
             end_date:   values.end_date   || null,
             size:       PLACEMENT_MAP[values.placement]?.format === "banner" ? (values.size || "md") : null,
@@ -234,49 +249,27 @@ export default function EditAdvertisement() {
 
                 <div className="w-full max-w-2xl pb-10">
                     <h1 className="text-2xl font-semibold tracking-tight mb-1">Edit advertisement</h1>
-                    <p className="text-sm text-muted-foreground mb-6">Update this banner, popup, or hero placement.</p>
+                    <p className="text-sm text-muted-foreground mb-6">Update this hero or banner placement.</p>
 
                     <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
 
                         <SectionCard title="Placement" description="Where this advertisement will appear.">
-                            <div className="grid grid-cols-2 gap-3">
+                            <div>
-                                <div>
+                                <Label className="mb-1.5 block">Placement</Label>
-                                    <Label className="mb-1.5 block">Page</Label>
+                                <Select
-                                    <Select
+                                    value={placement || undefined}
-                                        value={selectedPage ?? undefined}
+                                    onValueChange={(v) => setValue("placement", v, { shouldValidate: true, shouldDirty: true })}
-                                        onValueChange={(v) => {
+                                >
-                                            setSelectedPage(v);
+                                    <SelectTrigger>
-                                            setValue("placement", "", { shouldValidate: false, shouldDirty: true });
+                                        <SelectValue placeholder="Select a placement" />
-                                        }}
+                                    </SelectTrigger>
-                                    >
+                                    <SelectContent>
-                                        <SelectTrigger>
+                                        {PLACEMENTS.map((p) => (
-                                            <SelectValue placeholder="Select a page" />
+                                            <SelectItem key={p.key} value={p.key}>{p.pageLabel}</SelectItem>
-                                        </SelectTrigger>
+                                        ))}
-                                        <SelectContent>
+                                    </SelectContent>
-                                            {AD_PAGES.map((p) => (
+                                </Select>
-                                                <SelectItem key={p.page} value={p.page}>{p.pageLabel}</SelectItem>
+                                <FieldError message={errors.placement?.message} />
-                                            ))}
-                                        </SelectContent>
-                                    </Select>
-                                </div>
-                                <div>
-                                    <Label className="mb-1.5 block">Position</Label>
-                                    <Select
-                                        value={placement || undefined}
-                                        onValueChange={(v) => setValue("placement", v, { shouldValidate: true, shouldDirty: true })}
-                                        disabled={!selectedPage}
-                                    >
-                                        <SelectTrigger>
-                                            <SelectValue placeholder={selectedPage ? "Select a position" : "Select a page first"} />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                            {positionOptions.map((p) => (
-                                                <SelectItem key={p.key} value={p.key}>{p.slotLabel}</SelectItem>
-                                            ))}
-                                        </SelectContent>
-                                    </Select>
-                                    <FieldError message={errors.placement?.message} />
-                                </div>
                             </div>
 
                             {format && (
@@ -305,39 +298,51 @@ export default function EditAdvertisement() {
                             )}
                         </SectionCard>
 
-                        {showRichContent && (
+                        <SectionCard title="Content" description="Full image, or content with badge, headline, description, and CTAs.">
-                            <SectionCard title="Content" description="Headline, description, and badge text shown on the hero placement.">
+                            <div className="grid grid-cols-2 gap-3">
-                                <div>
+                                {CONTENT_MODES.map((m) => (
-                                    <Label className="mb-1.5 block">Badge label</Label>
+                                    <button
-                                    <Input placeholder="e.g. Advertisement" {...register("badge_label")} />
+                                        key={m.value}
-                                </div>
+                                        type="button"
-                                <div>
+                                        onClick={() => setValue("content_mode", m.value, { shouldValidate: true, shouldDirty: true })}
-                                    <Label className="mb-1.5 block">Headline</Label>
+                                        className={cn(
-                                    <Input placeholder="e.g. Discover the World Top Designers" {...register("headline")} />
+                                            "rounded-lg border p-3 text-left transition-colors",
-                                </div>
+                                            contentMode === m.value ? "border-primary bg-primary/5" : "hover:bg-muted/50"
-                                <div>
+                                        )}
-                                    <Label className="mb-1.5 block">Description</Label>
+                                    >
-                                    <Textarea rows={3} placeholder="Supporting text under the headline" {...register("description")} />
+                                        <p className="text-sm font-medium">{m.label}</p>
-                                    {format === "hero" && (
+                                        <p className="text-xs text-muted-foreground mt-0.5">
-                                        <div className="flex justify-between items-start mt-1">
+                                            {m.value === "image" ? "Just an image, no text overlay." : "Badge, headline, description, and CTAs."}
-                                            <FieldError message={errors.description?.message} />
+                                        </p>
-                                            <span className={`text-xs ml-auto ${(description?.length ?? 0) > 200 ? "text-destructive" : "text-muted-foreground"}`}>
+                                    </button>
-                                                {description?.length ?? 0}/200
+                                ))}
-                                            </span>
+                            </div>
-                                        </div>
-                                    )}
-                                </div>
-                            </SectionCard>
-                        )}
 
-                        {!showRichContent && (
+                            {contentMode === "content" && (
-                            <SectionCard title="Content" description="Optional headline for this placement.">
+                                <>
-                                <div>
+                                    <div>
-                                    <Label className="mb-1.5 block">Headline (optional)</Label>
+                                        <Label className="mb-1.5 block">Badge label</Label>
-                                    <Input placeholder="Internal label for this ad" {...register("headline")} />
+                                        <Input placeholder="e.g. Advertisement" {...register("badge_label")} />
-                                </div>
+                                    </div>
-                            </SectionCard>
+                                    <div>
-                        )}
+                                        <Label className="mb-1.5 block">Headline</Label>
+                                        <Input placeholder="e.g. Discover the World Top Designers" {...register("headline")} />
+                                    </div>
+                                    <div>
+                                        <Label className="mb-1.5 block">Description</Label>
+                                        <Textarea rows={3} placeholder="Supporting text under the headline" {...register("description")} />
+                                        {format === "hero" && (
+                                            <div className="flex justify-between items-start mt-1">
+                                                <FieldError message={errors.description?.message} />
+                                                <span className={`text-xs ml-auto ${(description?.length ?? 0) > 200 ? "text-destructive" : "text-muted-foreground"}`}>
+                                                    {description?.length ?? 0}/200
+                                                </span>
+                                            </div>
+                                        )}
+                                    </div>
+                                </>
+                            )}
+                        </SectionCard>
 
                         <SectionCard title="Image" description="Choose an existing asset from Asset Management.">
                             {selectedAsset ? (
@@ -366,7 +371,7 @@ export default function EditAdvertisement() {
                             )}
                         </SectionCard>
 
-                        {showRichContent && (
+                        {contentMode === "content" && (
                             <SectionCard
                                 title="Calls to action"
                                 description={`Up to ${MAX_CTAS} buttons shown on the placement. Each button can be styled as Primary or Outline.`}
@@ -417,27 +422,81 @@ export default function EditAdvertisement() {
                             </SectionCard>
                         )}
 
+                        <SectionCard title="Click-through" description="Where clicking the ad itself goes to.">
+                            <div>
+                                <Label className="mb-1.5 block">Redirect link</Label>
+                                <Input placeholder="e.g. /courses or https://example.com" {...register("redirect_link")} />
+                                <p className="text-xs text-muted-foreground mt-1.5">
+                                    Leave blank to use the internal landing page below instead.
+                                </p>
+                            </div>
+
+                            {!redirectLink?.trim() && (
+                                <>
+                                    <Separator />
+                                    <div>
+                                        <Label className="mb-1.5 block">Page title</Label>
+                                        <Input placeholder="e.g. Why upgrade to Pro" {...register("landing_page.title")} />
+                                    </div>
+                                    <div>
+                                        <Label className="mb-1.5 block">Page description</Label>
+                                        <Textarea rows={2} placeholder="Short summary shown under the title" {...register("landing_page.description")} />
+                                    </div>
+                                    <div>
+                                        <Label className="mb-1.5 block">Body</Label>
+                                        <Textarea rows={6} placeholder="Main page content" {...register("landing_page.body")} />
+                                    </div>
+                                    <div>
+                                        <Label className="mb-1.5 block">Links</Label>
+                                        <div className="space-y-2">
+                                            {linkFields.map((field, index) => (
+                                                <div key={field.id} className="flex gap-2 items-start">
+                                                    <Input placeholder="Label" className="flex-1" {...register(`landing_page.links.${index}.label`)} />
+                                                    <Input placeholder="URL or path" className="flex-1" {...register(`landing_page.links.${index}.link`)} />
+                                                    <Button type="button" variant="ghost" size="icon" onClick={() => removeLink(index)} aria-label="Remove">
+                                                        <Trash2 className="size-4" />
+                                                    </Button>
+                                                </div>
+                                            ))}
+                                            <Button type="button" variant="outline" size="sm" onClick={() => appendLink({ label: "", link: "" })}>
+                                                <Plus className="size-3.5" />
+                                                Add link
+                                            </Button>
+                                        </div>
+                                    </div>
+                                </>
+                            )}
+                        </SectionCard>
+
                         <SectionCard title="Scheduling" description="Optional start and end dates for this placement.">
                             <div className="grid grid-cols-2 gap-3">
                                 <div>
                                     <Label className="mb-1.5 block">Start date</Label>
-                                    <Input type="datetime-local" {...register("start_date")} />
+                                    <DateTimePicker
+                                        value={watch("start_date") || null}
+                                        onChange={(iso) => setValue("start_date", iso ?? "", { shouldDirty: true })}
+                                        placeholder="No start date"
+                                    />
                                 </div>
                                 <div>
                                     <Label className="mb-1.5 block">End date</Label>
-                                    <Input type="datetime-local" {...register("end_date")} />
+                                    <DateTimePicker
+                                        value={watch("end_date") || null}
+                                        onChange={(iso) => setValue("end_date", iso ?? "", { shouldDirty: true })}
+                                        placeholder="No end date"
+                                    />
                                 </div>
                             </div>
                         </SectionCard>
 
-                        <SectionCard title="Display" description="Manual ordering and on/off switch.">
+                        <SectionCard title="Display" description="Manual ordering and draft/active switch.">
                             <div className="grid grid-cols-2 gap-3">
                                 <div>
                                     <Label className="mb-1.5 block">Order</Label>
                                     <Input type="number" min={0} {...register("order")} />
                                 </div>
                                 <div className="flex items-center justify-between border rounded-md px-3 h-9">
-                                    <Label className="text-sm">Active</Label>
+                                    <Label className="text-sm">{watch("is_active") ? "Active" : "Draft"}</Label>
                                     <Switch
                                         checked={watch("is_active")}
                                         onCheckedChange={(v) => setValue("is_active", v, { shouldDirty: true })}

src/modules/admin/pages/assets/EditAsset.jsx

@@ -8,6 +8,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { ArrowLeft, UploadCloud, X, FileVideo, FileText, Image, RefreshCw } from "lucide-react";
 
 import { useAssets } from "@/contexts/AdminAssetsContext";
+import { useAssetPreviewSrc } from "@/hooks/useAssetPreviewSrc";
 import { useAuth } from "@/contexts/AuthContext";
 import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
 import { Button } from "@/components/ui/button";
@@ -55,7 +56,6 @@ function formatBytes(bytes) {
 // ─── Thumbnail Drop Zone ──────────────────────────────────────────────────────
 
 function ThumbnailDropZone({ currentUrl, newFile, onFile, onClear, error }) {
-    console.log(currentUrl)
     const inputRef = useRef(null);
 
     const preview = newFile
@@ -178,6 +178,11 @@ export default function EditAsset() {
     const isVideo            = asset?.file_type === "video";
     const hasThumbnailChange = !!thumbnailRef.current;
 
+    // asset.file_url is redacted to null for S3-stored assets (see
+    // redactS3Url in assets.controller.js) — resolve the real preview src
+    // the same way ViewImageAsset.jsx does instead of reading it raw.
+    const { src: previewSrc } = useAssetPreviewSrc(asset, { scope: "admin" });
+
     const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty || hasThumbnailChange);
 
     const onSubmit = async (data) => {
@@ -265,7 +270,7 @@ export default function EditAsset() {
                             </Label>
                             <ThumbnailDropZone
                                 key={thumbKey}
-                                currentUrl={asset.file_type === "video" ? asset.thumbnail_url : asset.file_url}
+                                currentUrl={asset.file_type === "video" ? asset.thumbnail_url : previewSrc}
                                 newFile={thumbnailRef.current}
                                 onFile={(f) => {
                                     thumbnailRef.current = f;

src/modules/admin/pages/notifications/AddNotificationBroadcast.jsx

@@ -1,13 +1,13 @@
 // modules/admin/pages/notifications/AddNotificationBroadcast.jsx
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { House } from "lucide-react";
+import { format } from "date-fns";
+import { House, Check, ArrowLeft, ArrowRight } from "lucide-react";
 
-import api from "@/utils/api.util";
 import { useNotificationBroadcasts } from "@/contexts/AdminNotificationBroadcastContext";
 import { useAuth } from "@/contexts/AuthContext";
 import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
@@ -18,10 +18,13 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Spinner } from "@/components/ui/spinner";
+import { Badge } from "@/components/ui/badge";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { DateTimePicker } from "@/components/ui/date-time-picker";
 
 import { TARGET_TYPE_OPTIONS, TARGET_TYPE_MAP } from "@/data/notificationBroadcast.data";
 import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+import { TIER_COLOR_OPTIONS, getTierColor, shadeColor, getContrastText } from "@/utils/tierColors";
 
 // ─── Schema ─────────────────────────────────────────────────────────────────
 
@@ -34,6 +37,10 @@ const schema = z.object({
     show_in_notifications: z.boolean().optional(),
     link_mode: z.enum(["info", "link"]).optional(),
     link_url:  z.string().trim().optional(),
+    link_label: z.string().trim().optional(),
+    color:      z.string().optional(),
+    start_date: z.string().optional(),
+    end_date:   z.string().optional(),
 }).superRefine((data, ctx) => {
     if (TARGET_TYPE_MAP[data.target_type]?.needsTarget && !data.target_id) {
         ctx.addIssue({
@@ -58,8 +65,25 @@ const schema = z.object({
             path: ["link_url"],
         });
     }
+
+    if (data.start_date && data.end_date && new Date(data.start_date) > new Date(data.end_date)) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: "End date must be after the start date.",
+            path: ["end_date"],
+        });
+    }
 });
 
+// ─── Steps config ───────────────────────────────────────────────────────────
+
+const STEPS = [
+    { label: "Content", description: "Title & message" },
+    { label: "Target",  description: "Who receives it" },
+    { label: "Display", description: "Where it shows & schedule" },
+    { label: "Review",  description: "Confirm & save" },
+];
+
 // ─── Helpers ────────────────────────────────────────────────────────────────
 
 function FieldError({ message }) {
@@ -81,18 +105,72 @@ function SectionCard({ title, description, children }) {
     );
 }
 
+function StepIndicator({ steps, current, onStepClick }) {
+    return (
+        <div className="flex items-start w-full mb-8">
+            {steps.flatMap((step, i) => {
+                const items = [
+                    <button
+                        key={`step-${i}`}
+                        type="button"
+                        onClick={() => onStepClick(i)}
+                        className="flex flex-col items-center gap-1.5 shrink-0 group"
+                    >
+                        <div
+                            className={[
+                                "w-8 h-8 rounded-full border-2 flex items-center justify-center text-sm font-semibold transition-all group-hover:opacity-80",
+                                i < current
+                                    ? "bg-primary border-primary text-primary-foreground"
+                                    : i === current
+                                    ? "border-primary text-primary"
+                                    : "border-border text-muted-foreground",
+                            ].join(" ")}
+                        >
+                            {i < current ? <Check className="h-4 w-4" /> : i + 1}
+                        </div>
+                        <p
+                            className={[
+                                "text-[11px] font-medium text-center leading-tight whitespace-nowrap",
+                                i === current ? "text-foreground" : "text-muted-foreground",
+                            ].join(" ")}
+                        >
+                            {step.label}
+                        </p>
+                    </button>,
+                ];
+                if (i < steps.length - 1) {
+                    items.push(
+                        <div
+                            key={`line-${i}`}
+                            className={[
+                                "flex-1 h-px mt-4 mx-2 shrink",
+                                i < current ? "bg-primary" : "bg-border",
+                            ].join(" ")}
+                        />
+                    );
+                }
+                return items;
+            })}
+        </div>
+    );
+}
+
 // ─── Page ───────────────────────────────────────────────────────────────────
 
 export default function AddNotificationBroadcast() {
     const navigate = useNavigate();
-    const { createBroadcast, loading } = useNotificationBroadcasts();
+    const { createBroadcast, sendBroadcast, loading } = useNotificationBroadcasts();
     const { user } = useAuth();
 
+    const [currentStep, setCurrentStep] = useState(0);
+    const [targetLabel, setTargetLabel] = useState(null);
+
     const {
         register,
         handleSubmit,
         watch,
         setValue,
+        trigger,
         formState: { errors, isDirty },
     } = useForm({
         resolver: zodResolver(schema),
@@ -105,31 +183,24 @@ export default function AddNotificationBroadcast() {
             show_in_notifications: true,
             link_mode: "info",
             link_url: "",
+            link_label: "",
+            color: "indigo",
+            start_date: "",
+            end_date: "",
         },
     });
 
     const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty);
 
-    const [templates, setTemplates] = useState([]);
-    useEffect(() => {
-        api.get("/admin/announcement-templates")
-            .then(({ data }) => setTemplates((data.data ?? []).filter((t) => !t.is_system)))
-            .catch(() => {});
-    }, []);
-
-    const applyTemplate = (id) => {
-        const tpl = templates.find((t) => String(t.notification_template_id) === id);
-        if (!tpl) return;
-        setValue("title", tpl.title ?? "", { shouldValidate: true, shouldDirty: true });
-        setValue("message", tpl.message ?? "", { shouldValidate: true, shouldDirty: true });
-    };
-
     const targetType = watch("target_type");
     const targetId   = watch("target_id");
     const needsTarget = TARGET_TYPE_MAP[targetType]?.needsTarget;
     const showInSticky = watch("show_in_sticky");
     const showInNotifications = watch("show_in_notifications");
     const linkMode = watch("link_mode");
+    const color = watch("color");
+    const startDate = watch("start_date");
+    const endDate = watch("end_date");
 
     const breadcrumbItems = [
         { label: "Home", icon: <House className="size-4" />, to: "/admin" },
@@ -137,7 +208,25 @@ export default function AddNotificationBroadcast() {
         { label: "New" },
     ];
 
-    const onSubmit = async (values) => {
+    // Guards the step indicator: jumping ahead must not bypass required
+    // fields from earlier steps.
+    const goToStep = async (target) => {
+        if (target > 0) {
+            const valid = await trigger(["title", "message"]);
+            if (!valid) { setCurrentStep(0); return; }
+        }
+        if (target > 1) {
+            const valid = await trigger(["target_type", "target_id"]);
+            if (!valid) { setCurrentStep(1); return; }
+        }
+        if (target > 2) {
+            const valid = await trigger(["show_in_sticky", "show_in_notifications", "link_url", "end_date"]);
+            if (!valid) { setCurrentStep(2); return; }
+        }
+        setCurrentStep(target);
+    };
+
+    const saveBroadcast = async (values, { publish = false } = {}) => {
         const { link_mode, ...rest } = values;
         const payload = {
             ...rest,
@@ -145,11 +234,24 @@ export default function AddNotificationBroadcast() {
             show_in_sticky: values.show_in_sticky ?? false,
             show_in_notifications: values.show_in_notifications ?? true,
             link_url: (values.show_in_sticky && link_mode === "link") ? values.link_url.trim() : null,
+            link_label: (values.show_in_sticky && link_mode === "link") ? (values.link_label?.trim() || null) : null,
+            color: values.show_in_sticky ? (values.color || "indigo") : "indigo",
+            start_date: values.start_date || null,
+            end_date: values.end_date || null,
             createdBy: user?.user_id ?? null,
         };
 
         const res = await createBroadcast(payload);
-        if (res) { bypassOnce(); navigate("/admin/announcements"); }
+        const created = res?.data?.data ?? null;
+        if (!created) return;
+
+        if (publish) {
+            const sent = await sendBroadcast(created.broadcast_id);
+            if (!sent) return;
+        }
+
+        bypassOnce();
+        navigate("/admin/announcements");
     };
 
     return (
@@ -163,147 +265,328 @@ export default function AddNotificationBroadcast() {
                     <h1 className="text-2xl font-semibold tracking-tight mb-1">New announcement</h1>
                     <p className="text-sm text-muted-foreground mb-6">Compose an announcement. It's saved as a draft until you send it.</p>
 
-                    <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+                    <StepIndicator steps={STEPS} current={currentStep} onStepClick={goToStep} />
 
-                        <SectionCard title="Content" description="What admins and/or users will see.">
+                    <form onSubmit={(e) => e.preventDefault()} className="space-y-5">
-                            {templates.length > 0 && (
+
+                        {/* ── Step 0: Content ── */}
+                        {currentStep === 0 && (
+                            <SectionCard title="Content" description="What admins and/or users will see.">
                                 <div>
-                                    <Label className="mb-1.5 block">Load from template</Label>
+                                    <Label className="mb-1.5 block">Title</Label>
-                                    <Select onValueChange={applyTemplate}>
+                                    <Input placeholder="e.g. Scheduled maintenance tonight" {...register("title")} />
+                                    <FieldError message={errors.title?.message} />
+                                </div>
+                                <div>
+                                    <Label className="mb-1.5 block">Message</Label>
+                                    <Textarea rows={4} placeholder="Full announcement text" {...register("message")} />
+                                    <FieldError message={errors.message?.message} />
+                                </div>
+                            </SectionCard>
+                        )}
+
+                        {/* ── Step 1: Target ── */}
+                        {currentStep === 1 && (
+                            <SectionCard title="Target" description="Who receives this announcement when it's sent.">
+                                <div>
+                                    <Select
+                                        value={targetType}
+                                        onValueChange={(v) => {
+                                            setValue("target_type", v, { shouldValidate: true, shouldDirty: true });
+                                            setValue("target_id", null, { shouldDirty: true });
+                                            setTargetLabel(null);
+                                        }}
+                                    >
                                         <SelectTrigger>
-                                            <SelectValue placeholder="Optional — start from a saved preset" />
+                                            <SelectValue placeholder="Select a target" />
                                         </SelectTrigger>
                                         <SelectContent>
-                                            {templates.map((t) => (
+                                            {TARGET_TYPE_OPTIONS.map((t) => (
-                                                <SelectItem key={t.notification_template_id} value={String(t.notification_template_id)}>{t.label}</SelectItem>
+                                                <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
                                             ))}
                                         </SelectContent>
                                     </Select>
-                                    <p className="text-xs text-muted-foreground mt-1.5">Fills in the title and message below — you can still edit them after.</p>
+                                    <FieldError message={errors.target_type?.message} />
-                                </div>
+                                    {targetType && (
-                            )}
-                            <div>
-                                <Label className="mb-1.5 block">Title</Label>
-                                <Input placeholder="e.g. Scheduled maintenance tonight" {...register("title")} />
-                                <FieldError message={errors.title?.message} />
-                            </div>
-                            <div>
-                                <Label className="mb-1.5 block">Message</Label>
-                                <Textarea rows={4} placeholder="Full announcement text" {...register("message")} />
-                                <FieldError message={errors.message?.message} />
-                            </div>
-                        </SectionCard>
-
-                        <SectionCard title="Target" description="Who receives this announcement when it's sent.">
-                            <div>
-                                <Select
-                                    value={targetType}
-                                    onValueChange={(v) => {
-                                        setValue("target_type", v, { shouldValidate: true, shouldDirty: true });
-                                        setValue("target_id", null, { shouldDirty: true });
-                                    }}
-                                >
-                                    <SelectTrigger>
-                                        <SelectValue placeholder="Select a target" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        {TARGET_TYPE_OPTIONS.map((t) => (
-                                            <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
-                                        ))}
-                                    </SelectContent>
-                                </Select>
-                                <FieldError message={errors.target_type?.message} />
-                                {targetType && (
-                                    <p className="text-xs text-muted-foreground mt-1.5">
-                                        {TARGET_TYPE_MAP[targetType]?.description}
-                                    </p>
-                                )}
-                            </div>
-
-                            {needsTarget && (
-                                <div>
-                                    <BroadcastTargetPicker
-                                        targetType={targetType}
-                                        value={targetId}
-                                        onChange={(id) => setValue("target_id", id, { shouldValidate: true, shouldDirty: true })}
-                                    />
-                                    <FieldError message={errors.target_id?.message} />
-                                </div>
-                            )}
-                        </SectionCard>
-
-                        <SectionCard title="Display" description="Where clients/admins can see this announcement.">
-                            <div className="space-y-3">
-                                <div className="flex items-center gap-3">
-                                    <Checkbox
-                                        id="show_in_sticky"
-                                        checked={showInSticky === true}
-                                        onCheckedChange={(v) => setValue("show_in_sticky", v === true, { shouldValidate: true, shouldDirty: true })}
-                                    />
-                                    <Label htmlFor="show_in_sticky" className="cursor-pointer">
-                                        Show in Sticky Announcements
-                                    </Label>
-                                </div>
-
-                                <div className="flex items-center gap-3">
-                                    <Checkbox
-                                        id="show_in_notifications"
-                                        checked={showInNotifications === true}
-                                        onCheckedChange={(v) => setValue("show_in_notifications", v === true, { shouldValidate: true, shouldDirty: true })}
-                                    />
-                                    <Label htmlFor="show_in_notifications" className="cursor-pointer">
-                                        Show in Notifications
-                                    </Label>
-                                </div>
-                            </div>
-                        </SectionCard>
-
-                        {showInSticky && (
-                            <SectionCard title="On Open" description="What happens when someone opens this announcement from the sticky banner.">
-                                <div className="flex gap-2">
-                                    <Button
-                                        type="button"
-                                        variant={linkMode !== "link" ? "secondary" : "outline"}
-                                        className="flex-1"
-                                        onClick={() => setValue("link_mode", "info", { shouldDirty: true })}
-                                    >
-                                        Text info only
-                                    </Button>
-                                    <Button
-                                        type="button"
-                                        variant={linkMode === "link" ? "secondary" : "outline"}
-                                        className="flex-1"
-                                        onClick={() => setValue("link_mode", "link", { shouldDirty: true })}
-                                    >
-                                        Include a link
-                                    </Button>
-                                </div>
-
-                                {linkMode === "link" ? (
-                                    <div>
-                                        <Label className="mb-1.5 block">Link URL</Label>
-                                        <Input placeholder="https://example.com or /course/123" {...register("link_url")} />
-                                        <FieldError message={errors.link_url?.message} />
                                         <p className="text-xs text-muted-foreground mt-1.5">
-                                            Shows an "Open Link" button in the full-content view. Internal paths (starting with /) navigate in-app; anything else opens in a new tab.
+                                            {TARGET_TYPE_MAP[targetType]?.description}
                                         </p>
+                                    )}
+                                </div>
+
+                                {needsTarget && (
+                                    <div>
+                                        <BroadcastTargetPicker
+                                            targetType={targetType}
+                                            value={targetId}
+                                            onChange={(id) => setValue("target_id", id, { shouldValidate: true, shouldDirty: true })}
+                                            onLabelResolved={setTargetLabel}
+                                        />
+                                        <FieldError message={errors.target_id?.message} />
                                     </div>
-                                ) : (
-                                    <p className="text-xs text-muted-foreground">
-                                        The full-content view will show just the title and message, with no action button.
-                                    </p>
                                 )}
                             </SectionCard>
                         )}
 
-                        <div className="flex justify-end gap-2 pt-2">
+                        {/* ── Step 2: Display ── */}
-                            <Button type="button" variant="outline" onClick={() => navigate(-1)} disabled={loading}>
+                        {currentStep === 2 && (
-                                Cancel
+                            <>
-                            </Button>
+                                <SectionCard title="Display" description="Where clients/admins can see this announcement.">
-                            <Button type="submit" disabled={loading}>
+                                    <div className="space-y-3">
-                                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                                        <div className="flex items-center gap-3">
-                                Save draft
+                                            <Checkbox
+                                                id="show_in_sticky"
+                                                checked={showInSticky === true}
+                                                onCheckedChange={(v) => {
+                                                    const checked = v === true;
+                                                    setValue("show_in_sticky", checked, { shouldValidate: true, shouldDirty: true });
+                                                    // Sticky-only announcements vanish forever once dismissed (seen=true drops
+                                                    // them from the sticky query, show_in_notifications=false hides them from
+                                                    // the list too) — force the list entry so it stays reachable afterward.
+                                                    if (checked) setValue("show_in_notifications", true, { shouldValidate: true, shouldDirty: true });
+                                                }}
+                                            />
+                                            <Label htmlFor="show_in_sticky" className="cursor-pointer">
+                                                Show in Sticky Announcements
+                                            </Label>
+                                        </div>
+
+                                        <div className="flex items-center gap-3">
+                                            <Checkbox
+                                                id="show_in_notifications"
+                                                checked={showInNotifications === true}
+                                                disabled={showInSticky === true}
+                                                onCheckedChange={(v) => setValue("show_in_notifications", v === true, { shouldValidate: true, shouldDirty: true })}
+                                            />
+                                            <Label htmlFor="show_in_notifications" className={showInSticky ? "text-muted-foreground" : "cursor-pointer"}>
+                                                Show in Notifications
+                                            </Label>
+                                        </div>
+                                        {showInSticky && (
+                                            <p className="text-xs text-muted-foreground pl-7">
+                                                Required while sticky is on, so it stays visible after being dismissed.
+                                            </p>
+                                        )}
+                                    </div>
+
+                                    <div className="grid grid-cols-2 gap-3">
+                                        <div>
+                                            <Label className="mb-1.5 block">Start date</Label>
+                                            <DateTimePicker
+                                                value={startDate || null}
+                                                onChange={(iso) => setValue("start_date", iso ?? "", { shouldValidate: true, shouldDirty: true })}
+                                                placeholder="Show immediately"
+                                            />
+                                        </div>
+                                        <div>
+                                            <Label className="mb-1.5 block">End date</Label>
+                                            <DateTimePicker
+                                                value={endDate || null}
+                                                onChange={(iso) => setValue("end_date", iso ?? "", { shouldValidate: true, shouldDirty: true })}
+                                                placeholder="No end date"
+                                            />
+                                            <FieldError message={errors.end_date?.message} />
+                                        </div>
+                                    </div>
+
+                                    {showInSticky && (
+                                        <div className="space-y-2 pt-1">
+                                            <Label>Sticky banner color</Label>
+                                            <div className="flex flex-wrap gap-2">
+                                                {TIER_COLOR_OPTIONS.map((opt) => {
+                                                    const selected = (color || "indigo") === opt.key;
+                                                    const bg = selected ? shadeColor(opt.swatch, -20) : opt.swatch;
+                                                    return (
+                                                        <button
+                                                            key={opt.key}
+                                                            type="button"
+                                                            title={opt.label}
+                                                            onClick={() => setValue("color", opt.key, { shouldDirty: true })}
+                                                            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all ${selected ? "scale-105 shadow-md" : "opacity-80 hover:opacity-100"}`}
+                                                            style={{ backgroundColor: bg, color: getContrastText(bg, opt.key) }}
+                                                        >
+                                                            {selected && <Check className="size-3" />}
+                                                            {opt.label}
+                                                        </button>
+                                                    );
+                                                })}
+                                            </div>
+                                            <div
+                                                className="w-full flex items-center justify-center gap-3 rounded-md px-3 py-2 text-sm font-semibold"
+                                                style={{ backgroundColor: getTierColor(color || "indigo").swatch, color: getContrastText(getTierColor(color || "indigo").swatch, color || "indigo") }}
+                                            >
+                                                <span className="truncate">{watch("title") || "Sticky banner preview"}</span>
+                                                {linkMode === "link" && (
+                                                    <Button type="button" variant="outline" size="sm" className="shrink-0 text-foreground">
+                                                        {watch("link_label") || "Open Link"}
+                                                    </Button>
+                                                )}
+                                            </div>
+                                        </div>
+                                    )}
+                                </SectionCard>
+
+                                {showInSticky && (
+                                    <SectionCard title="On Open" description="What happens when someone opens this announcement from the sticky banner.">
+                                        <div className="flex gap-2">
+                                            <Button
+                                                type="button"
+                                                variant={linkMode !== "link" ? "secondary" : "outline"}
+                                                className="flex-1"
+                                                onClick={() => setValue("link_mode", "info", { shouldDirty: true })}
+                                            >
+                                                Text info only
+                                            </Button>
+                                            <Button
+                                                type="button"
+                                                variant={linkMode === "link" ? "secondary" : "outline"}
+                                                className="flex-1"
+                                                onClick={() => setValue("link_mode", "link", { shouldDirty: true })}
+                                            >
+                                                Include a link
+                                            </Button>
+                                        </div>
+
+                                        {linkMode === "link" ? (
+                                            <div className="space-y-4">
+                                                <div>
+                                                    <Label className="mb-1.5 block">Link URL</Label>
+                                                    <Input placeholder="https://example.com or /course/123" {...register("link_url")} />
+                                                    <FieldError message={errors.link_url?.message} />
+                                                    <p className="text-xs text-muted-foreground mt-1.5">
+                                                        Internal paths (starting with /) navigate in-app; anything else opens in a new tab.
+                                                    </p>
+                                                </div>
+                                                <div>
+                                                    <Label className="mb-1.5 block">Button label</Label>
+                                                    <Input placeholder="e.g. Shop now" {...register("link_label")} />
+                                                    <p className="text-xs text-muted-foreground mt-1.5">
+                                                        Shown as a button right after the title in the sticky banner. Defaults to "Open Link".
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        ) : (
+                                            <p className="text-xs text-muted-foreground">
+                                                The full-content view will show just the title and message, with no action button.
+                                            </p>
+                                        )}
+                                    </SectionCard>
+                                )}
+                            </>
+                        )}
+
+                        {/* ── Step 3: Review ── */}
+                        {currentStep === 3 && (
+                            <>
+                                <SectionCard title="Content" description="Confirm everything looks right before saving the draft.">
+                                    <div className="space-y-3 text-sm">
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">Title</p>
+                                            <p className="font-medium">{watch("title") || "—"}</p>
+                                        </div>
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">Message</p>
+                                            <p className="font-medium whitespace-pre-wrap">{watch("message") || "—"}</p>
+                                        </div>
+                                    </div>
+                                </SectionCard>
+
+                                <SectionCard title="Target">
+                                    <div className="flex items-center gap-2 text-sm">
+                                        <Badge variant="outline">{TARGET_TYPE_MAP[targetType]?.label ?? "—"}</Badge>
+                                        {needsTarget && (
+                                            <span className={targetLabel ? "font-medium" : "text-muted-foreground"}>
+                                                {targetLabel ?? (targetId ? "Selected item not found — reselect it" : "No target selected")}
+                                            </span>
+                                        )}
+                                    </div>
+                                </SectionCard>
+
+                                <SectionCard title="Display">
+                                    <div className="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">Sticky Announcements</p>
+                                            <p className="font-medium">{showInSticky ? "Shown" : "Hidden"}</p>
+                                        </div>
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">Notifications</p>
+                                            <p className="font-medium">{showInNotifications ? "Shown" : "Hidden"}</p>
+                                        </div>
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">Start date</p>
+                                            <p className="font-medium">{startDate ? format(new Date(startDate), "MMM d, yyyy  HH:mm") : "Immediately"}</p>
+                                        </div>
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">End date</p>
+                                            <p className="font-medium">{endDate ? format(new Date(endDate), "MMM d, yyyy  HH:mm") : "No end date"}</p>
+                                        </div>
+                                    </div>
+
+                                    {showInSticky && (
+                                        <div
+                                            className="w-full flex items-center justify-center gap-3 rounded-md px-3 py-2 text-sm font-semibold"
+                                            style={{ backgroundColor: getTierColor(color || "indigo").swatch, color: getContrastText(getTierColor(color || "indigo").swatch, color || "indigo") }}
+                                        >
+                                            <span className="truncate">{watch("title") || "Sticky banner preview"}</span>
+                                            {linkMode === "link" && (
+                                                <Button type="button" variant="outline" size="sm" className="shrink-0 text-foreground">
+                                                    {watch("link_label") || "Open Link"}
+                                                </Button>
+                                            )}
+                                        </div>
+                                    )}
+                                </SectionCard>
+
+                                {showInSticky && (
+                                    <SectionCard title="On Open">
+                                        <p className="text-sm">
+                                            {linkMode === "link"
+                                                ? <>Opens <span className="font-medium">{watch("link_url") || "—"}</span> via a “{watch("link_label") || "Open Link"}” button.</>
+                                                : "Text info only — no action button."}
+                                        </p>
+                                    </SectionCard>
+                                )}
+                            </>
+                        )}
+
+                        {/* ── Step navigation ── */}
+                        <div className="flex items-center justify-between pt-2 pb-6">
+                            <Button
+                                type="button"
+                                variant="outline"
+                                onClick={() => currentStep > 0 ? setCurrentStep((s) => s - 1) : navigate(-1)}
+                                disabled={loading}
+                            >
+                                <ArrowLeft className="h-4 w-4 mr-2" />
+                                {currentStep === 0 ? "Cancel" : "Back"}
                             </Button>
+
+                            {currentStep < STEPS.length - 1 ? (
+                                <Button type="button" onClick={() => goToStep(currentStep + 1)}>
+                                    Next
+                                    <ArrowRight className="h-4 w-4 ml-2" />
+                                </Button>
+                            ) : (
+                                <div className="flex gap-2">
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        disabled={loading}
+                                        onClick={handleSubmit((values) => saveBroadcast(values, { publish: false }))}
+                                    >
+                                        {loading && <Spinner className="h-4 w-4 mr-2" />}
+                                        Save as draft
+                                    </Button>
+                                    <Button
+                                        type="button"
+                                        disabled={loading}
+                                        onClick={handleSubmit((values) => saveBroadcast(values, { publish: true }))}
+                                    >
+                                        {loading && <Spinner className="h-4 w-4 mr-2" />}
+                                        Publish now
+                                    </Button>
+                                </div>
+                            )}
                         </div>
                     </form>
                 </div>

src/modules/admin/pages/notifications/AddNotificationTemplate.jsx

@@ -1,136 +0,0 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { ArrowLeft, House } from "lucide-react";
-import { Button }   from "@/components/ui/button";
-import { Input }    from "@/components/ui/input";
-import { Label }    from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Spinner }  from "@/components/ui/spinner";
-import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
-import { PageMeta }  from "@/contexts/MetadataContext";
-import {
-    AdminNotificationTemplateProvider,
-    useAdminNotificationTemplates,
-} from "@/contexts/AdminNotificationTemplateContext";
-
-function SectionCard({ title, children }) {
-    return (
-        <div className="rounded-lg border bg-card p-5 space-y-4">
-            {title && <p className="text-sm font-semibold border-b pb-3">{title}</p>}
-            {children}
-        </div>
-    );
-}
-
-function FieldError({ message }) {
-    if (!message) return null;
-    return <p className="text-xs text-destructive mt-1">{message}</p>;
-}
-
-function AddNotificationTemplateInner() {
-    const navigate = useNavigate();
-    const { loading, createTemplate } = useAdminNotificationTemplates();
-
-    const [label,   setLabel]   = useState("");
-    const [title,   setTitle]   = useState("");
-    const [message, setMessage] = useState("");
-    const [errors,  setErrors]  = useState({});
-
-    const validate = () => {
-        const e = {};
-        if (!label.trim())   e.label   = "Label is required.";
-        if (!title.trim())   e.title   = "Title is required.";
-        if (!message.trim()) e.message = "Message is required.";
-        setErrors(e);
-        return !Object.keys(e).length;
-    };
-
-    const handleCreate = async () => {
-        if (!validate()) return;
-
-        const result = await createTemplate({
-            label:   label.trim(),
-            title:   title.trim(),
-            message: message.trim(),
-        });
-        if (result) navigate("/admin/announcement-templates");
-    };
-
-    return (
-        <section className="bg-muted/60 min-h-full">
-            <PageMeta title="Add Announcement Template - STARR" />
-            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
-                <div className="w-full max-w-2xl mx-auto">
-
-                    <div className="flex flex-col gap-2 mb-6">
-                        <AppBreadcrumb items={[
-                            { label: "Home",          icon: <House className="size-4" />, to: "/admin" },
-                            { label: "Announcements", to: "/admin/announcements" },
-                            { label: "Templates",     to: "/admin/announcement-templates" },
-                            { label: "Add" },
-                        ]} />
-                    </div>
-
-                    <div className="flex items-center gap-3 mb-6">
-                        <Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
-                            <ArrowLeft className="h-4 w-4" />
-                        </Button>
-                        <div className="flex-1 min-w-0">
-                            <h1 className="text-xl font-semibold">Add Announcement Template</h1>
-                            <p className="text-sm text-muted-foreground">
-                                Save a reusable title/message preset to load into a new announcement later.
-                            </p>
-                        </div>
-                    </div>
-
-                    <div className="space-y-5">
-
-                        <SectionCard title="Template Details">
-                            <div className="space-y-1.5">
-                                <Label htmlFor="label">Label <span className="text-destructive">*</span></Label>
-                                <Input id="label" value={label} onChange={(e) => setLabel(e.target.value)} placeholder="e.g. Scheduled Maintenance" />
-                                <FieldError message={errors.label} />
-                            </div>
-
-                            <div className="space-y-1.5">
-                                <Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
-                                <Input id="title" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="e.g. Scheduled maintenance tonight" />
-                                <FieldError message={errors.title} />
-                            </div>
-                        </SectionCard>
-
-                        <SectionCard title="Message">
-                            <p className="text-xs text-muted-foreground -mt-1">
-                                This is copied straight into the announcement — no placeholders here, this text goes out as-is.
-                            </p>
-                            <Textarea
-                                id="message"
-                                value={message}
-                                onChange={(e) => setMessage(e.target.value)}
-                                rows={6}
-                                placeholder="Full announcement text"
-                            />
-                            <FieldError message={errors.message} />
-                        </SectionCard>
-
-                        <div className="flex justify-end gap-3">
-                            <Button type="button" variant="outline" onClick={() => navigate(-1)} disabled={loading}>Cancel</Button>
-                            <Button type="button" onClick={handleCreate} disabled={loading}>
-                                {loading && <Spinner className="h-4 w-4 mr-2" />}
-                                Create Template
-                            </Button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-}
-
-export default function AddNotificationTemplate() {
-    return (
-        <AdminNotificationTemplateProvider>
-            <AddNotificationTemplateInner />
-        </AdminNotificationTemplateProvider>
-    );
-}

src/modules/admin/pages/notifications/EditNotificationBroadcast.jsx

@@ -5,9 +5,9 @@ import { useNavigate, useParams } from "react-router-dom";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { House } from "lucide-react";
+import { format } from "date-fns";
+import { House, Check, ArrowLeft, ArrowRight } from "lucide-react";
 
-import api from "@/utils/api.util";
 import { useNotificationBroadcasts } from "@/contexts/AdminNotificationBroadcastContext";
 import { useAuth } from "@/contexts/AuthContext";
 import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
@@ -18,10 +18,13 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Spinner } from "@/components/ui/spinner";
+import { Badge } from "@/components/ui/badge";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { DateTimePicker } from "@/components/ui/date-time-picker";
 
 import { TARGET_TYPE_OPTIONS, TARGET_TYPE_MAP } from "@/data/notificationBroadcast.data";
 import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+import { TIER_COLOR_OPTIONS, getTierColor, shadeColor, getContrastText } from "@/utils/tierColors";
 
 // ─── Schema ─────────────────────────────────────────────────────────────────
 
@@ -34,6 +37,10 @@ const schema = z.object({
     show_in_notifications: z.boolean().optional(),
     link_mode: z.enum(["info", "link"]).optional(),
     link_url:  z.string().trim().optional(),
+    link_label: z.string().trim().optional(),
+    color:      z.string().optional(),
+    start_date: z.string().optional(),
+    end_date:   z.string().optional(),
 }).superRefine((data, ctx) => {
     if (TARGET_TYPE_MAP[data.target_type]?.needsTarget && !data.target_id) {
         ctx.addIssue({
@@ -58,8 +65,25 @@ const schema = z.object({
             path: ["link_url"],
         });
     }
+
+    if (data.start_date && data.end_date && new Date(data.start_date) > new Date(data.end_date)) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: "End date must be after the start date.",
+            path: ["end_date"],
+        });
+    }
 });
 
+// ─── Steps config ───────────────────────────────────────────────────────────
+
+const STEPS = [
+    { label: "Content", description: "Title & message" },
+    { label: "Target",  description: "Who receives it" },
+    { label: "Display", description: "Where it shows & schedule" },
+    { label: "Review",  description: "Confirm & save" },
+];
+
 // ─── Helpers ────────────────────────────────────────────────────────────────
 
 function FieldError({ message }) {
@@ -81,20 +105,75 @@ function SectionCard({ title, description, children }) {
     );
 }
 
+function StepIndicator({ steps, current, onStepClick }) {
+    return (
+        <div className="flex items-start w-full mb-8">
+            {steps.flatMap((step, i) => {
+                const items = [
+                    <button
+                        key={`step-${i}`}
+                        type="button"
+                        onClick={() => onStepClick(i)}
+                        className="flex flex-col items-center gap-1.5 shrink-0 group"
+                    >
+                        <div
+                            className={[
+                                "w-8 h-8 rounded-full border-2 flex items-center justify-center text-sm font-semibold transition-all group-hover:opacity-80",
+                                i < current
+                                    ? "bg-primary border-primary text-primary-foreground"
+                                    : i === current
+                                    ? "border-primary text-primary"
+                                    : "border-border text-muted-foreground",
+                            ].join(" ")}
+                        >
+                            {i < current ? <Check className="h-4 w-4" /> : i + 1}
+                        </div>
+                        <p
+                            className={[
+                                "text-[11px] font-medium text-center leading-tight whitespace-nowrap",
+                                i === current ? "text-foreground" : "text-muted-foreground",
+                            ].join(" ")}
+                        >
+                            {step.label}
+                        </p>
+                    </button>,
+                ];
+                if (i < steps.length - 1) {
+                    items.push(
+                        <div
+                            key={`line-${i}`}
+                            className={[
+                                "flex-1 h-px mt-4 mx-2 shrink",
+                                i < current ? "bg-primary" : "bg-border",
+                            ].join(" ")}
+                        />
+                    );
+                }
+                return items;
+            })}
+        </div>
+    );
+}
+
 // ─── Page ───────────────────────────────────────────────────────────────────
 
 export default function EditNotificationBroadcast() {
     const navigate = useNavigate();
     const { broadcastId } = useParams();
-    const { fetchBroadcast, updateBroadcast, loading } = useNotificationBroadcasts();
+    const { fetchBroadcast, updateBroadcast, sendBroadcast, loading } = useNotificationBroadcasts();
     const { user } = useAuth();
 
+    const [currentStep, setCurrentStep] = useState(0);
+    const [targetLabel, setTargetLabel] = useState(null);
+    const [broadcastStatus, setBroadcastStatus] = useState("draft");
+
     const {
         register,
         handleSubmit,
         reset,
         watch,
         setValue,
+        trigger,
         formState: { errors, isDirty },
     } = useForm({
         resolver: zodResolver(schema),
@@ -107,31 +186,24 @@ export default function EditNotificationBroadcast() {
             show_in_notifications: true,
             link_mode: "info",
             link_url: "",
+            link_label: "",
+            color: "indigo",
+            start_date: "",
+            end_date: "",
         },
     });
 
     const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty);
 
-    const [templates, setTemplates] = useState([]);
-    useEffect(() => {
-        api.get("/admin/announcement-templates")
-            .then(({ data }) => setTemplates((data.data ?? []).filter((t) => !t.is_system)))
-            .catch(() => {});
-    }, []);
-
-    const applyTemplate = (id) => {
-        const tpl = templates.find((t) => String(t.notification_template_id) === id);
-        if (!tpl) return;
-        setValue("title", tpl.title ?? "", { shouldValidate: true, shouldDirty: true });
-        setValue("message", tpl.message ?? "", { shouldValidate: true, shouldDirty: true });
-    };
-
     const targetType = watch("target_type");
     const targetId   = watch("target_id");
     const needsTarget = TARGET_TYPE_MAP[targetType]?.needsTarget;
     const showInSticky = watch("show_in_sticky");
     const showInNotifications = watch("show_in_notifications");
     const linkMode = watch("link_mode");
+    const color = watch("color");
+    const startDate = watch("start_date");
+    const endDate = watch("end_date");
 
     const breadcrumbItems = [
         { label: "Home", icon: <House className="size-4" />, to: "/admin" },
@@ -146,21 +218,48 @@ export default function EditNotificationBroadcast() {
             const b = res?.data?.data ?? null;
             if (!b) return;
 
+            // Self-heals broadcasts saved before sticky-only was disallowed: sticky
+            // without notifications made the announcement unrecoverable once dismissed.
+            const stickyOn = b.show_in_sticky ?? false;
             reset({
                 title:       b.title ?? "",
                 message:     b.message ?? "",
                 target_type: b.target_type ?? undefined,
                 target_id:   b.target_id ?? null,
-                show_in_sticky: b.show_in_sticky ?? false,
+                show_in_sticky: stickyOn,
-                show_in_notifications: b.show_in_notifications ?? true,
+                show_in_notifications: stickyOn ? true : (b.show_in_notifications ?? true),
                 link_mode: b.link_url ? "link" : "info",
                 link_url:  b.link_url ?? "",
+                link_label: b.link_label ?? "",
+                color: b.color ?? "indigo",
+                start_date: b.start_date ?? "",
+                end_date:   b.end_date ?? "",
             });
+            setBroadcastStatus(b.status ?? "draft");
+            setCurrentStep(0);
         })();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [broadcastId]);
 
-    const onSubmit = async (values) => {
+    // Guards the step indicator: jumping ahead must not bypass required
+    // fields from earlier steps.
+    const goToStep = async (target) => {
+        if (target > 0) {
+            const valid = await trigger(["title", "message"]);
+            if (!valid) { setCurrentStep(0); return; }
+        }
+        if (target > 1) {
+            const valid = await trigger(["target_type", "target_id"]);
+            if (!valid) { setCurrentStep(1); return; }
+        }
+        if (target > 2) {
+            const valid = await trigger(["show_in_sticky", "show_in_notifications", "link_url", "end_date"]);
+            if (!valid) { setCurrentStep(2); return; }
+        }
+        setCurrentStep(target);
+    };
+
+    const saveBroadcast = async (values, { publish = false } = {}) => {
         const { link_mode, ...rest } = values;
         const payload = {
             ...rest,
@@ -168,11 +267,23 @@ export default function EditNotificationBroadcast() {
             show_in_sticky: values.show_in_sticky ?? false,
             show_in_notifications: values.show_in_notifications ?? true,
             link_url: (values.show_in_sticky && link_mode === "link") ? values.link_url.trim() : null,
+            link_label: (values.show_in_sticky && link_mode === "link") ? (values.link_label?.trim() || null) : null,
+            color: values.show_in_sticky ? (values.color || "indigo") : "indigo",
+            start_date: values.start_date || null,
+            end_date: values.end_date || null,
             updatedBy: user?.user_id ?? null,
         };
 
         const res = await updateBroadcast(broadcastId, payload);
-        if (res) { bypassOnce(); navigate("/admin/announcements"); }
+        if (!res) return;
+
+        if (publish) {
+            const sent = await sendBroadcast(broadcastId);
+            if (!sent) return;
+        }
+
+        bypassOnce();
+        navigate("/admin/announcements");
     };
 
     return (
@@ -184,149 +295,343 @@ export default function EditNotificationBroadcast() {
 
                 <div className="w-full max-w-2xl pb-10">
                     <h1 className="text-2xl font-semibold tracking-tight mb-1">Edit announcement</h1>
-                    <p className="text-sm text-muted-foreground mb-6">Only draft announcements can be edited.</p>
+                    <p className="text-sm text-muted-foreground mb-6">
+                        {broadcastStatus === "sent"
+                            ? "This announcement has already been sent — changes apply immediately to anyone currently seeing it."
+                            : "It's saved as a draft until you send it."}
+                    </p>
 
-                    <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+                    <StepIndicator steps={STEPS} current={currentStep} onStepClick={goToStep} />
 
-                        <SectionCard title="Content" description="What admins and/or users will see.">
+                    <form onSubmit={(e) => e.preventDefault()} className="space-y-5">
-                            {templates.length > 0 && (
+
+                        {/* ── Step 0: Content ── */}
+                        {currentStep === 0 && (
+                            <SectionCard title="Content" description="What admins and/or users will see.">
                                 <div>
-                                    <Label className="mb-1.5 block">Load from template</Label>
+                                    <Label className="mb-1.5 block">Title</Label>
-                                    <Select onValueChange={applyTemplate}>
+                                    <Input placeholder="e.g. Scheduled maintenance tonight" {...register("title")} />
+                                    <FieldError message={errors.title?.message} />
+                                </div>
+                                <div>
+                                    <Label className="mb-1.5 block">Message</Label>
+                                    <Textarea rows={4} placeholder="Full announcement text" {...register("message")} />
+                                    <FieldError message={errors.message?.message} />
+                                </div>
+                            </SectionCard>
+                        )}
+
+                        {/* ── Step 1: Target ── */}
+                        {currentStep === 1 && (
+                            <SectionCard title="Target" description="Who receives this announcement when it's sent.">
+                                <div>
+                                    <Select
+                                        value={targetType}
+                                        onValueChange={(v) => {
+                                            setValue("target_type", v, { shouldValidate: true, shouldDirty: true });
+                                            setValue("target_id", null, { shouldDirty: true });
+                                            setTargetLabel(null);
+                                        }}
+                                    >
                                         <SelectTrigger>
-                                            <SelectValue placeholder="Optional — start from a saved preset" />
+                                            <SelectValue placeholder="Select a target" />
                                         </SelectTrigger>
                                         <SelectContent>
-                                            {templates.map((t) => (
+                                            {TARGET_TYPE_OPTIONS.map((t) => (
-                                                <SelectItem key={t.notification_template_id} value={String(t.notification_template_id)}>{t.label}</SelectItem>
+                                                <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
                                             ))}
                                         </SelectContent>
                                     </Select>
-                                    <p className="text-xs text-muted-foreground mt-1.5">Fills in the title and message below — you can still edit them after.</p>
+                                    <FieldError message={errors.target_type?.message} />
-                                </div>
+                                    {targetType && (
-                            )}
-                            <div>
-                                <Label className="mb-1.5 block">Title</Label>
-                                <Input placeholder="e.g. Scheduled maintenance tonight" {...register("title")} />
-                                <FieldError message={errors.title?.message} />
-                            </div>
-                            <div>
-                                <Label className="mb-1.5 block">Message</Label>
-                                <Textarea rows={4} placeholder="Full announcement text" {...register("message")} />
-                                <FieldError message={errors.message?.message} />
-                            </div>
-                        </SectionCard>
-
-                        <SectionCard title="Target" description="Who receives this announcement when it's sent.">
-                            <div>
-                                <Select
-                                    value={targetType}
-                                    onValueChange={(v) => {
-                                        setValue("target_type", v, { shouldValidate: true, shouldDirty: true });
-                                        setValue("target_id", null, { shouldDirty: true });
-                                    }}
-                                >
-                                    <SelectTrigger>
-                                        <SelectValue placeholder="Select a target" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        {TARGET_TYPE_OPTIONS.map((t) => (
-                                            <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
-                                        ))}
-                                    </SelectContent>
-                                </Select>
-                                <FieldError message={errors.target_type?.message} />
-                                {targetType && (
-                                    <p className="text-xs text-muted-foreground mt-1.5">
-                                        {TARGET_TYPE_MAP[targetType]?.description}
-                                    </p>
-                                )}
-                            </div>
-
-                            {needsTarget && (
-                                <div>
-                                    <BroadcastTargetPicker
-                                        targetType={targetType}
-                                        value={targetId}
-                                        onChange={(id) => setValue("target_id", id, { shouldValidate: true, shouldDirty: true })}
-                                    />
-                                    <FieldError message={errors.target_id?.message} />
-                                </div>
-                            )}
-                        </SectionCard>
-
-                        <SectionCard title="Display" description="Where clients/admins can see this announcement.">
-                            <div className="space-y-3">
-                                <div className="flex items-center gap-3">
-                                    <Checkbox
-                                        id="show_in_sticky"
-                                        checked={showInSticky === true}
-                                        onCheckedChange={(v) => setValue("show_in_sticky", v === true, { shouldValidate: true, shouldDirty: true })}
-                                    />
-                                    <Label htmlFor="show_in_sticky" className="cursor-pointer">
-                                        Show in Sticky Announcements
-                                    </Label>
-                                </div>
-
-                                <div className="flex items-center gap-3">
-                                    <Checkbox
-                                        id="show_in_notifications"
-                                        checked={showInNotifications === true}
-                                        onCheckedChange={(v) => setValue("show_in_notifications", v === true, { shouldValidate: true, shouldDirty: true })}
-                                    />
-                                    <Label htmlFor="show_in_notifications" className="cursor-pointer">
-                                        Show in Notifications
-                                    </Label>
-                                </div>
-                            </div>
-                        </SectionCard>
-
-                        {showInSticky && (
-                            <SectionCard title="On Open" description="What happens when someone opens this announcement from the sticky banner.">
-                                <div className="flex gap-2">
-                                    <Button
-                                        type="button"
-                                        variant={linkMode !== "link" ? "secondary" : "outline"}
-                                        className="flex-1"
-                                        onClick={() => setValue("link_mode", "info", { shouldDirty: true })}
-                                    >
-                                        Text info only
-                                    </Button>
-                                    <Button
-                                        type="button"
-                                        variant={linkMode === "link" ? "secondary" : "outline"}
-                                        className="flex-1"
-                                        onClick={() => setValue("link_mode", "link", { shouldDirty: true })}
-                                    >
-                                        Include a link
-                                    </Button>
-                                </div>
-
-                                {linkMode === "link" ? (
-                                    <div>
-                                        <Label className="mb-1.5 block">Link URL</Label>
-                                        <Input placeholder="https://example.com or /course/123" {...register("link_url")} />
-                                        <FieldError message={errors.link_url?.message} />
                                         <p className="text-xs text-muted-foreground mt-1.5">
-                                            Shows an "Open Link" button in the full-content view. Internal paths (starting with /) navigate in-app; anything else opens in a new tab.
+                                            {TARGET_TYPE_MAP[targetType]?.description}
                                         </p>
+                                    )}
+                                </div>
+
+                                {needsTarget && (
+                                    <div>
+                                        <BroadcastTargetPicker
+                                            targetType={targetType}
+                                            value={targetId}
+                                            onChange={(id) => setValue("target_id", id, { shouldValidate: true, shouldDirty: true })}
+                                            onLabelResolved={setTargetLabel}
+                                        />
+                                        <FieldError message={errors.target_id?.message} />
                                     </div>
-                                ) : (
-                                    <p className="text-xs text-muted-foreground">
-                                        The full-content view will show just the title and message, with no action button.
-                                    </p>
                                 )}
                             </SectionCard>
                         )}
 
-                        <div className="flex justify-end gap-2 pt-2">
+                        {/* ── Step 2: Display ── */}
-                            <Button type="button" variant="outline" onClick={() => navigate(-1)} disabled={loading}>
+                        {currentStep === 2 && (
-                                Cancel
+                            <>
-                            </Button>
+                                <SectionCard title="Display" description="Where clients/admins can see this announcement.">
-                            <Button type="submit" disabled={loading}>
+                                    <div className="space-y-3">
-                                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                                        <div className="flex items-center gap-3">
-                                Save changes
+                                            <Checkbox
+                                                id="show_in_sticky"
+                                                checked={showInSticky === true}
+                                                onCheckedChange={(v) => {
+                                                    const checked = v === true;
+                                                    setValue("show_in_sticky", checked, { shouldValidate: true, shouldDirty: true });
+                                                    // Sticky-only announcements vanish forever once dismissed (seen=true drops
+                                                    // them from the sticky query, show_in_notifications=false hides them from
+                                                    // the list too) — force the list entry so it stays reachable afterward.
+                                                    if (checked) setValue("show_in_notifications", true, { shouldValidate: true, shouldDirty: true });
+                                                }}
+                                            />
+                                            <Label htmlFor="show_in_sticky" className="cursor-pointer">
+                                                Show in Sticky Announcements
+                                            </Label>
+                                        </div>
+
+                                        <div className="flex items-center gap-3">
+                                            <Checkbox
+                                                id="show_in_notifications"
+                                                checked={showInNotifications === true}
+                                                disabled={showInSticky === true}
+                                                onCheckedChange={(v) => setValue("show_in_notifications", v === true, { shouldValidate: true, shouldDirty: true })}
+                                            />
+                                            <Label htmlFor="show_in_notifications" className={showInSticky ? "text-muted-foreground" : "cursor-pointer"}>
+                                                Show in Notifications
+                                            </Label>
+                                        </div>
+                                        {showInSticky && (
+                                            <p className="text-xs text-muted-foreground pl-7">
+                                                Required while sticky is on, so it stays visible after being dismissed.
+                                            </p>
+                                        )}
+                                    </div>
+
+                                    <div className="grid grid-cols-2 gap-3">
+                                        <div>
+                                            <Label className="mb-1.5 block">Start date</Label>
+                                            <DateTimePicker
+                                                value={startDate || null}
+                                                onChange={(iso) => setValue("start_date", iso ?? "", { shouldValidate: true, shouldDirty: true })}
+                                                placeholder="Show immediately"
+                                            />
+                                        </div>
+                                        <div>
+                                            <Label className="mb-1.5 block">End date</Label>
+                                            <DateTimePicker
+                                                value={endDate || null}
+                                                onChange={(iso) => setValue("end_date", iso ?? "", { shouldValidate: true, shouldDirty: true })}
+                                                placeholder="No end date"
+                                            />
+                                            <FieldError message={errors.end_date?.message} />
+                                        </div>
+                                    </div>
+
+                                    {showInSticky && (
+                                        <div className="space-y-2 pt-1">
+                                            <Label>Sticky banner color</Label>
+                                            <div className="flex flex-wrap gap-2">
+                                                {TIER_COLOR_OPTIONS.map((opt) => {
+                                                    const selected = (color || "indigo") === opt.key;
+                                                    const bg = selected ? shadeColor(opt.swatch, -20) : opt.swatch;
+                                                    return (
+                                                        <button
+                                                            key={opt.key}
+                                                            type="button"
+                                                            title={opt.label}
+                                                            onClick={() => setValue("color", opt.key, { shouldDirty: true })}
+                                                            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all ${selected ? "scale-105 shadow-md" : "opacity-80 hover:opacity-100"}`}
+                                                            style={{ backgroundColor: bg, color: getContrastText(bg, opt.key) }}
+                                                        >
+                                                            {selected && <Check className="size-3" />}
+                                                            {opt.label}
+                                                        </button>
+                                                    );
+                                                })}
+                                            </div>
+                                            <div
+                                                className="w-full flex items-center justify-center gap-3 rounded-md px-3 py-2 text-sm font-semibold"
+                                                style={{ backgroundColor: getTierColor(color || "indigo").swatch, color: getContrastText(getTierColor(color || "indigo").swatch, color || "indigo") }}
+                                            >
+                                                <span className="truncate">{watch("title") || "Sticky banner preview"}</span>
+                                                {linkMode === "link" && (
+                                                    <Button type="button" variant="outline" size="sm" className="shrink-0 text-foreground">
+                                                        {watch("link_label") || "Open Link"}
+                                                    </Button>
+                                                )}
+                                            </div>
+                                        </div>
+                                    )}
+                                </SectionCard>
+
+                                {showInSticky && (
+                                    <SectionCard title="On Open" description="What happens when someone opens this announcement from the sticky banner.">
+                                        <div className="flex gap-2">
+                                            <Button
+                                                type="button"
+                                                variant={linkMode !== "link" ? "secondary" : "outline"}
+                                                className="flex-1"
+                                                onClick={() => setValue("link_mode", "info", { shouldDirty: true })}
+                                            >
+                                                Text info only
+                                            </Button>
+                                            <Button
+                                                type="button"
+                                                variant={linkMode === "link" ? "secondary" : "outline"}
+                                                className="flex-1"
+                                                onClick={() => setValue("link_mode", "link", { shouldDirty: true })}
+                                            >
+                                                Include a link
+                                            </Button>
+                                        </div>
+
+                                        {linkMode === "link" ? (
+                                            <div className="space-y-4">
+                                                <div>
+                                                    <Label className="mb-1.5 block">Link URL</Label>
+                                                    <Input placeholder="https://example.com or /course/123" {...register("link_url")} />
+                                                    <FieldError message={errors.link_url?.message} />
+                                                    <p className="text-xs text-muted-foreground mt-1.5">
+                                                        Internal paths (starting with /) navigate in-app; anything else opens in a new tab.
+                                                    </p>
+                                                </div>
+                                                <div>
+                                                    <Label className="mb-1.5 block">Button label</Label>
+                                                    <Input placeholder="e.g. Shop now" {...register("link_label")} />
+                                                    <p className="text-xs text-muted-foreground mt-1.5">
+                                                        Shown as a button right after the title in the sticky banner. Defaults to "Open Link".
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        ) : (
+                                            <p className="text-xs text-muted-foreground">
+                                                The full-content view will show just the title and message, with no action button.
+                                            </p>
+                                        )}
+                                    </SectionCard>
+                                )}
+                            </>
+                        )}
+
+                        {/* ── Step 3: Review ── */}
+                        {currentStep === 3 && (
+                            <>
+                                <SectionCard title="Content" description="Confirm everything looks right before saving.">
+                                    <div className="space-y-3 text-sm">
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">Title</p>
+                                            <p className="font-medium">{watch("title") || "—"}</p>
+                                        </div>
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">Message</p>
+                                            <p className="font-medium whitespace-pre-wrap">{watch("message") || "—"}</p>
+                                        </div>
+                                    </div>
+                                </SectionCard>
+
+                                <SectionCard title="Target">
+                                    <div className="flex items-center gap-2 text-sm">
+                                        <Badge variant="outline">{TARGET_TYPE_MAP[targetType]?.label ?? "—"}</Badge>
+                                        {needsTarget && (
+                                            <span className={targetLabel ? "font-medium" : "text-muted-foreground"}>
+                                                {targetLabel ?? (targetId ? "Selected item not found — reselect it" : "No target selected")}
+                                            </span>
+                                        )}
+                                    </div>
+                                </SectionCard>
+
+                                <SectionCard title="Display">
+                                    <div className="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">Sticky Announcements</p>
+                                            <p className="font-medium">{showInSticky ? "Shown" : "Hidden"}</p>
+                                        </div>
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">Notifications</p>
+                                            <p className="font-medium">{showInNotifications ? "Shown" : "Hidden"}</p>
+                                        </div>
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">Start date</p>
+                                            <p className="font-medium">{startDate ? format(new Date(startDate), "MMM d, yyyy  HH:mm") : "Immediately"}</p>
+                                        </div>
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">End date</p>
+                                            <p className="font-medium">{endDate ? format(new Date(endDate), "MMM d, yyyy  HH:mm") : "No end date"}</p>
+                                        </div>
+                                    </div>
+
+                                    {showInSticky && (
+                                        <div
+                                            className="w-full flex items-center justify-center gap-3 rounded-md px-3 py-2 text-sm font-semibold"
+                                            style={{ backgroundColor: getTierColor(color || "indigo").swatch, color: getContrastText(getTierColor(color || "indigo").swatch, color || "indigo") }}
+                                        >
+                                            <span className="truncate">{watch("title") || "Sticky banner preview"}</span>
+                                            {linkMode === "link" && (
+                                                <Button type="button" variant="outline" size="sm" className="shrink-0 text-foreground">
+                                                    {watch("link_label") || "Open Link"}
+                                                </Button>
+                                            )}
+                                        </div>
+                                    )}
+                                </SectionCard>
+
+                                {showInSticky && (
+                                    <SectionCard title="On Open">
+                                        <p className="text-sm">
+                                            {linkMode === "link"
+                                                ? <>Opens <span className="font-medium">{watch("link_url") || "—"}</span> via a “{watch("link_label") || "Open Link"}” button.</>
+                                                : "Text info only — no action button."}
+                                        </p>
+                                    </SectionCard>
+                                )}
+                            </>
+                        )}
+
+                        {/* ── Step navigation ── */}
+                        <div className="flex items-center justify-between pt-2 pb-6">
+                            <Button
+                                type="button"
+                                variant="outline"
+                                onClick={() => currentStep > 0 ? setCurrentStep((s) => s - 1) : navigate(-1)}
+                                disabled={loading}
+                            >
+                                <ArrowLeft className="h-4 w-4 mr-2" />
+                                {currentStep === 0 ? "Cancel" : "Back"}
                             </Button>
+
+                            {currentStep < STEPS.length - 1 ? (
+                                <Button type="button" onClick={() => goToStep(currentStep + 1)}>
+                                    Next
+                                    <ArrowRight className="h-4 w-4 ml-2" />
+                                </Button>
+                            ) : broadcastStatus === "sent" ? (
+                                <Button
+                                    type="button"
+                                    disabled={loading}
+                                    onClick={handleSubmit((values) => saveBroadcast(values, { publish: false }))}
+                                >
+                                    {loading && <Spinner className="h-4 w-4 mr-2" />}
+                                    Save changes
+                                </Button>
+                            ) : (
+                                <div className="flex gap-2">
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        disabled={loading}
+                                        onClick={handleSubmit((values) => saveBroadcast(values, { publish: false }))}
+                                    >
+                                        {loading && <Spinner className="h-4 w-4 mr-2" />}
+                                        Save as draft
+                                    </Button>
+                                    <Button
+                                        type="button"
+                                        disabled={loading}
+                                        onClick={handleSubmit((values) => saveBroadcast(values, { publish: true }))}
+                                    >
+                                        {loading && <Spinner className="h-4 w-4 mr-2" />}
+                                        Publish now
+                                    </Button>
+                                </div>
+                            )}
                         </div>
                     </form>
                 </div>

src/modules/admin/pages/notifications/EditNotificationTemplate.jsx

@@ -1,272 +0,0 @@
-import { useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import { ArrowLeft, House, Lock, Send, Clock3, Trash2 } from "lucide-react";
-import { Button }   from "@/components/ui/button";
-import { Input }    from "@/components/ui/input";
-import { Label }    from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Spinner }  from "@/components/ui/spinner";
-import { Badge }    from "@/components/ui/badge";
-import {
-    AlertDialog, AlertDialogAction, AlertDialogCancel,
-    AlertDialogContent, AlertDialogDescription,
-    AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
-import { PageMeta }  from "@/contexts/MetadataContext";
-import {
-    AdminNotificationTemplateProvider,
-    useAdminNotificationTemplates,
-} from "@/contexts/AdminNotificationTemplateContext";
-import { NOTIFICATION_TEMPLATE_PLACEHOLDERS } from "@/data/notificationTemplatePlaceholders.data";
-import { STATUS_META, hasPendingChanges } from "@/data/notificationTemplateStatus.data";
-import { cn } from "@/lib/utils";
-
-function SectionCard({ title, children }) {
-    return (
-        <div className="rounded-lg border bg-card p-5 space-y-4">
-            {title && <p className="text-sm font-semibold border-b pb-3">{title}</p>}
-            {children}
-        </div>
-    );
-}
-
-function FieldError({ message }) {
-    if (!message) return null;
-    return <p className="text-xs text-destructive mt-1">{message}</p>;
-}
-
-function EditNotificationTemplateInner() {
-    const navigate = useNavigate();
-    const { id }   = useParams();
-    const { template, loading, fetchTemplate, updateTemplate, deleteTemplate } = useAdminNotificationTemplates();
-
-    const [label,   setLabel]   = useState("");
-    const [title,   setTitle]   = useState("");
-    const [message, setMessage] = useState("");
-    const [errors,  setErrors]  = useState({});
-    const [confirmDelete, setConfirmDelete] = useState(false);
-
-    const isCustom = template && !template.is_system;
-
-    useEffect(() => {
-        if (id) fetchTemplate(id);
-    }, [id]);
-
-    useEffect(() => {
-        if (template) {
-            setLabel(template.label ?? "");
-            // Prefer whatever's pending (unpublished) over the live version, so
-            // reopening a template with pending changes resumes editing them.
-            setTitle(template.draft_title ?? template.title ?? "");
-            setMessage(template.draft_message ?? template.message ?? "");
-        }
-    }, [template]);
-
-    const status = STATUS_META[template?.status] ?? STATUS_META.draft;
-    const pending = hasPendingChanges(template);
-    const knownPlaceholders = NOTIFICATION_TEMPLATE_PLACEHOLDERS[template?.type] ?? null;
-
-    const validate = () => {
-        const e = {};
-        if (!label.trim())   e.label   = "Label is required.";
-        if (!title.trim())   e.title   = "Title is required.";
-        if (!message.trim()) e.message = "Message is required.";
-        setErrors(e);
-        return !Object.keys(e).length;
-    };
-
-    const handleSave = async (publish) => {
-        if (!validate()) return;
-
-        const result = await updateTemplate(id, {
-            label:   label.trim(),
-            title:   title.trim(),
-            message: message.trim(),
-            publish,
-        });
-        if (result) navigate("/admin/announcement-templates");
-    };
-
-    const handleDelete = async () => {
-        const result = await deleteTemplate(id);
-        setConfirmDelete(false);
-        if (result) navigate("/admin/announcement-templates");
-    };
-
-    return (
-        <section className="bg-muted/60 min-h-full">
-            <PageMeta title="Edit Announcement Template - STARR" />
-            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
-                <div className="w-full max-w-2xl mx-auto">
-
-                    <div className="flex flex-col gap-2 mb-6">
-                        <AppBreadcrumb items={[
-                            { label: "Home",                     icon: <House className="size-4" />, to: "/admin" },
-                            { label: "Announcements",            to: "/admin/announcements" },
-                            { label: "Templates",                to: "/admin/announcement-templates" },
-                            { label: template?.label ?? "Edit" },
-                        ]} />
-                    </div>
-
-                    <div className="flex items-center gap-3 mb-6">
-                        <Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
-                            <ArrowLeft className="h-4 w-4" />
-                        </Button>
-                        <div className="flex-1 min-w-0">
-                            <div className="flex items-center gap-2 flex-wrap">
-                                <h1 className="text-xl font-semibold">Edit Announcement Template</h1>
-                                {template && !isCustom && (
-                                    <Badge variant="outline" className={cn("gap-1", status.badgeClass)}>
-                                        <Send className="h-3 w-3" /> {status.label}
-                                    </Badge>
-                                )}
-                            </div>
-                            <p className="text-sm text-muted-foreground">Update this template's title and message.</p>
-                        </div>
-                    </div>
-
-                    {pending && !isCustom && (
-                        <div className="rounded-lg border border-amber-400 bg-amber-50 dark:bg-amber-950/40 dark:border-amber-700 p-4 flex items-start gap-3 mb-5">
-                            <Clock3 className="h-4 w-4 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
-                            <p className="text-xs text-amber-800 dark:text-amber-300">
-                                This template has <strong>pending changes</strong> that haven't gone out yet — the version
-                                currently used is the last one you published. Press <strong>Publish</strong> below to
-                                apply these edits, or <strong>Save as Draft</strong> to keep working without publishing.
-                            </p>
-                        </div>
-                    )}
-
-                    {!isCustom && (
-                        <div className="rounded-lg border bg-card p-4 flex items-start gap-3 mb-5">
-                            <Lock className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
-                            <p className="text-xs text-muted-foreground">
-                                This is a <strong>system</strong> notification — code fires it by referencing this exact type,
-                                so the type is locked. Label, title and message are still fully editable.
-                            </p>
-                        </div>
-                    )}
-
-                    <div className="space-y-5">
-
-                        <SectionCard title="Template Details">
-                            {!isCustom && (
-                                <div className="space-y-1.5">
-                                    <Label>Type</Label>
-                                    <Input value={template?.type ?? ""} disabled />
-                                    <p className="text-xs text-muted-foreground">Cannot be changed — this is what code looks up.</p>
-                                </div>
-                            )}
-
-                            <div className="space-y-1.5">
-                                <Label htmlFor="label">Label <span className="text-destructive">*</span></Label>
-                                <Input id="label" value={label} onChange={(e) => setLabel(e.target.value)} placeholder="e.g. Tasks Overdue (Admin)" />
-                                <FieldError message={errors.label} />
-                            </div>
-
-                            <div className="space-y-1.5">
-                                <Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
-                                <Input id="title" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="e.g. Tasks Overdue" />
-                                <FieldError message={errors.title} />
-                            </div>
-                        </SectionCard>
-
-                        <SectionCard>
-                            <div className="flex items-center justify-between border-b pb-3">
-                                <p className="text-sm font-semibold">Message</p>
-                            </div>
-
-                            <p className="text-xs text-muted-foreground -mt-1">
-                                {isCustom
-                                    ? "Plain text only — this is copied straight into the announcement as-is."
-                                    : (<>Plain text only — no HTML, no conditional logic, just straight{" "}
-                                        <code className="bg-muted px-1 rounded">{"{{placeholder}}"}</code> tokens.</>)}
-                            </p>
-
-                            {!isCustom && (knownPlaceholders !== null) && (
-                                <div className="space-y-1.5">
-                                    <p className="text-xs font-medium text-muted-foreground">Available placeholders</p>
-                                    {knownPlaceholders.length ? (
-                                        <div className="flex flex-wrap gap-1.5">
-                                            {knownPlaceholders.map((ph) => (
-                                                <Badge key={ph} variant="outline" className="font-mono text-[10px]">
-                                                    {`{{${ph}}}`}
-                                                </Badge>
-                                            ))}
-                                        </div>
-                                    ) : (
-                                        <p className="text-xs text-muted-foreground">This template has no dynamic placeholders.</p>
-                                    )}
-                                </div>
-                            )}
-
-                            <Textarea
-                                id="message"
-                                value={message}
-                                onChange={(e) => setMessage(e.target.value)}
-                                rows={6}
-                                className="font-mono text-xs"
-                                placeholder="{{count}} {{task_word}} automatically marked as overdue."
-                            />
-                            <FieldError message={errors.message} />
-                        </SectionCard>
-
-                        <div className="flex items-center justify-between gap-3">
-                            {isCustom ? (
-                                <Button type="button" variant="ghost" className="text-destructive hover:text-destructive" onClick={() => setConfirmDelete(true)} disabled={loading}>
-                                    <Trash2 className="h-4 w-4 mr-2" /> Delete
-                                </Button>
-                            ) : <span />}
-
-                            <div className="flex justify-end gap-3">
-                                <Button type="button" variant="outline" onClick={() => navigate(-1)} disabled={loading}>Cancel</Button>
-                                {isCustom ? (
-                                    <Button type="button" onClick={() => handleSave(false)} disabled={loading}>
-                                        {loading && <Spinner className="h-4 w-4 mr-2" />}
-                                        Save
-                                    </Button>
-                                ) : (
-                                    <>
-                                        <Button type="button" variant="outline" onClick={() => handleSave(false)} disabled={loading}>
-                                            Save as Draft
-                                        </Button>
-                                        <Button type="button" onClick={() => handleSave(true)} disabled={loading}>
-                                            {loading ? <Spinner className="h-4 w-4 mr-2" /> : <Send className="h-4 w-4 mr-2" />}
-                                            Publish
-                                        </Button>
-                                    </>
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
-                <AlertDialogContent>
-                    <AlertDialogHeader>
-                        <AlertDialogTitle>Delete this template?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            "{template?.label}" will be permanently removed. It won't affect any announcements already sent.
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel>Cancel</AlertDialogCancel>
-                        <AlertDialogAction onClick={handleDelete} disabled={loading} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
-                            {loading ? <Spinner className="h-4 w-4 mr-2" /> : <Trash2 className="h-4 w-4 mr-2" />}
-                            Delete
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
-        </section>
-    );
-}
-
-export default function EditNotificationTemplate() {
-    return (
-        <AdminNotificationTemplateProvider>
-            <EditNotificationTemplateInner />
-        </AdminNotificationTemplateProvider>
-    );
-}

src/modules/admin/pages/notifications/NotificationBroadcastList.jsx

@@ -2,11 +2,13 @@
 
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { House, Plus, Search, Megaphone, Send, Edit, Trash2, Users, FileText, Archive } from "lucide-react";
+import { House, Plus, Search, Megaphone, Send, Edit, Trash2, Users, Archive, ImagePlus, X } from "lucide-react";
 
 import { useNotificationBroadcasts } from "@/contexts/AdminNotificationBroadcastContext";
+import { useAuth } from "@/contexts/AuthContext";
 import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
 import { TablePagination } from "@/components/generic/Table/TablePagination";
+import { AssetPickerSheet } from "@/components/generic/AssetPickerSheet";
 import { useDateFormat } from "@/hooks/useDateFormat";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -18,15 +20,29 @@ import {
 } from "@/components/ui/alert-dialog";
 
 import { TARGET_TYPE_MAP, BROADCAST_STATUSES, BROADCAST_STATUS_MAP } from "@/data/notificationBroadcast.data";
+import { resolveAssetSrc } from "@/utils/media.util";
 
 export default function NotificationBroadcastList() {
     const navigate = useNavigate();
-    const { broadcasts, pagination, loading, fetchBroadcasts, sendBroadcast, archiveBroadcast } = useNotificationBroadcasts();
+    const { user } = useAuth();
+    const {
+        broadcasts, pagination, loading, fetchBroadcasts, sendBroadcast, archiveBroadcast,
+        stickyBannerSetting, fetchStickyBannerSetting, updateStickyBannerSetting,
+    } = useNotificationBroadcasts();
 
     const [statusFilter, setStatusFilter] = useState("all");
     const [searchInput, setSearchInput] = useState("");
     const [search, setSearch] = useState("");
     const [limit, setLimit] = useState(12);
+    const [pickerOpen, setPickerOpen] = useState(false);
+
+    const bannerAsset = stickyBannerSetting?.image ?? null;
+    const bannerImageUrl = bannerAsset ? resolveAssetSrc(bannerAsset) : null;
+
+    useEffect(() => {
+        fetchStickyBannerSetting();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
     function buildFilters() {
         const filters = [];
@@ -73,10 +89,6 @@ export default function NotificationBroadcastList() {
                             <p className="text-sm text-muted-foreground">Compose and send announcements to admins and users</p>
                         </div>
                         <div className="flex items-center gap-2">
-                            <Button variant="outline" onClick={() => navigate("/admin/announcement-templates")}>
-                                <FileText className="size-4" />
-                                Templates
-                            </Button>
                             <Button variant="outline" onClick={() => navigate("/admin/announcements/archived")}>
                                 <Archive className="size-4" />
                                 Archived
@@ -95,6 +107,24 @@ export default function NotificationBroadcastList() {
                         <StatCard label="Sent"   value={sentCount}  tone="success" />
                     </div>
 
+                    {/* ── Sticky banner image (shared across all active announcements) ── */}
+                    <div className="bg-background rounded-lg border p-4 flex items-center gap-4">
+                        <div className="w-40 shrink-0">
+                            <StickyBannerPicker
+                                selectedAsset={bannerAsset}
+                                imageUrl={bannerImageUrl}
+                                onPick={() => setPickerOpen(true)}
+                                onRemove={() => updateStickyBannerSetting({ image_asset_id: null, updatedBy: user?.user_id ?? null })}
+                            />
+                        </div>
+                        <div>
+                            <p className="text-sm font-medium">Sticky banner image</p>
+                            <p className="text-xs text-muted-foreground mt-0.5">
+                                Shown in the details dialog for every currently-active sticky announcement (up to 3 share this one image).
+                            </p>
+                        </div>
+                    </div>
+
                     {/* ── Filters ────────────────────────────────────────────────── */}
                     <div className="flex items-center gap-2 flex-wrap">
                         <Select value={statusFilter} onValueChange={setStatusFilter}>
@@ -110,11 +140,11 @@ export default function NotificationBroadcastList() {
                         </Select>
 
                         <div className="flex items-center gap-2 flex-1 min-w-[160px]">
-                            <div className="relative flex-1">
+                            <div className="relative w-64">
                                 <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
                                 <Input
                                     placeholder="Search announcements..."
-                                    className="pl-8 bg-background"
+                                    className="pl-8 bg-background text-sm"
                                     value={searchInput}
                                     onChange={(e) => setSearchInput(e.target.value)}
                                     onKeyDown={(e) => { if (e.key === "Enter") setSearch(searchInput); }}
@@ -163,12 +193,65 @@ export default function NotificationBroadcastList() {
                     )}
                 </div>
             </div>
+
+            <AssetPickerSheet
+                open={pickerOpen}
+                onOpenChange={setPickerOpen}
+                fileType="image"
+                onSelect={(asset) => {
+                    updateStickyBannerSetting({ image_asset_id: asset.asset_id, updatedBy: user?.user_id ?? null });
+                }}
+            />
         </section>
     );
 }
 
 // ─── Stat card ──────────────────────────────────────────────────────────────
 
+// ─── Sticky banner image picker ────────────────────────────────────────────
+
+function StickyBannerPicker({ selectedAsset, imageUrl, onPick, onRemove }) {
+    if (!selectedAsset) {
+        return (
+            <button
+                type="button"
+                onClick={onPick}
+                className="w-full aspect-video rounded-lg border border-dashed flex flex-col items-center justify-center gap-1.5 text-muted-foreground hover:bg-muted/50 transition-colors"
+            >
+                <ImagePlus className="size-4" />
+                <span className="text-xs">Select an image</span>
+            </button>
+        );
+    }
+
+    return (
+        <div className="relative rounded-lg overflow-hidden border aspect-video group">
+            <img
+                src={imageUrl || resolveAssetSrc(selectedAsset)}
+                alt={selectedAsset.display_name}
+                className="w-full h-full object-cover cursor-pointer"
+                onClick={onPick}
+            />
+            <div
+                onClick={onPick}
+                className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center cursor-pointer"
+            >
+                <span className="text-white text-xs opacity-0 group-hover:opacity-100">Change image</span>
+            </div>
+            <Button
+                type="button"
+                variant="secondary"
+                size="icon"
+                className="absolute top-1 right-1 size-6"
+                onClick={(e) => { e.stopPropagation(); onRemove(); }}
+                aria-label="Remove image"
+            >
+                <X className="size-3.5" />
+            </Button>
+        </div>
+    );
+}
+
 function StatCard({ label, value, tone = "default" }) {
     const toneClass = {
         default: "text-foreground",
@@ -238,11 +321,9 @@ function BroadcastCard({ broadcast, onView, onEdit, onSend, onArchive }) {
                             </AlertDialogContent>
                         </AlertDialog>
                     )}
-                    {isDraft && (
+                    <Button variant="ghost" size="icon" className="size-7" onClick={onEdit} aria-label="Edit">
-                        <Button variant="ghost" size="icon" className="size-7" onClick={onEdit} aria-label="Edit">
+                        <Edit className="size-3.5" />
-                            <Edit className="size-3.5" />
+                    </Button>
-                        </Button>
-                    )}
                     <AlertDialog>
                         <AlertDialogTrigger asChild>
                             <Button variant="ghost" size="icon" className="size-7" aria-label="Delete">

src/modules/admin/pages/notifications/NotificationTemplates.jsx

@@ -1,242 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { House, Pencil, Bell, Lock, Send, Clock3, Plus, Trash2 } from "lucide-react";
-import { Button }    from "@/components/ui/button";
-import { Badge }     from "@/components/ui/badge";
-import { Spinner }   from "@/components/ui/spinner";
-import { Separator } from "@/components/ui/separator";
-import {
-    AlertDialog, AlertDialogAction, AlertDialogCancel,
-    AlertDialogContent, AlertDialogDescription,
-    AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
-import { PageMeta }  from "@/contexts/MetadataContext";
-import {
-    AdminNotificationTemplateProvider,
-    useAdminNotificationTemplates,
-} from "@/contexts/AdminNotificationTemplateContext";
-import { NOTIFICATION_TEMPLATE_TYPES, getNotificationTemplateType } from "@/data/notificationTemplateTypes.data";
-import { STATUS_META, hasPendingChanges } from "@/data/notificationTemplateStatus.data";
-import { cn } from "@/lib/utils";
-
-function TemplateCard({ item, onEdit, onDelete }) {
-    const typeMeta = getNotificationTemplateType(item.notify_type);
-    const TypeIcon = typeMeta?.icon ?? Bell;
-    const status   = STATUS_META[item.status] ?? STATUS_META.draft;
-    const pending  = hasPendingChanges(item);
-
-    return (
-        <div className="rounded-lg border bg-card p-5 flex flex-col gap-4 h-full">
-            <div className="flex items-start justify-between gap-2">
-                <div className="w-10 h-10 rounded-lg border bg-muted flex items-center justify-center shrink-0">
-                    <TypeIcon className="h-4.5 w-4.5 text-muted-foreground" />
-                </div>
-                <div className="flex items-center gap-0.5">
-                    {!item.is_system && (
-                        <Button type="button" variant="ghost" size="icon" className="text-destructive hover:text-destructive" onClick={() => onDelete(item)}>
-                            <Trash2 className="h-4 w-4" />
-                        </Button>
-                    )}
-                    <Button type="button" variant="ghost" size="icon" onClick={() => onEdit(item)}>
-                        <Pencil className="h-4 w-4" />
-                    </Button>
-                </div>
-            </div>
-
-            <div className="min-w-0 flex-1">
-                <div className="flex items-center gap-2 flex-wrap mb-1">
-                    <p className="text-sm font-semibold truncate">{item.label}</p>
-                    {item.is_system && (
-                        <Badge variant="secondary" className="gap-1 shrink-0">
-                            <Lock className="h-2.5 w-2.5" /> System
-                        </Badge>
-                    )}
-                </div>
-                <code className="text-[10px] bg-muted px-1.5 py-0.5 rounded text-muted-foreground">{item.type}</code>
-                <p className="text-xs text-muted-foreground mt-2 line-clamp-2">
-                    <span className="text-foreground">{item.title || item.draft_title || "No title yet"}</span>
-                </p>
-            </div>
-
-            <div className="flex items-center gap-1.5 flex-wrap">
-                {typeMeta && (
-                    <Badge variant="outline" className="gap-1 text-[11px]">
-                        <typeMeta.icon className="h-3 w-3" /> {typeMeta.label}
-                    </Badge>
-                )}
-                <Badge variant="outline" className={cn("gap-1 text-[11px]", status.badgeClass)}>
-                    <Send className="h-3 w-3" /> {status.label}
-                </Badge>
-                {pending && (
-                    <Badge variant="outline" className="gap-1 text-[11px] bg-amber-100 text-amber-700 border-amber-400 dark:bg-amber-900/40 dark:text-amber-400 dark:border-amber-700">
-                        <Clock3 className="h-3 w-3" /> Pending changes
-                    </Badge>
-                )}
-            </div>
-        </div>
-    );
-}
-
-function NotificationTemplatesInner() {
-    const navigate = useNavigate();
-    const { templates, loading, fetchTemplates, deleteTemplate } = useAdminNotificationTemplates();
-    const [activeType, setActiveType] = useState("all");
-    const [deleteTarget, setDeleteTarget] = useState(null);
-
-    useEffect(() => { fetchTemplates(); }, []);
-
-    const handleDelete = async () => {
-        if (!deleteTarget) return;
-        await deleteTemplate(deleteTarget.notification_template_id);
-        setDeleteTarget(null);
-    };
-
-    const filtered = useMemo(
-        () => activeType === "all" ? templates : templates.filter((t) => t.notify_type === activeType),
-        [templates, activeType]
-    );
-
-    const typesInUse = useMemo(
-        () => NOTIFICATION_TEMPLATE_TYPES.filter((t) => templates.some((tpl) => tpl.notify_type === t.value)),
-        [templates]
-    );
-
-    return (
-        <section className="bg-muted/60 min-h-full">
-            <PageMeta title="Announcement Templates - STARR" />
-            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
-                <div className="w-full max-w-6xl mx-auto">
-
-                    <div className="flex flex-col gap-2 mb-6">
-                        <AppBreadcrumb items={[
-                            { label: "Home", icon: <House className="size-4" />, to: "/admin" },
-                            { label: "Announcements", to: "/admin/announcements" },
-                            { label: "Templates" },
-                        ]} />
-                    </div>
-
-                    <div className="flex items-center justify-between mb-6">
-                        <div>
-                            <h1 className="text-xl font-semibold">Announcement Templates</h1>
-                            <p className="text-sm text-muted-foreground mt-0.5">
-                                Title and message wording for every automated notification STARR sends.
-                            </p>
-                            <div className="flex items-center gap-3 mt-2 text-xs text-muted-foreground">
-                                <span className="flex items-center gap-1">
-                                    <Send className="h-3 w-3 text-emerald-600" />
-                                    {templates.filter((t) => t.status === "sent").length} sent
-                                </span>
-                                <span className="flex items-center gap-1">
-                                    <Pencil className="h-3 w-3" />
-                                    {templates.filter((t) => t.status === "draft").length} draft
-                                </span>
-                                {templates.some(hasPendingChanges) && (
-                                    <span className="flex items-center gap-1 text-amber-600">
-                                        <Clock3 className="h-3 w-3" />
-                                        {templates.filter(hasPendingChanges).length} with pending changes
-                                    </span>
-                                )}
-                            </div>
-                        </div>
-
-                        <Button type="button" onClick={() => navigate("/admin/announcement-templates/add")} className="gap-1.5">
-                            <Plus className="h-4 w-4" /> Add Template
-                        </Button>
-                    </div>
-
-                    <div className="rounded-lg border bg-card p-4 flex items-start gap-3 mb-5">
-                        <Lock className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
-                        <div className="text-xs text-muted-foreground space-y-1">
-                            <p>
-                                <strong>System</strong> templates are locked — code fires them by referencing their exact
-                                type, so only the title and message wording is editable, never the type itself, and they
-                                can't be deleted.
-                            </p>
-                            <p>
-                                <strong>Custom</strong> templates (no lock icon) are reusable title/message presets you
-                                create — pick one from the "Load from template" dropdown when composing a new announcement
-                                to skip retyping recurring wording. You can freely create, edit, and delete these.
-                            </p>
-                            <p>
-                                <strong>Draft vs. Sent</strong> (system templates only): a <strong>Sent</strong> template
-                                is the version actually used for real notifications right now. Editing a Sent template
-                                doesn't change what goes out immediately — it's held as a pending change until you press{" "}
-                                <strong>Publish</strong> again.
-                            </p>
-                        </div>
-                    </div>
-
-                    <div className="flex flex-wrap items-center gap-2 mb-5">
-                        <Button
-                            type="button" size="sm" variant={activeType === "all" ? "secondary" : "outline"}
-                            onClick={() => setActiveType("all")}
-                        >
-                            All ({templates.length})
-                        </Button>
-                        {typesInUse.map((t) => {
-                            const Icon = t.icon;
-                            const count = templates.filter((tpl) => tpl.notify_type === t.value).length;
-                            return (
-                                <Button
-                                    key={t.value}
-                                    type="button" size="sm"
-                                    variant={activeType === t.value ? "secondary" : "outline"}
-                                    onClick={() => setActiveType(t.value)}
-                                    className="gap-1.5"
-                                >
-                                    <Icon className="h-3.5 w-3.5" /> {t.label} ({count})
-                                </Button>
-                            );
-                        })}
-                    </div>
-
-                    <Separator className="mb-5" />
-
-                    {loading && !templates.length ? (
-                        <div className="flex justify-center py-12"><Spinner className="h-5 w-5" /></div>
-                    ) : !filtered.length ? (
-                        <p className="text-sm text-muted-foreground text-center py-12">No notification templates found.</p>
-                    ) : (
-                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                            {filtered.map((item) => (
-                                <TemplateCard
-                                    key={item.notification_template_id}
-                                    item={item}
-                                    onEdit={(t) => navigate(`/admin/announcement-templates/${t.notification_template_id}/edit`)}
-                                    onDelete={setDeleteTarget}
-                                />
-                            ))}
-                        </div>
-                    )}
-                </div>
-            </div>
-
-            <AlertDialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
-                <AlertDialogContent>
-                    <AlertDialogHeader>
-                        <AlertDialogTitle>Delete this template?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            "{deleteTarget?.label}" will be permanently removed. It won't affect any announcements already sent.
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel>Cancel</AlertDialogCancel>
-                        <AlertDialogAction onClick={handleDelete} disabled={loading} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
-                            {loading ? <Spinner className="h-4 w-4 mr-2" /> : <Trash2 className="h-4 w-4 mr-2" />}
-                            Delete
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
-        </section>
-    );
-}
-
-export default function NotificationTemplates() {
-    return (
-        <AdminNotificationTemplateProvider>
-            <NotificationTemplatesInner />
-        </AdminNotificationTemplateProvider>
-    );
-}

src/modules/admin/pages/notifications/ViewNotificationBroadcast.jsx

@@ -169,8 +169,8 @@ export default function ViewNotificationBroadcast() {
                             </div>
                         </div>
 
-                        {isDraft && (
+                        <div className="flex items-center gap-2 shrink-0">
-                            <div className="flex items-center gap-2 shrink-0">
+                            {isDraft && (
                                 <AlertDialog>
                                     <AlertDialogTrigger asChild>
                                         <Button variant="outline" size="sm">
@@ -191,12 +191,12 @@ export default function ViewNotificationBroadcast() {
                                         </AlertDialogFooter>
                                     </AlertDialogContent>
                                 </AlertDialog>
-                                <Button size="sm" onClick={() => navigate(`/admin/announcements/${broadcastId}/edit`)}>
+                            )}
-                                    <Edit className="size-4" />
+                            <Button size="sm" onClick={() => navigate(`/admin/announcements/${broadcastId}/edit`)}>
-                                    Edit
+                                <Edit className="size-4" />
-                                </Button>
+                                Edit
-                            </div>
+                            </Button>
-                        )}
+                        </div>
                     </div>
 
                     {/* Underline tabs */}

src/modules/admin/pages/tiers/EditTierCategory.jsx

@@ -11,7 +11,7 @@ import {
     Milestone, Navigation, Sunrise,
 } from "lucide-react";
 import * as LucideIcons from "lucide-react";
-import { TIER_COLOR_OPTIONS, getTierColor } from "@/utils/tierColors";
+import { TIER_COLOR_OPTIONS, getTierColor, shadeColor, getContrastText } from "@/utils/tierColors";
 import { Badge } from "@/components/ui/badge";
 
 export const BADGE_ICON_OPTIONS = [
@@ -279,14 +279,15 @@ function EditTierCategoryInner({ isAdd }) {
                                 <div className="flex flex-wrap gap-2">
                                     {TIER_COLOR_OPTIONS.map((opt) => {
                                         const selected = color === opt.key;
+                                        const bg = selected ? shadeColor(opt.swatch, -20) : opt.swatch;
                                         return (
                                             <button
                                                 key={opt.key}
                                                 type="button"
                                                 title={opt.label}
                                                 onClick={() => setColor(opt.key)}
-                                                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium border-2 transition-all ${selected ? "border-foreground scale-105" : "border-transparent opacity-70 hover:opacity-100"}`}
+                                                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all ${selected ? "scale-105 shadow-md" : "opacity-80 hover:opacity-100"}`}
-                                                style={{ backgroundColor: opt.swatch, color: "#fff" }}
+                                                style={{ backgroundColor: bg, color: getContrastText(bg, opt.key) }}
                                             >
                                                 {selected && <Check className="size-3" />}
                                                 {opt.label}

src/modules/admin/routes/AdminRoutes.jsx

@@ -115,9 +115,6 @@ import EditAdvertisement from '../pages/advertisements/EditAdvertisement'
 import ViewAdvertisement from '../pages/advertisements/ViewAdvertisement'
 import ArchivedAdvertisementList from '../pages/advertisements/ArchivedAdvertisementList'
 
-// Achievements
-import Achievements from '../pages/achievements/Achievements'
-import { AddAchievement, EditAchievement } from '../pages/achievements/EditAchievement'
 
 // Notification Broadcasts
 import NotificationBroadcastList from '../pages/notifications/NotificationBroadcastList'
@@ -125,9 +122,6 @@ import AddNotificationBroadcast from '../pages/notifications/AddNotificationBroa
 import EditNotificationBroadcast from '../pages/notifications/EditNotificationBroadcast'
 import ViewNotificationBroadcast from '../pages/notifications/ViewNotificationBroadcast'
 import Jobs from '../pages/jobs/Jobs'
-import NotificationTemplates from '../pages/notifications/NotificationTemplates'
-import AddNotificationTemplate from '../pages/notifications/AddNotificationTemplate'
-import EditNotificationTemplate from '../pages/notifications/EditNotificationTemplate'
 import ArchivedNotificationBroadcastList from '../pages/notifications/ArchivedNotificationBroadcastList'
 
 // Activity
@@ -358,17 +352,6 @@ export const AdminRoutes = {
           ]
         },
 
-        // Achievements
-
-        {
-          path: 'achievements',
-          element: <Outlet />,
-          children: [
-            { index: true, element: <Achievements /> },
-            { path: 'add', element: <AddAchievement /> },
-            { path: ':id/edit', element: <EditAchievement /> },
-          ]
-        },
 
         // Jobs (cron scheduling for announcement/notification jobs)
         { path: 'jobs', element: <Jobs /> },
@@ -386,16 +369,6 @@ export const AdminRoutes = {
             { path: ':broadcastId/edit', element: <EditNotificationBroadcast /> },
           ]
         },
-        {
-          path: 'announcement-templates',
-          element: <Outlet />,
-          children: [
-            { index: true, element: <NotificationTemplates /> },
-            { path: 'add', element: <AddNotificationTemplate /> },
-            { path: ':id/edit', element: <EditNotificationTemplate /> },
-          ]
-        },
-
         // Backwards-compatible aliases (keep old URLs working)
         {
           path: 'notifications',
@@ -409,17 +382,6 @@ export const AdminRoutes = {
             { path: ':broadcastId/edit', element: <EditNotificationBroadcast /> },
           ]
         },
-        {
-          path: 'notification-templates',
-          element: <Outlet />,
-          children: [
-            { index: true, element: <NotificationTemplates /> },
-            { path: 'add', element: <AddNotificationTemplate /> },
-            { path: ':id/edit', element: <EditNotificationTemplate /> },
-          ]
-        },
-
-
         // Activity Feed
         { path: 'activity', element: <ActivityFeed /> },
 

src/modules/client/components/LessonCard.jsx

@@ -3,10 +3,11 @@
 // no lesson_count/quiz_id of its own — shows unit_count instead (how many Units
 // it's attached to).
 
-import { Timer, LockIcon, Layers } from "lucide-react";
+import { Timer, LockIcon, Layers, Tag } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
+import { resolveTierBadge, cheapestTierSlug } from "@/utils/tierBadge.util";
 
 function formatDuration(seconds = 0) {
     if (!seconds) return null;
@@ -17,11 +18,13 @@ function formatDuration(seconds = 0) {
     return `${m}m`;
 }
 
-export const LessonCard = ({ lesson, onViewDetails }) => {
+export const LessonCard = ({ lesson, tierMap = {}, onViewDetails }) => {
     const locked = lesson.is_locked;
     const duration = formatDuration(lesson.duration_seconds);
     const unitCount = Number(lesson.unit_count ?? 0);
     const courses = lesson.courses ?? [];
+    const slug = cheapestTierSlug(courses.map((c) => c.subscription), tierMap);
+    const { label, cls } = resolveTierBadge(slug, tierMap);
 
     return (
         <div
@@ -35,23 +38,12 @@ export const LessonCard = ({ lesson, onViewDetails }) => {
             onClick={() => onViewDetails(lesson)}
         >
             <div className="flex flex-wrap gap-1.5">
+                <Badge className={cls}>
+                    {locked ? <LockIcon className="size-3" /> : <Tag className="size-3" />}
+                    {label}
+                </Badge>
                 {locked && (
-                    <Badge variant="secondary">
+                    <Badge variant="outline" className="text-muted-foreground">Locked</Badge>
-                        <LockIcon className="size-3" /> Locked
-                    </Badge>
-                )}
-                {unitCount > 0 ? (
-                    <Badge variant="outline">
-                        <Layers className="size-3" /> In {unitCount} unit{unitCount === 1 ? "" : "s"}
-                        {courses[0] && (
-                            <>
-                                {" "}· <span className="truncate max-w-[120px] inline-block align-bottom">{courses[0].title}</span>
-                                {courses.length > 1 ? ` +${courses.length - 1}` : ""}
-                            </>
-                        )}
-                    </Badge>
-                ) : (
-                    !locked && <Badge variant="outline" className="text-muted-foreground">Standalone</Badge>
                 )}
             </div>
 

src/modules/client/components/UnitCard.jsx

@@ -1,96 +1,85 @@
 // UnitCard — grid card for a standalone Unit. Shared by UnitsList.jsx and
 // Dashboard.jsx's "Featured Units" section.
 
-import { Timer, LockIcon, Layers, BookOpen, ClipboardList } from "lucide-react";
+import { Timer, LockIcon, Layers, Tag } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
+import { resolveTierBadge, cheapestTierSlug } from "@/utils/tierBadge.util";
 
 function formatDuration(seconds = 0) {
-    if (!seconds) return null;
+  if (!seconds) return null;
-    const h = Math.floor(seconds / 3600);
+  const h = Math.floor(seconds / 3600);
-    const m = Math.floor((seconds % 3600) / 60);
+  const m = Math.floor((seconds % 3600) / 60);
-    if (h && m) return `${h}h ${m}m`;
+  if (h && m) return `${h}h ${m}m`;
-    if (h) return `${h}h`;
+  if (h) return `${h}h`;
-    return `${m}m`;
+  return `${m}m`;
 }
 
-export const UnitCard = ({ unit, onViewDetails }) => {
+export const UnitCard = ({ unit, tierMap = {}, onViewDetails }) => {
-    const locked = unit.is_locked;
+  const locked = unit.is_locked;
-    const duration = formatDuration(unit.duration_seconds);
+  const duration = formatDuration(unit.duration_seconds);
-    const lessonCount = Number(unit.lesson_count ?? 0);
+  const lessonCount = Number(unit.lesson_count ?? 0);
-    const courseCount = Number(unit.course_count ?? 0);
+  const courses = unit.courses ?? [];
-    const courses = unit.courses ?? [];
+  const slug = cheapestTierSlug([unit.subscription, ...courses.map((c) => c.subscription)], tierMap);
+  const { label, cls } = resolveTierBadge(slug, tierMap);
 
-    return (
+  return (
-        <div
+    <div
-            className={cn(
+      className={cn(
-                "bg-card rounded-2xl border p-4 flex flex-col gap-2.5 transition-all cursor-pointer group",
+        "bg-card rounded-2xl border p-4 flex flex-col gap-2.5 transition-all cursor-pointer group",
-                "hover:shadow-sm",
+        "hover:shadow-sm",
-                locked
+        locked
-                    ? "opacity-80 hover:opacity-100 hover:border-muted-foreground/40"
+          ? "opacity-80 hover:opacity-100 hover:border-muted-foreground/40"
-                    : "hover:bg-muted/60 dark:hover:border-blue-500"
+          : "hover:bg-muted/60 dark:hover:border-blue-500"
-            )}
+      )}
-            onClick={() => onViewDetails(unit)}
+      onClick={() => onViewDetails(unit)}
-        >
+    >
-            <div className="flex flex-wrap gap-1.5">
+      <div className="flex flex-wrap gap-1.5">
-                {locked && (
+        <Badge className={cls}>
-                    <Badge variant="secondary">
+          {locked ? <LockIcon className="size-3" /> : <Tag className="size-3" />}
-                        <LockIcon className="size-3" /> Locked
+          {label}
-                    </Badge>
+        </Badge>
-                )}
+      </div>
-                {courseCount > 0 ? (
-                    <Badge variant="outline">
-                        <BookOpen className="size-3" />
-                        <span className="truncate max-w-[140px] inline-block align-bottom">{courses[0]?.title ?? "Course"}</span>
-                        {courseCount > 1 ? ` +${courseCount - 1}` : ""}
-                    </Badge>
-                ) : (
-                    !locked && <Badge variant="outline" className="text-muted-foreground">Standalone</Badge>
-                )}
-                {unit.quiz_id && (
-                    <Badge variant="outline"><ClipboardList className="size-3" /> Quiz</Badge>
-                )}
-            </div>
 
-            <div className="flex flex-col gap-1">
+      <div className="flex flex-col gap-1">
-                <h1 className="text-lg font-medium leading-snug line-clamp-3 transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-400">
+        <h1 className="text-lg font-medium leading-snug line-clamp-3 transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-400">
-                    {unit.title}
+          {unit.title}
-                </h1>
+        </h1>
-                {unit.description && (
+        {unit.description && (
-                    <p className="text-sm leading-relaxed line-clamp-2 group-hover:text-blue-700 dark:group-hover:text-blue-400">
+          <p className="text-sm leading-relaxed line-clamp-2 group-hover:text-blue-700 dark:group-hover:text-blue-400">
-                        {unit.description}
+            {unit.description}
-                    </p>
+          </p>
-                )}
+        )}
-            </div>
+      </div>
 
-            <div className="flex items-center justify-between pt-2 mt-auto border-t">
+      <div className="flex items-center justify-between pt-2 mt-auto border-t">
-                <div className={`flex items-center gap-3 text-sm [&_svg]:size-4 ${locked ? "text-muted-foreground" : "text-card-foreground group-hover:text-blue-700 dark:group-hover:text-blue-400"}`}>
+        <div className={`flex items-center gap-3 text-sm [&_svg]:size-4 ${locked ? "text-muted-foreground" : "text-card-foreground group-hover:text-blue-700 dark:group-hover:text-blue-400"}`}>
-                    <div className="flex items-center gap-1">
+          <div className="flex items-center gap-1">
-                        <Layers /> {lessonCount} {lessonCount === 1 ? "Lesson" : "Lessons"}
+            <Layers /> {lessonCount} {lessonCount === 1 ? "Lesson" : "Lessons"}
-                    </div>
+          </div>
-                    <div className="flex items-center gap-1">
+          <div className="flex items-center gap-1">
-                        <Timer /> {duration ?? "—"}
+            <Timer /> {duration ?? "—"}
-                    </div>
+          </div>
-                </div>
-                {locked && (
-                    <span className="text-xs text-muted-foreground">Upgrade to unlock</span>
-                )}
-            </div>
         </div>
-    );
+        {locked && (
+          <span className="text-xs text-muted-foreground">Upgrade to unlock</span>
+        )}
+      </div>
+    </div>
+  );
 };
 
 export const UnitCardSkeleton = () => (
-    <div className="bg-card rounded-2xl border p-4 flex flex-col gap-2.5">
+  <div className="bg-card rounded-2xl border p-4 flex flex-col gap-2.5">
-        <div className="flex gap-1.5">
+    <div className="flex gap-1.5">
-            <Skeleton className="h-5 w-20 rounded-full" />
+      <Skeleton className="h-5 w-20 rounded-full" />
-        </div>
-        <Skeleton className="h-6 w-3/4" />
-        <Skeleton className="h-4 w-full" />
-        <Skeleton className="h-4 w-2/3" />
-        <div className="pt-2 mt-auto border-t">
-            <Skeleton className="h-4 w-24" />
-        </div>
     </div>
+    <Skeleton className="h-6 w-3/4" />
+    <Skeleton className="h-4 w-full" />
+    <Skeleton className="h-4 w-2/3" />
+    <div className="pt-2 mt-auto border-t">
+      <Skeleton className="h-4 w-24" />
+    </div>
+  </div>
 );

src/modules/client/pages/AdvertisementLandingPage.jsx

@@ -0,0 +1,104 @@
+// modules/client/pages/AdvertisementLandingPage.jsx
+//
+// Destination for an advertisement's own click-through when no redirect_link
+// was set — the internal page authored in the "Page Builder" wizard step
+// (Step 3 of Add Advertisement). Resolved by uuid via
+// GET /api/client/advertisements/uuid/:uuid.
+
+import { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { Megaphone, ArrowLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { resolveAssetSrc } from "@/utils/media.util";
+import api from "@/utils/api.util";
+
+export default function AdvertisementLandingPage() {
+    const { uuid } = useParams();
+    const navigate = useNavigate();
+    const [ad, setAd] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [notFound, setNotFound] = useState(false);
+
+    useEffect(() => {
+        setLoading(true);
+        setNotFound(false);
+        api.get(`/client/advertisements/uuid/${uuid}`)
+            .then(({ data }) => setAd(data?.data?.data ?? null))
+            .catch(() => setNotFound(true))
+            .finally(() => setLoading(false));
+    }, [uuid]);
+
+    if (loading) {
+        return (
+            <div className="my-20 lg:container lg:mx-auto max-w-3xl px-4 space-y-4">
+                <Skeleton className="h-8 w-2/3" />
+                <Skeleton className="h-56 w-full rounded-lg" />
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-5/6" />
+            </div>
+        );
+    }
+
+    if (notFound || !ad) {
+        return (
+            <div className="my-20 lg:container lg:mx-auto max-w-3xl px-4 flex flex-col items-center text-center gap-3 py-16">
+                <Megaphone className="size-8 text-muted-foreground" />
+                <p className="font-medium">This advertisement is no longer available.</p>
+                <Button variant="outline" onClick={() => navigate(-1)}>
+                    <ArrowLeft className="size-4" /> Go back
+                </Button>
+            </div>
+        );
+    }
+
+    const page = ad.landing_page ?? {};
+    const imageSrc = resolveAssetSrc(ad.image) || ad.image_url || null;
+    const links = Array.isArray(page.links) ? page.links : [];
+
+    return (
+        <div className="my-20 lg:container lg:mx-auto max-w-3xl px-4 space-y-6 pb-16">
+            <PageMeta title={page.title ? `${page.title} - STARR` : undefined} description={page.description} />
+
+            <Button variant="ghost" size="sm" className="w-fit -ml-2" onClick={() => navigate(-1)}>
+                <ArrowLeft className="size-4" /> Back
+            </Button>
+
+            {imageSrc && (
+                <div className="rounded-lg overflow-hidden border h-56 sm:h-72">
+                    <img src={imageSrc} alt={page.title || ad.headline || "Advertisement"} className="w-full h-full object-cover" />
+                </div>
+            )}
+
+            <div className="space-y-2">
+                <h1 className="text-2xl sm:text-3xl font-bold tracking-tight">{page.title || ad.headline || "Advertisement"}</h1>
+                {page.description && <p className="text-muted-foreground text-lg">{page.description}</p>}
+            </div>
+
+            {page.body && (
+                <div className="prose prose-sm sm:prose max-w-none dark:prose-invert whitespace-pre-wrap">
+                    {page.body}
+                </div>
+            )}
+
+            {links.length > 0 && (
+                <div className="flex flex-wrap gap-2 pt-2">
+                    {links.map((l, i) => (
+                        <Button
+                            key={i}
+                            variant={i === 0 ? "default" : "outline"}
+                            onClick={() => {
+                                if (!l.link) return;
+                                if (/^https?:\/\//.test(l.link)) window.open(l.link, "_blank", "noopener,noreferrer");
+                                else navigate(l.link);
+                            }}
+                        >
+                            {l.label || l.link}
+                        </Button>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}

src/modules/client/pages/CourseDetails.jsx

@@ -29,7 +29,6 @@ import { toast } from "sonner";
 import { resolveTierBadge } from "@/utils/tierBadge.util";
 import { useClientAdvertisements } from "@/contexts/ClientAdvertisementContext";
 import { Banner, BannerSkeleton } from "@/components/generic/Blocks/Client/Advertisements/Banner";
-import { Sidebar, SidebarSkeleton } from "@/components/generic/Blocks/Client/Advertisements/Sidebar";
 import { Tags } from "lucide-react";
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -542,13 +541,12 @@ const CourseDetails = () => {
         getMyTier();
         getCourse(courseId);
         fetchCourseProgress(courseId);
-        getActiveAdvertisements(["course_details.banner", "course_details.sidebar"]);
+        getActiveAdvertisements(["course_details.banner"]);
         return () => { resetCourse(); resetProgress(); setBadgeImageUrl(null); };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [courseId]);
 
     const bannerAd = advertisements["course_details.banner"] ?? null;
-    const sidebarAd = advertisements["course_details.sidebar"] ?? null;
 
     // Resolve badge image once course loads — issue a client stream token for
     // private S3 assets so the badge preview works on this page.
@@ -714,65 +712,54 @@ const CourseDetails = () => {
 
                         {/* Body */}
                         <div className="lg:container lg:mx-auto flex flex-col gap-6 xs:px-3 xs:-mt-5 lg:-mt-0">
-                            <div className="flex flex-col lg:flex-row gap-8">
+                            <div className="flex flex-col xs:gap-12 lg:gap-12 flex-1 min-w-0">
-                                <div className="flex flex-col xs:gap-12 lg:gap-12 flex-1 min-w-0">
+                                <div className="space-y-4">
-                                    <div className="space-y-4">
+                                    <div className="font-bold text-2xl">About this course</div>
-                                        <div className="font-bold text-2xl">About this course</div>
+                                    <div className="max-w-3xl space-y-4 text-muted-foreground lg:text-lg">
-                                        <div className="max-w-3xl space-y-4 text-muted-foreground lg:text-lg">
+                                        <p>{course?.description ?? ""}</p>
-                                            <p>{course?.description ?? ""}</p>
-                                        </div>
                                     </div>
-
-
-                                    {/* Objectives */}
-                                    <div className="space-y-4">
-                                        {course?.objectives?.length > 0 && (
-                                            <div className="space-y-4">
-                                                <div className="font-bold text-2xl">What you will learn</div>
-                                                <ul className="max-w-3xl list-disc list-inside space-y-1 lg:text-lg text-muted-foreground">
-                                                    {course.objectives.map((obj) => (
-                                                        <li key={obj.objective_id}>{obj.text}</li>
-                                                    ))}
-                                                </ul>
-                                            </div>
-                                        )}
-                                    </div>
-
-
-                                    {/* Units — while content isn't ready, only Rewards is shown */}
-                                    <div className="space-y-4">
-                                        {course?.units?.length > 0 && (
-                                            <>
-                                                <div className="font-bold text-2xl">
-                                                    {contentNotReady ? "Rewards" : "Course content"}
-                                                </div>
-                                                <CourseUnits
-                                                    units={course.units}
-                                                    courseId={courseId}
-                                                    courseTitle={course.title}
-                                                    courseLevel={course.level}
-                                                    badgeColor={course.badge_color ?? "purple"}
-                                                    badgeImageUrl={badgeImageUrl}
-                                                    isCompleted={isCompleted}
-                                                    pendingCert={course.pending_certificate ?? null}
-                                                    certificate={course.certificate ?? null}
-                                                    assessment={course.assessment ?? null}
-                                                    contentNotReady={contentNotReady}
-                                                />
-                                            </>
-                                        )}
-                                    </div>
-
                                 </div>
 
-                                {/* Advertisement Sidebar */}
+
-                                <aside className="hidden lg:block w-72 shrink-0 sticky top-36 h-fit">
+                                {/* Objectives */}
-                                    {adLoading["course_details.sidebar"] ? (
+                                <div className="space-y-4">
-                                        <SidebarSkeleton />
+                                    {course?.objectives?.length > 0 && (
-                                    ) : (
+                                        <div className="space-y-4">
-                                        <Sidebar ad={sidebarAd} onCtaClick={handleAdCtaClick} />
+                                            <div className="font-bold text-2xl">What you will learn</div>
+                                            <ul className="max-w-3xl list-disc list-inside space-y-1 lg:text-lg text-muted-foreground">
+                                                {course.objectives.map((obj) => (
+                                                    <li key={obj.objective_id}>{obj.text}</li>
+                                                ))}
+                                            </ul>
+                                        </div>
                                     )}
-                                </aside>
+                                </div>
+
+
+                                {/* Units — while content isn't ready, only Rewards is shown */}
+                                <div className="space-y-4">
+                                    {course?.units?.length > 0 && (
+                                        <>
+                                            <div className="font-bold text-2xl">
+                                                {contentNotReady ? "Rewards" : "Course content"}
+                                            </div>
+                                            <CourseUnits
+                                                units={course.units}
+                                                courseId={courseId}
+                                                courseTitle={course.title}
+                                                courseLevel={course.level}
+                                                badgeColor={course.badge_color ?? "purple"}
+                                                badgeImageUrl={badgeImageUrl}
+                                                isCompleted={isCompleted}
+                                                pendingCert={course.pending_certificate ?? null}
+                                                certificate={course.certificate ?? null}
+                                                assessment={course.assessment ?? null}
+                                                contentNotReady={contentNotReady}
+                                            />
+                                        </>
+                                    )}
+                                </div>
+
                             </div>
                         </div>
                     </div>

src/modules/client/pages/CourseList.jsx

@@ -18,8 +18,6 @@ import { useDateFormat } from "@/hooks/useDateFormat";
 import api from "@/utils/api.util";
 import { resolveTierBadge } from "@/utils/tierBadge.util";
 import { Building2 } from "lucide-react";
-import { useClientAdvertisements } from "@/contexts/ClientAdvertisementContext";
-import { Banner, BannerSkeleton } from "@/components/generic/Blocks/Client/Advertisements/Banner";
 import { GitBranch } from "lucide-react";
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -166,7 +164,6 @@ const CoursesList = () => {
     const navigate = useNavigate();
     const { courses, coursesLoading, getCourses } = useClientCourses();
     const { fmtCurrency } = useDateFormat();
-    const { advertisements, loading: adLoading, getActiveAdvertisement, handleAdCtaClick } = useClientAdvertisements();
 
     const [tierCategories, setTierCategories] = useState([]);
     const [currentPage, setCurrentPage] = useState(1);
@@ -187,12 +184,9 @@ const CoursesList = () => {
         api.get("/client/courses/categories")
             .then(({ data }) => setAllCategories(data.data ?? []))
             .catch(() => { });
-        getActiveAdvertisement("course_list.banner");
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const bannerAd = advertisements["course_list.banner"] ?? null;
-
     // slug → category info map
     const tierMap = useMemo(() => {
         const m = {};
@@ -306,13 +300,6 @@ const CoursesList = () => {
                         </div>
                     </div>
 
-                    {/* Advertisement Banner */}
-                    {adLoading["course_list.banner"] ? (
-                        <BannerSkeleton />
-                    ) : (
-                        <Banner ad={bannerAd} onCtaClick={handleAdCtaClick} />
-                    )}
-
                     {categoryFilter !== "All" && (
                         <div className="flex items-center flex-wrap gap-2">
                             <span className="text-sm text-muted-foreground">Tags:</span>

src/modules/client/pages/Dashboard.jsx

@@ -26,7 +26,6 @@ import { cn } from "@/lib/utils";
 import { useGroup } from "@/contexts/ClientGroupContext";
 import { useClientAdvertisements } from "@/contexts/ClientAdvertisementContext";
 import { Hero, HeroSkeleton } from "@/components/generic/Blocks/Client/Advertisements/Hero";
-import { Popup } from "@/components/generic/Blocks/Client/Advertisements/Popup";
 
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -214,9 +213,8 @@ const Client = () => {
     const { myTier, getMyTier, tierMap } = useClientTiers();
     const { groups, fetchGroups, loading: groupLoading } = useGroup();
     const {
-        advertisements, getActiveAdvertisements,
         adLists, listLoading, getActiveAdvertisementList,
-        handleAdCtaClick, dismissPopupForever,
+        handleAdCtaClick,
     } = useClientAdvertisements();
 
     const [modalOpen, setModalOpen] = useState(false);
@@ -228,12 +226,9 @@ const Client = () => {
     const [lessonModalOpen, setLessonModalOpen] = useState(false);
     const [selectedLesson, setSelectedLesson] = useState(null);
 
-    const [popupOpen, setPopupOpen] = useState(false);
-
     const userTier = myTier?.tier ?? "free";
 
     const heroAds = adLists["dashboard.hero"] ?? [];
-    const popupAd = advertisements["dashboard.popup"] ?? null;
 
     // Show welcome toast on first registration
     useEffect(() => {
@@ -256,11 +251,8 @@ const Client = () => {
         fetchGroups();
     }, [])
 
-    // ── Resolve active popup ad + hero ad carousel once on mount ─────────────
+    // ── Resolve hero ad carousel once on mount ────────────────────────────────
     useEffect(() => {
-        getActiveAdvertisements(["dashboard.popup"]).then((result) => {
-            if (result["dashboard.popup"]) setPopupOpen(true);
-        });
         getActiveAdvertisementList("dashboard.hero");
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -387,6 +379,7 @@ const Client = () => {
                                     <UnitCard
                                         key={unit.unit_id}
                                         unit={unit}
+                                        tierMap={tierMap}
                                         onViewDetails={handleViewUnitDetails}
                                     />
                                 ))}
@@ -415,6 +408,7 @@ const Client = () => {
                                     <LessonCard
                                         key={lesson.lesson_id}
                                         lesson={lesson}
+                                        tierMap={tierMap}
                                         onViewDetails={handleViewLessonDetails}
                                     />
                                 ))}
@@ -425,15 +419,6 @@ const Client = () => {
                 </div>
             </div>
 
-            {/* ── Popup Advertisement ── */}
-            <Popup
-                ad={popupAd}
-                open={popupOpen}
-                onOpenChange={setPopupOpen}
-                onCtaClick={handleAdCtaClick}
-                onDismissForever={dismissPopupForever}
-            />
-
             {/* ── Upsell Modal — only for locked courses ── */}
             <ResponsiveModal
                 open={modalOpen}

src/modules/client/pages/LessonsList.jsx

@@ -179,6 +179,7 @@ const LessonsList = () => {
                                 <LessonCard
                                     key={lesson.lesson_id}
                                     lesson={lesson}
+                                    tierMap={tierMap}
                                     onViewDetails={handleViewDetails}
                                 />
                             ))}

src/modules/client/pages/PlanList.jsx

@@ -356,11 +356,11 @@ export default function PlanList() {
         getPlans();
         getMyTier();
         getTierCategories();
-        getActiveAdvertisement("plans.banner");
+        getActiveAdvertisement("tier_plans.banner");
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [getPlans, getMyTier]);
 
-    const bannerAd = advertisements["plans.banner"] ?? null;
+    const bannerAd = advertisements["tier_plans.banner"] ?? null;
 
     useEffect(() => {
         clearInterval(refundTimerRef.current);
@@ -406,7 +406,7 @@ export default function PlanList() {
                 <div className="lg:container lg:mx-auto space-y-8 p-6">
 
                     {/* Advertisement Banner */}
-                    {adLoading["plans.banner"] ? (
+                    {adLoading["tier_plans.banner"] ? (
                         <BannerSkeleton />
                     ) : (
                         <Banner ad={bannerAd} onCtaClick={handleAdCtaClick} />

src/modules/client/pages/UnitsList.jsx

@@ -179,6 +179,7 @@ const UnitsList = () => {
                                 <UnitCard
                                     key={unit.unit_id}
                                     unit={unit}
+                                    tierMap={tierMap}
                                     onViewDetails={handleViewDetails}
                                 />
                             ))}

src/modules/client/routes/ClientRoutes.jsx

@@ -25,6 +25,7 @@ import MyCertificates from '../pages/MyCertificates'
 import MyAchievements from '../pages/MyAchievements'
 import AccountSettings from '../pages/AccountSettings'
 import Notifications from '../pages/Notifications'
+import AdvertisementLandingPage from '../pages/AdvertisementLandingPage'
 import IntroPage from '@/modules/auth/pages/Intro'
 import { useAuth } from '@/contexts/AuthContext'
 
@@ -66,6 +67,7 @@ export const ClientRoutes = {
         { path: 'achievements', element: <MyAchievements /> },
         { path: 'settings', element: <AccountSettings /> },
         { path: 'notifications', element: <Notifications /> },
+        { path: 'ads/:uuid', element: <AdvertisementLandingPage /> },
         {
           path: 'plans', element: <Outlet />,
           children: [

src/utils/tierBadge.util.js

@@ -22,3 +22,18 @@ export function tierBadgeClass(colorKey = 'green') {
 export function tierPanelColors(colorKey = 'green') {
     return getTierColor(colorKey).panel;
 }
+
+/**
+ * Picks the lowest-rank (cheapest) tier slug among several access paths —
+ * e.g. a Unit's own subscription plus every course that also unlocks it, or
+ * a Lesson's attached courses. Falls back to 'free' when none are gated.
+ */
+export function cheapestTierSlug(slugs = [], tierMap = {}) {
+    const gated = slugs.filter(Boolean);
+    if (!gated.length) return 'free';
+    return gated.reduce((cheapest, slug) => {
+        const rank = tierMap[slug]?.rank ?? 0;
+        const cheapestRank = tierMap[cheapest]?.rank ?? 0;
+        return rank < cheapestRank ? slug : cheapest;
+    }, gated[0]);
+}

src/utils/tierColors.js

@@ -198,6 +198,32 @@ export const TIER_COLOR_OPTIONS = Object.entries(TIER_COLOR_MAP).map(([key, val]
   swatch: val.swatch,
 }));
 
+/** Darkens (negative percent) or lightens (positive percent) a hex color. */
+export function shadeColor(hex, percent) {
+  const num = parseInt(hex.replace("#", ""), 16);
+  const amt = Math.round(2.55 * percent);
+  const clamp = (v) => Math.max(0, Math.min(255, v));
+  const r = clamp((num >> 16) + amt);
+  const g = clamp(((num >> 8) & 0x00ff) + amt);
+  const b = clamp((num & 0x0000ff) + amt);
+  return "#" + (0x1000000 + r * 0x10000 + g * 0x100 + b).toString(16).slice(1);
+}
+
+// The perceived-brightness formula below underweights blue, so these read as
+// "dark enough for white text" even though they're visually too light for it.
+const FORCE_BLACK_TEXT = new Set(["sky", "blue", "cyan", "teal"]);
+
+/** Returns "#000000" or "#ffffff", whichever reads better on top of the given hex color. */
+export function getContrastText(hex, key) {
+  if (key && FORCE_BLACK_TEXT.has(key)) return "#000000";
+  const num = parseInt(hex.replace("#", ""), 16);
+  const r = (num >> 16) & 0xff;
+  const g = (num >> 8) & 0xff;
+  const b = num & 0xff;
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.6 ? "#000000" : "#ffffff";
+}
+
 /** Fallback when a stored color key is not in the map. */
 const FALLBACK = TIER_COLOR_MAP.purple;