mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
313 lines
17 KiB
React
313 lines
17 KiB
React
// modules/admin/pages/advertisements/AdvertisementList.jsx
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { House, Plus, Search, Megaphone, MousePointerClick, Edit, Trash2, Archive } from "lucide-react";
|
|
|
|
import { useAdvertisements } from "@/contexts/AdminAdvertisementContext";
|
|
import { resolveAssetSrc } from "@/utils/media.util";
|
|
import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
|
|
import { useDateFormat } from "@/hooks/useDateFormat";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
import {
|
|
AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
|
|
AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger,
|
|
} from "@/components/ui/alert-dialog";
|
|
|
|
import { ADVERTISEMENT_TYPES, ADVERTISEMENT_TYPE_MAP, ADVERTISEMENT_FILTERABLE_STATUSES, ADVERTISEMENT_STATUS_MAP } from "@/data/advertisement.data";
|
|
import { PLACEMENT_MAP } from "@/data/placement.data";
|
|
import { TablePagination } from "@/components/generic/Table/TablePagination";
|
|
|
|
const DEFAULT_PAGE_SIZE = 10;
|
|
|
|
export default function AdvertisementList() {
|
|
const navigate = useNavigate();
|
|
const { advertisements, pagination, loading, fetchAdvertisements, archiveAdvertisement } = useAdvertisements();
|
|
|
|
const [typeFilter, setTypeFilter] = useState("all");
|
|
const [statusFilter, setStatusFilter] = useState("all");
|
|
const [searchInput, setSearchInput] = useState("");
|
|
const [search, setSearch] = useState("");
|
|
const [page, setPage] = useState(1);
|
|
const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
|
|
|
|
const buildFilters = () => {
|
|
const filters = [];
|
|
if (typeFilter !== "all") filters.push({ id: "type", value: typeFilter });
|
|
if (statusFilter !== "all") filters.push({ id: "status", value: statusFilter });
|
|
if (search.trim()) filters.push({ id: "headline", value: search.trim() });
|
|
return 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: pageSize, filters: buildFilters() });
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [typeFilter, statusFilter, search, page, pageSize]);
|
|
|
|
const handleTypeFilter = (v) => { setTypeFilter(v); setPage(1); };
|
|
const handleStatusFilter = (v) => { setStatusFilter(v); setPage(1); };
|
|
const runSearch = () => { setSearch(searchInput); setPage(1); };
|
|
const handlePageSizeChange = (size) => { setPageSize(size); setPage(1); };
|
|
|
|
const items = [
|
|
{ label: "Home", icon: <House className="size-4" />, to: "/admin" },
|
|
{ label: "Advertisements" },
|
|
];
|
|
|
|
const total = pagination?.totalRecords ?? advertisements.length;
|
|
const activeCount = advertisements.filter((a) => a.status === "active").length;
|
|
const scheduledCount = advertisements.filter((a) => a.status === "scheduled").length;
|
|
|
|
async function handleArchive(advertisementId) {
|
|
await archiveAdvertisement(advertisementId);
|
|
}
|
|
|
|
return (
|
|
<section className="bg-muted h-full">
|
|
<div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
|
|
<div className="flex flex-col gap-2 my-6 w-full">
|
|
<AppBreadcrumb items={items} />
|
|
</div>
|
|
|
|
<div className="w-full flex flex-col gap-6 pb-10">
|
|
|
|
{/* ── Header ─────────────────────────────────────────────────── */}
|
|
<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 hero and banner placements</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="outline" onClick={() => navigate("/admin/advertisements/archived")}>
|
|
<Archive className="size-4" />
|
|
Archived
|
|
</Button>
|
|
<Button onClick={() => navigate("/admin/advertisements/add")}>
|
|
<Plus className="size-4" />
|
|
New advertisement
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Stat cards ─────────────────────────────────────────────── */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
|
<StatCard label="Total ads" value={total} />
|
|
<StatCard label="Active" value={activeCount} tone="success" />
|
|
<StatCard label="Scheduled" value={scheduledCount} tone="info" />
|
|
</div>
|
|
|
|
{/* ── Filters ────────────────────────────────────────────────── */}
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<Select value={typeFilter} onValueChange={handleTypeFilter}>
|
|
<SelectTrigger className="w-[150px] bg-background">
|
|
<SelectValue placeholder="All types" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All types</SelectItem>
|
|
{ADVERTISEMENT_TYPES.map((t) => (
|
|
<SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Select value={statusFilter} onValueChange={handleStatusFilter}>
|
|
<SelectTrigger className="w-[150px] bg-background">
|
|
<SelectValue placeholder="All statuses" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All statuses</SelectItem>
|
|
{ADVERTISEMENT_FILTERABLE_STATUSES.map((s) => (
|
|
<SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<div className="flex items-center gap-2 flex-1 min-w-[160px]">
|
|
<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") runSearch(); }}
|
|
/>
|
|
</div>
|
|
<Button variant="outline" size="icon" className="shrink-0 bg-background" onClick={runSearch} aria-label="Search">
|
|
<Search className="size-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Grid ───────────────────────────────────────────────────── */}
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-20">
|
|
<Spinner className="size-6" />
|
|
</div>
|
|
) : 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) => (
|
|
<AdvertisementCard
|
|
key={ad.advertisement_id}
|
|
ad={ad}
|
|
onView={() => navigate(`/admin/advertisements/${ad.advertisement_id}/view`)}
|
|
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}
|
|
onPageSizeChange={handlePageSizeChange}
|
|
rowCount={advertisements.length}
|
|
recordLabel="advertisement"
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// ─── Stat card ──────────────────────────────────────────────────────────────
|
|
|
|
function StatCard({ label, value, tone = "default" }) {
|
|
const toneClass = {
|
|
default: "text-foreground",
|
|
success: "text-green-600 dark:text-green-400",
|
|
info: "text-blue-600 dark:text-blue-400",
|
|
muted: "text-muted-foreground",
|
|
}[tone];
|
|
|
|
return (
|
|
<div className="bg-background rounded-lg border p-4">
|
|
<p className="text-sm text-muted-foreground mb-1">{label}</p>
|
|
<p className={`text-2xl font-semibold ${toneClass}`}>{value}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Advertisement card ─────────────────────────────────────────────────────
|
|
|
|
function AdvertisementCard({ ad, onView, onEdit, onArchive }) {
|
|
const { fmtDateTime } = useDateFormat();
|
|
const typeMeta = ADVERTISEMENT_TYPE_MAP[ad.type] ?? {};
|
|
const statusMeta = ADVERTISEMENT_STATUS_MAP[ad.status] ?? {};
|
|
const placementMeta = PLACEMENT_MAP[ad.placement] ?? null;
|
|
const TypeIcon = typeMeta.icon ?? Megaphone;
|
|
|
|
const previewSrc = resolveAssetSrc(ad.image) || ad.image_url || null;
|
|
const isDimmed = ad.status === "expired" || ad.status === "archived";
|
|
|
|
const dateRange = formatDateRange(ad.start_date, ad.end_date, fmtDateTime);
|
|
|
|
return (
|
|
<div className={`bg-background rounded-lg border overflow-hidden flex flex-col ${isDimmed ? "opacity-70" : ""}`}>
|
|
<button
|
|
type="button"
|
|
onClick={onView}
|
|
className="h-32 bg-muted dark:bg-purple-950 relative flex items-center justify-center w-full text-left cursor-pointer"
|
|
aria-label="View advertisement details"
|
|
>
|
|
{previewSrc ? (
|
|
<img src={previewSrc} alt={ad.headline || ad.type} className="w-full h-full object-cover" />
|
|
) : (
|
|
<Megaphone className="size-7" />
|
|
)}
|
|
|
|
<span className={`absolute top-2 left-2 text-xs font-medium px-2 py-0.5 rounded-md ${statusMeta.badgeClass ?? "bg-muted text-muted-foreground"}`}>
|
|
{statusMeta.label ?? ad.status}
|
|
</span>
|
|
<span className="absolute top-2 right-2 flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-md bg-black/55 text-white">
|
|
<TypeIcon className="size-3" />
|
|
{typeMeta.label ?? ad.type}
|
|
</span>
|
|
</button>
|
|
|
|
<div className="p-3 flex flex-col gap-2 flex-1">
|
|
<button type="button" onClick={onView} className="text-left">
|
|
<p className="text-sm font-medium leading-snug truncate hover:underline">{ad.headline || ad.badge_label || "Untitled advertisement"}</p>
|
|
{placementMeta ? (
|
|
<p className="text-xs text-muted-foreground mt-0.5 truncate">{placementMeta.pageLabel} — {placementMeta.slotLabel}</p>
|
|
) : (
|
|
<p className="text-xs text-amber-600 dark:text-amber-400 mt-0.5">Unassigned placement</p>
|
|
)}
|
|
{dateRange && <p className="text-xs text-muted-foreground mt-0.5">{dateRange}</p>}
|
|
</button>
|
|
|
|
<div className="mt-auto flex items-center justify-between text-xs text-muted-foreground pt-2">
|
|
<span className="flex items-center gap-1">
|
|
<MousePointerClick className="size-3.5" />
|
|
{ad.click_count ?? 0} clicks
|
|
</span>
|
|
<div className="flex gap-1">
|
|
<Button variant="ghost" size="icon" className="size-7" onClick={onEdit} aria-label="Edit">
|
|
<Edit className="size-3.5" />
|
|
</Button>
|
|
<AlertDialog>
|
|
<AlertDialogTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="size-7" aria-label="Delete">
|
|
<Trash2 className="size-3.5" />
|
|
</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Archive this advertisement?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
"{ad.headline || ad.badge_label || "This advertisement"}" will be moved to archived advertisements. You can restore it later.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction onClick={onArchive}>Archive</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Empty state ────────────────────────────────────────────────────────────
|
|
|
|
function EmptyState({ onCreate }) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center gap-3 py-20 text-center border rounded-lg bg-background">
|
|
<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 hero or banner placement.</p>
|
|
</div>
|
|
<Button onClick={onCreate}>
|
|
<Plus className="size-4" />
|
|
New advertisement
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Helpers ────────────────────────────────────────────────────────────────
|
|
|
|
function formatDateRange(start, end, fmtDate) {
|
|
if (!start && !end) return null;
|
|
if (start && end) return `${fmtDate(start)} - ${fmtDate(end)}`;
|
|
if (start) return `Starts ${fmtDate(start)}`;
|
|
if (end) return `Ends ${fmtDate(end)}`;
|
|
return null;
|
|
} |