845 lines
30 KiB
TypeScript
845 lines
30 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { api } from "@/lib/api";
|
|
import { formatDate } from "@/lib/utils";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
Plus,
|
|
Pencil,
|
|
Trash2,
|
|
X,
|
|
Image as ImageIcon,
|
|
Copy,
|
|
MoreHorizontal,
|
|
Star,
|
|
Eye,
|
|
EyeOff,
|
|
CheckSquare,
|
|
Square,
|
|
ChevronUp,
|
|
ChevronDown,
|
|
Link as LinkIcon,
|
|
Check,
|
|
} from "lucide-react";
|
|
import { MediaPickerModal } from "@/components/admin/MediaPickerModal";
|
|
|
|
interface Meetup {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
date: string;
|
|
time: string;
|
|
location: string;
|
|
link?: string;
|
|
imageId?: string;
|
|
status: string;
|
|
featured: boolean;
|
|
visibility: string;
|
|
createdAt: string;
|
|
updatedAt: string;
|
|
}
|
|
|
|
interface MeetupForm {
|
|
title: string;
|
|
description: string;
|
|
date: string;
|
|
time: string;
|
|
location: string;
|
|
link: string;
|
|
imageId: string;
|
|
status: string;
|
|
featured: boolean;
|
|
visibility: string;
|
|
}
|
|
|
|
const emptyForm: MeetupForm = {
|
|
title: "",
|
|
description: "",
|
|
date: "",
|
|
time: "",
|
|
location: "",
|
|
link: "",
|
|
imageId: "",
|
|
status: "DRAFT",
|
|
featured: false,
|
|
visibility: "PUBLIC",
|
|
};
|
|
|
|
// Statuses that can be manually set by an admin
|
|
const EDITABLE_STATUS_OPTIONS = ["DRAFT", "PUBLISHED", "CANCELLED"] as const;
|
|
type EditableStatus = (typeof EDITABLE_STATUS_OPTIONS)[number];
|
|
|
|
// Display statuses (includes computed Upcoming/Past from PUBLISHED + date)
|
|
type DisplayStatus = "DRAFT" | "UPCOMING" | "PAST" | "CANCELLED";
|
|
|
|
function getDisplayStatus(meetup: { status: string; date: string }): DisplayStatus {
|
|
if (meetup.status === "CANCELLED") return "CANCELLED";
|
|
if (meetup.status === "DRAFT") return "DRAFT";
|
|
// PUBLISHED (or legacy UPCOMING/PAST values) → derive from date
|
|
if (!meetup.date) return "DRAFT";
|
|
return new Date(meetup.date) > new Date() ? "UPCOMING" : "PAST";
|
|
}
|
|
|
|
const STATUS_LABELS: Record<string, string> = {
|
|
DRAFT: "Draft",
|
|
PUBLISHED: "Published",
|
|
UPCOMING: "Upcoming",
|
|
PAST: "Past",
|
|
CANCELLED: "Cancelled",
|
|
};
|
|
|
|
// Badge styles use the computed display status
|
|
const DISPLAY_STATUS_STYLES: Record<DisplayStatus, string> = {
|
|
DRAFT: "bg-surface-container-highest text-on-surface/60",
|
|
UPCOMING: "bg-green-900/40 text-green-400",
|
|
PAST: "bg-surface-container-highest text-on-surface/40",
|
|
CANCELLED: "bg-red-900/30 text-red-400",
|
|
};
|
|
|
|
function useOutsideClick(ref: React.RefObject<HTMLElement | null>, callback: () => void) {
|
|
useEffect(() => {
|
|
function handleClick(e: MouseEvent) {
|
|
if (ref.current && !ref.current.contains(e.target as Node)) {
|
|
callback();
|
|
}
|
|
}
|
|
document.addEventListener("mousedown", handleClick);
|
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
}, [ref, callback]);
|
|
}
|
|
|
|
function MoreMenu({
|
|
meetup,
|
|
onCopyUrl,
|
|
}: {
|
|
meetup: Meetup;
|
|
onCopyUrl: () => void;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const [copied, setCopied] = useState(false);
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
useOutsideClick(ref, () => setOpen(false));
|
|
|
|
const handleCopy = () => {
|
|
onCopyUrl();
|
|
setCopied(true);
|
|
setTimeout(() => {
|
|
setCopied(false);
|
|
setOpen(false);
|
|
}, 1500);
|
|
};
|
|
|
|
return (
|
|
<div className="relative" ref={ref}>
|
|
<button
|
|
onClick={() => setOpen((v) => !v)}
|
|
className="p-2 rounded-lg hover:bg-surface-container-high text-on-surface/60 hover:text-on-surface transition-colors"
|
|
title="More options"
|
|
>
|
|
<MoreHorizontal size={16} />
|
|
</button>
|
|
{open && (
|
|
<div className="absolute right-0 top-full mt-1 z-50 w-48 bg-surface-container-low border border-surface-container-highest rounded-xl shadow-lg overflow-hidden">
|
|
<button
|
|
onClick={handleCopy}
|
|
className="flex items-center gap-2 w-full px-4 py-3 text-sm text-on-surface/80 hover:bg-surface-container-high hover:text-on-surface transition-colors"
|
|
>
|
|
{copied ? <Check size={14} className="text-green-400" /> : <LinkIcon size={14} />}
|
|
{copied ? "Copied!" : "Copy Event URL"}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StatusDropdown({
|
|
meetup,
|
|
onChange,
|
|
}: {
|
|
meetup: { status: string; date: string };
|
|
onChange: (v: string) => void;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
useOutsideClick(ref, () => setOpen(false));
|
|
|
|
const displayStatus = getDisplayStatus(meetup);
|
|
|
|
return (
|
|
<div className="relative" ref={ref}>
|
|
<button
|
|
onClick={() => setOpen((v) => !v)}
|
|
className={cn(
|
|
"rounded-full px-3 py-1 text-xs font-bold cursor-pointer hover:opacity-80 transition-opacity",
|
|
DISPLAY_STATUS_STYLES[displayStatus]
|
|
)}
|
|
>
|
|
{STATUS_LABELS[displayStatus]}
|
|
</button>
|
|
{open && (
|
|
<div className="absolute left-0 top-full mt-1 z-50 w-36 bg-surface-container-low border border-surface-container-highest rounded-xl shadow-lg overflow-hidden">
|
|
{EDITABLE_STATUS_OPTIONS.map((s) => (
|
|
<button
|
|
key={s}
|
|
onClick={() => {
|
|
onChange(s);
|
|
setOpen(false);
|
|
}}
|
|
className={cn(
|
|
"flex items-center gap-2 w-full px-3 py-2 text-xs font-bold transition-colors hover:bg-surface-container-high",
|
|
meetup.status === s ? "text-on-surface" : "text-on-surface/60"
|
|
)}
|
|
>
|
|
<span className={cn("w-2 h-2 rounded-full", {
|
|
"bg-on-surface/40": s === "DRAFT",
|
|
"bg-green-400": s === "PUBLISHED",
|
|
"bg-red-400": s === "CANCELLED",
|
|
})} />
|
|
{STATUS_LABELS[s]}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function EventsPage() {
|
|
const [meetups, setMeetups] = useState<Meetup[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState("");
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [editingId, setEditingId] = useState<string | null>(null);
|
|
const [form, setForm] = useState<MeetupForm>(emptyForm);
|
|
const [saving, setSaving] = useState(false);
|
|
const [showMediaPicker, setShowMediaPicker] = useState(false);
|
|
const formRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Filters
|
|
const [filterStatus, setFilterStatus] = useState("ALL");
|
|
const [filterCity, setFilterCity] = useState("ALL");
|
|
const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
|
|
|
|
// Bulk selection
|
|
const [selected, setSelected] = useState<Set<string>>(new Set());
|
|
const [bulkLoading, setBulkLoading] = useState(false);
|
|
|
|
const loadMeetups = async () => {
|
|
try {
|
|
const data = await api.getMeetups({ admin: true });
|
|
setMeetups(data as Meetup[]);
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadMeetups();
|
|
}, []);
|
|
|
|
const openCreate = () => {
|
|
setForm(emptyForm);
|
|
setEditingId(null);
|
|
setShowForm(true);
|
|
setTimeout(() => formRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }), 50);
|
|
};
|
|
|
|
const openEdit = (meetup: Meetup) => {
|
|
setForm({
|
|
title: meetup.title,
|
|
description: meetup.description || "",
|
|
date: meetup.date?.split("T")[0] || meetup.date || "",
|
|
time: meetup.time || "",
|
|
location: meetup.location || "",
|
|
link: meetup.link || "",
|
|
imageId: meetup.imageId || "",
|
|
status: meetup.status || "DRAFT",
|
|
featured: meetup.featured || false,
|
|
visibility: meetup.visibility || "PUBLIC",
|
|
});
|
|
setEditingId(meetup.id);
|
|
setShowForm(true);
|
|
setTimeout(() => formRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }), 50);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true);
|
|
setError("");
|
|
try {
|
|
const payload = {
|
|
title: form.title,
|
|
description: form.description,
|
|
date: form.date,
|
|
time: form.time || "00:00",
|
|
location: form.location,
|
|
link: form.link,
|
|
imageId: form.imageId || null,
|
|
status: form.status,
|
|
featured: form.featured,
|
|
visibility: form.visibility,
|
|
};
|
|
|
|
if (editingId) {
|
|
const updated = await api.updateMeetup(editingId, payload);
|
|
setMeetups((prev) => prev.map((m) => (m.id === editingId ? updated : m)));
|
|
} else {
|
|
const created = await api.createMeetup(payload);
|
|
setMeetups((prev) => [...prev, created]);
|
|
}
|
|
setShowForm(false);
|
|
setEditingId(null);
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (!confirm("Delete this meetup?")) return;
|
|
setMeetups((prev) => prev.filter((m) => m.id !== id));
|
|
try {
|
|
await api.deleteMeetup(id);
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
await loadMeetups();
|
|
}
|
|
};
|
|
|
|
const handleDuplicate = async (id: string) => {
|
|
try {
|
|
const dup = await api.duplicateMeetup(id);
|
|
setMeetups((prev) => [dup, ...prev]);
|
|
openEdit(dup);
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
}
|
|
};
|
|
|
|
const handlePatch = async (id: string, patch: Partial<Meetup>) => {
|
|
setMeetups((prev) => prev.map((m) => (m.id === id ? { ...m, ...patch } : m)));
|
|
try {
|
|
await api.updateMeetup(id, patch);
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
await loadMeetups();
|
|
}
|
|
};
|
|
|
|
const handleCopyUrl = (meetup: Meetup) => {
|
|
const origin = typeof window !== "undefined" ? window.location.origin : "";
|
|
navigator.clipboard.writeText(`${origin}/events/${meetup.id}`);
|
|
};
|
|
|
|
const toggleSelect = (id: string) => {
|
|
setSelected((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) next.delete(id);
|
|
else next.add(id);
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const selectAll = () => {
|
|
if (selected.size === filtered.length) {
|
|
setSelected(new Set());
|
|
} else {
|
|
setSelected(new Set(filtered.map((m) => m.id)));
|
|
}
|
|
};
|
|
|
|
const handleBulk = async (action: "delete" | "publish" | "duplicate") => {
|
|
if (selected.size === 0) return;
|
|
if (action === "delete" && !confirm(`Delete ${selected.size} meetup(s)?`)) return;
|
|
setBulkLoading(true);
|
|
try {
|
|
const ids = Array.from(selected);
|
|
if (action === "delete") {
|
|
await api.bulkMeetupAction("delete", ids);
|
|
setMeetups((prev) => prev.filter((m) => !ids.includes(m.id)));
|
|
} else if (action === "publish") {
|
|
await api.bulkMeetupAction("publish", ids);
|
|
setMeetups((prev) => prev.map((m) => (ids.includes(m.id) ? { ...m, status: "PUBLISHED" } : m)));
|
|
} else if (action === "duplicate") {
|
|
const result = await api.bulkMeetupAction("duplicate", ids);
|
|
setMeetups((prev) => [...(result as Meetup[]), ...prev]);
|
|
}
|
|
setSelected(new Set());
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
await loadMeetups();
|
|
} finally {
|
|
setBulkLoading(false);
|
|
}
|
|
};
|
|
|
|
// Derived: unique cities
|
|
const cities = Array.from(new Set(meetups.map((m) => m.location).filter(Boolean))).sort();
|
|
|
|
// Filter tabs use computed display status
|
|
const FILTER_STATUS_OPTIONS: Array<{ value: string; label: string }> = [
|
|
{ value: "ALL", label: "All" },
|
|
{ value: "UPCOMING", label: "Upcoming" },
|
|
{ value: "PAST", label: "Past" },
|
|
{ value: "DRAFT", label: "Draft" },
|
|
{ value: "CANCELLED", label: "Cancelled" },
|
|
];
|
|
|
|
// Filtered + sorted
|
|
const filtered = meetups
|
|
.filter((m) => {
|
|
if (filterStatus !== "ALL" && getDisplayStatus(m) !== filterStatus) return false;
|
|
if (filterCity !== "ALL" && m.location !== filterCity) return false;
|
|
return true;
|
|
})
|
|
.sort((a, b) => {
|
|
const da = a.date || "";
|
|
const db = b.date || "";
|
|
return sortDir === "asc" ? da.localeCompare(db) : db.localeCompare(da);
|
|
});
|
|
|
|
const allSelected = filtered.length > 0 && selected.size === filtered.length;
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[60vh]">
|
|
<div className="text-on-surface/50">Loading meetups...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold text-on-surface">Events</h1>
|
|
<button
|
|
onClick={openCreate}
|
|
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity"
|
|
>
|
|
<Plus size={16} />
|
|
New Event
|
|
</button>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="flex items-center justify-between bg-error-container/20 text-error text-sm px-4 py-3 rounded-lg">
|
|
<span>{error}</span>
|
|
<button onClick={() => setError("")}>
|
|
<X size={14} />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Create / Edit Form */}
|
|
{showForm && (
|
|
<div ref={formRef} className="bg-surface-container-low rounded-xl p-6">
|
|
<div className="flex items-center justify-between mb-5">
|
|
<h2 className="text-lg font-semibold text-on-surface">
|
|
{editingId ? "Edit Event" : "New Event"}
|
|
</h2>
|
|
<button
|
|
onClick={() => setShowForm(false)}
|
|
className="text-on-surface/50 hover:text-on-surface"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<input
|
|
placeholder="Title (e.g. #54 Belgian Bitcoin Embassy Meetup)"
|
|
value={form.title}
|
|
onChange={(e) => setForm({ ...form, title: e.target.value })}
|
|
className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40 md:col-span-2"
|
|
/>
|
|
<input
|
|
placeholder="Location"
|
|
value={form.location}
|
|
onChange={(e) => setForm({ ...form, location: e.target.value })}
|
|
className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40"
|
|
/>
|
|
<input
|
|
type="date"
|
|
value={form.date}
|
|
onChange={(e) => setForm({ ...form, date: e.target.value })}
|
|
className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40"
|
|
/>
|
|
<input
|
|
type="time"
|
|
value={form.time}
|
|
onChange={(e) => setForm({ ...form, time: e.target.value })}
|
|
className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40"
|
|
/>
|
|
<div>
|
|
<label className="text-on-surface/60 text-xs mb-2 block">Status</label>
|
|
<select
|
|
value={form.status}
|
|
onChange={(e) => setForm({ ...form, status: e.target.value })}
|
|
className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40"
|
|
>
|
|
{EDITABLE_STATUS_OPTIONS.map((s) => (
|
|
<option key={s} value={s}>
|
|
{STATUS_LABELS[s]}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-on-surface/60 text-xs mb-2 block">Visibility</label>
|
|
<select
|
|
value={form.visibility}
|
|
onChange={(e) => setForm({ ...form, visibility: e.target.value })}
|
|
className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40"
|
|
>
|
|
<option value="PUBLIC">Public</option>
|
|
<option value="HIDDEN">Hidden</option>
|
|
</select>
|
|
</div>
|
|
<div className="md:col-span-2">
|
|
<label className="text-on-surface/60 text-xs mb-2 block">
|
|
External registration link{" "}
|
|
<span className="text-on-surface/40">(optional)</span>
|
|
</label>
|
|
<input
|
|
placeholder="https://..."
|
|
value={form.link}
|
|
onChange={(e) => setForm({ ...form, link: e.target.value })}
|
|
className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40"
|
|
/>
|
|
</div>
|
|
<textarea
|
|
placeholder="Description"
|
|
value={form.description}
|
|
onChange={(e) => setForm({ ...form, description: e.target.value })}
|
|
rows={3}
|
|
className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40 md:col-span-2"
|
|
/>
|
|
<div className="md:col-span-2">
|
|
<label className="text-on-surface/60 text-xs mb-2 block">
|
|
Event image <span className="text-on-surface/40">(optional)</span>
|
|
</label>
|
|
<div className="flex items-center gap-3">
|
|
{form.imageId && (
|
|
<div className="relative w-20 h-20 rounded-lg overflow-hidden bg-surface-container-highest shrink-0">
|
|
<img
|
|
src={`/media/${form.imageId}?w=200`}
|
|
alt="Selected"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowMediaPicker(true)}
|
|
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-surface-container-highest text-on-surface/70 hover:text-on-surface text-sm transition-colors"
|
|
>
|
|
<ImageIcon size={16} />
|
|
{form.imageId ? "Change Image" : "Select Image"}
|
|
</button>
|
|
{form.imageId && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setForm({ ...form, imageId: "" })}
|
|
className="px-3 py-2 rounded-lg text-error/70 hover:text-error text-sm transition-colors"
|
|
>
|
|
Remove
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 mt-4 pt-4 border-t border-surface-container-highest">
|
|
<label className="flex items-center gap-2 cursor-pointer select-none">
|
|
<input
|
|
type="checkbox"
|
|
checked={form.featured}
|
|
onChange={(e) => setForm({ ...form, featured: e.target.checked })}
|
|
className="hidden"
|
|
/>
|
|
<span
|
|
className={cn(
|
|
"flex items-center gap-1.5 text-sm transition-colors",
|
|
form.featured ? "text-primary" : "text-on-surface/50 hover:text-on-surface"
|
|
)}
|
|
>
|
|
<Star size={15} className={form.featured ? "fill-primary" : ""} />
|
|
Featured
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex gap-3 mt-4">
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving || !form.title || !form.date}
|
|
className="px-6 py-2 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity disabled:opacity-50"
|
|
>
|
|
{saving ? "Saving..." : "Save"}
|
|
</button>
|
|
<button
|
|
onClick={() => setShowForm(false)}
|
|
className="px-6 py-2 rounded-lg bg-surface-container-highest text-on-surface font-semibold text-sm hover:bg-surface-container-high transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{showMediaPicker && (
|
|
<MediaPickerModal
|
|
selectedId={form.imageId || null}
|
|
onSelect={(id) => {
|
|
setForm({ ...form, imageId: id });
|
|
setShowMediaPicker(false);
|
|
}}
|
|
onClose={() => setShowMediaPicker(false)}
|
|
/>
|
|
)}
|
|
|
|
{/* Filters */}
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{/* Status filter */}
|
|
<div className="flex items-center bg-surface-container-low rounded-lg overflow-hidden">
|
|
{FILTER_STATUS_OPTIONS.map(({ value, label }) => (
|
|
<button
|
|
key={value}
|
|
onClick={() => setFilterStatus(value)}
|
|
className={cn(
|
|
"px-3 py-1.5 text-xs font-semibold transition-colors",
|
|
filterStatus === value
|
|
? "bg-primary text-on-primary"
|
|
: "text-on-surface/60 hover:text-on-surface hover:bg-surface-container-high"
|
|
)}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* City filter */}
|
|
{cities.length > 1 && (
|
|
<select
|
|
value={filterCity}
|
|
onChange={(e) => setFilterCity(e.target.value)}
|
|
className="bg-surface-container-low text-on-surface/70 text-xs rounded-lg px-3 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary/40"
|
|
>
|
|
<option value="ALL">All cities</option>
|
|
{cities.map((c) => (
|
|
<option key={c} value={c}>
|
|
{c}
|
|
</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
|
|
{/* Sort */}
|
|
<button
|
|
onClick={() => setSortDir((d) => (d === "asc" ? "desc" : "asc"))}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-on-surface/60 hover:text-on-surface bg-surface-container-low rounded-lg transition-colors"
|
|
>
|
|
{sortDir === "asc" ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
|
|
Date
|
|
</button>
|
|
|
|
<span className="ml-auto text-xs text-on-surface/40">
|
|
{filtered.length} event{filtered.length !== 1 ? "s" : ""}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Bulk action bar */}
|
|
{selected.size > 0 && (
|
|
<div className="flex items-center gap-3 bg-surface-container-low rounded-xl px-4 py-3 border border-primary/20">
|
|
<span className="text-sm text-on-surface/70 font-medium">
|
|
{selected.size} selected
|
|
</span>
|
|
<div className="flex items-center gap-2 ml-auto">
|
|
<button
|
|
onClick={() => handleBulk("duplicate")}
|
|
disabled={bulkLoading}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-lg bg-surface-container-high text-on-surface/70 hover:text-on-surface transition-colors disabled:opacity-50"
|
|
>
|
|
<Copy size={12} />
|
|
Duplicate
|
|
</button>
|
|
<button
|
|
onClick={() => handleBulk("publish")}
|
|
disabled={bulkLoading}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-lg bg-surface-container-high text-on-surface/70 hover:text-on-surface transition-colors disabled:opacity-50"
|
|
>
|
|
Publish
|
|
</button>
|
|
<button
|
|
onClick={() => handleBulk("delete")}
|
|
disabled={bulkLoading}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-lg bg-error-container/20 text-error/70 hover:text-error transition-colors disabled:opacity-50"
|
|
>
|
|
<Trash2 size={12} />
|
|
Delete
|
|
</button>
|
|
<button
|
|
onClick={() => setSelected(new Set())}
|
|
className="ml-1 text-on-surface/40 hover:text-on-surface"
|
|
>
|
|
<X size={14} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Event list */}
|
|
<div className="space-y-2">
|
|
{filtered.length === 0 ? (
|
|
<p className="text-on-surface/50 text-sm py-8 text-center">No events found.</p>
|
|
) : (
|
|
<>
|
|
{/* Select-all row */}
|
|
<div className="flex items-center gap-2 px-2 pb-1">
|
|
<button
|
|
onClick={selectAll}
|
|
className="text-on-surface/40 hover:text-on-surface transition-colors"
|
|
title={allSelected ? "Deselect all" : "Select all"}
|
|
>
|
|
{allSelected ? <CheckSquare size={15} /> : <Square size={15} />}
|
|
</button>
|
|
<span className="text-xs text-on-surface/40">
|
|
{allSelected ? "Deselect all" : "Select all"}
|
|
</span>
|
|
</div>
|
|
|
|
{filtered.map((meetup) => (
|
|
<div
|
|
key={meetup.id}
|
|
className={cn(
|
|
"bg-surface-container-low rounded-xl p-4 flex items-center gap-3 transition-colors",
|
|
selected.has(meetup.id) && "ring-1 ring-primary/30 bg-surface-container"
|
|
)}
|
|
>
|
|
{/* Checkbox */}
|
|
<button
|
|
onClick={() => toggleSelect(meetup.id)}
|
|
className="shrink-0 text-on-surface/40 hover:text-on-surface transition-colors"
|
|
>
|
|
{selected.has(meetup.id) ? (
|
|
<CheckSquare size={16} className="text-primary" />
|
|
) : (
|
|
<Square size={16} />
|
|
)}
|
|
</button>
|
|
|
|
{/* Image */}
|
|
{meetup.imageId ? (
|
|
<div className="w-14 h-14 rounded-lg overflow-hidden bg-surface-container-highest shrink-0">
|
|
<img
|
|
src={`/media/${meetup.imageId}?w=100`}
|
|
alt=""
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="w-14 h-14 rounded-lg bg-surface-container-highest shrink-0 flex items-center justify-center">
|
|
<ImageIcon size={18} className="text-on-surface/20" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Info */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex flex-wrap items-center gap-2 mb-1">
|
|
<h3 className="text-on-surface font-semibold truncate">{meetup.title}</h3>
|
|
{meetup.featured && (
|
|
<Star size={12} className="text-primary fill-primary shrink-0" />
|
|
)}
|
|
{meetup.visibility === "HIDDEN" && (
|
|
<EyeOff size={12} className="text-on-surface/40 shrink-0" />
|
|
)}
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<StatusDropdown
|
|
meetup={meetup}
|
|
onChange={(v) => handlePatch(meetup.id, { status: v })}
|
|
/>
|
|
<span className="text-on-surface/50 text-xs">
|
|
{meetup.date ? formatDate(meetup.date) : "No date"}
|
|
{meetup.location && ` · ${meetup.location}`}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex items-center gap-1 shrink-0">
|
|
{/* Featured toggle */}
|
|
<button
|
|
onClick={() => handlePatch(meetup.id, { featured: !meetup.featured })}
|
|
className={cn(
|
|
"p-2 rounded-lg transition-colors",
|
|
meetup.featured
|
|
? "text-primary hover:text-primary/70"
|
|
: "text-on-surface/30 hover:text-on-surface hover:bg-surface-container-high"
|
|
)}
|
|
title={meetup.featured ? "Unfeature" : "Feature"}
|
|
>
|
|
<Star size={15} className={meetup.featured ? "fill-primary" : ""} />
|
|
</button>
|
|
|
|
{/* Visibility toggle */}
|
|
<button
|
|
onClick={() =>
|
|
handlePatch(meetup.id, {
|
|
visibility: meetup.visibility === "PUBLIC" ? "HIDDEN" : "PUBLIC",
|
|
})
|
|
}
|
|
className={cn(
|
|
"p-2 rounded-lg transition-colors",
|
|
meetup.visibility === "HIDDEN"
|
|
? "text-on-surface/30 hover:text-on-surface hover:bg-surface-container-high"
|
|
: "text-on-surface/60 hover:text-on-surface hover:bg-surface-container-high"
|
|
)}
|
|
title={meetup.visibility === "PUBLIC" ? "Hide event" : "Make public"}
|
|
>
|
|
{meetup.visibility === "HIDDEN" ? <EyeOff size={15} /> : <Eye size={15} />}
|
|
</button>
|
|
|
|
{/* Edit */}
|
|
<button
|
|
onClick={() => openEdit(meetup)}
|
|
className="p-2 rounded-lg hover:bg-surface-container-high text-on-surface/60 hover:text-on-surface transition-colors"
|
|
title="Edit"
|
|
>
|
|
<Pencil size={15} />
|
|
</button>
|
|
|
|
{/* Duplicate */}
|
|
<button
|
|
onClick={() => handleDuplicate(meetup.id)}
|
|
className="p-2 rounded-lg hover:bg-surface-container-high text-on-surface/60 hover:text-on-surface transition-colors"
|
|
title="Duplicate"
|
|
>
|
|
<Copy size={15} />
|
|
</button>
|
|
|
|
{/* Delete */}
|
|
<button
|
|
onClick={() => handleDelete(meetup.id)}
|
|
className="p-2 rounded-lg hover:bg-error-container/30 text-on-surface/60 hover:text-error transition-colors"
|
|
title="Delete"
|
|
>
|
|
<Trash2 size={15} />
|
|
</button>
|
|
|
|
{/* More menu */}
|
|
<MoreMenu meetup={meetup} onCopyUrl={() => handleCopyUrl(meetup)} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|