729 lines
30 KiB
TypeScript
729 lines
30 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
|
||
// API routes now handled by Next.js /api routes (server-side)
|
||
|
||
type MerchantAdminDto = {
|
||
id: number;
|
||
name: string;
|
||
avantlinkMid: string;
|
||
feedUrl: string;
|
||
offerFeedUrl: string | null;
|
||
isActive: boolean;
|
||
lastFullImportAt: string | null;
|
||
lastOfferSyncAt: string | null;
|
||
};
|
||
|
||
// Helper: relative time formatting
|
||
function formatRelativeTime(value: string | null): string {
|
||
if (!value) return "Never";
|
||
const d = new Date(value);
|
||
if (Number.isNaN(d.getTime())) return "Invalid date";
|
||
|
||
const now = Date.now();
|
||
const diff = now - d.getTime();
|
||
const minutes = Math.floor(diff / 60000);
|
||
const hours = Math.floor(diff / 3600000);
|
||
const days = Math.floor(diff / 86400000);
|
||
|
||
if (minutes < 1) return "Just now";
|
||
if (minutes < 60) return `${minutes}m ago`;
|
||
if (hours < 24) return `${hours}h ago`;
|
||
if (days < 30) return `${days}d ago`;
|
||
return d.toLocaleDateString();
|
||
}
|
||
|
||
// Helper: full date formatting for tooltips
|
||
function formatFullDate(value: string | null): string {
|
||
if (!value) return "Never";
|
||
const d = new Date(value);
|
||
if (Number.isNaN(d.getTime())) return value;
|
||
return d.toLocaleString();
|
||
}
|
||
|
||
// Helper: truncate URL for display
|
||
function truncateUrl(url: string | null, maxLength = 40): string {
|
||
if (!url) return "—";
|
||
if (url.length <= maxLength) return url;
|
||
return url.substring(0, maxLength) + "...";
|
||
}
|
||
|
||
// Helper: copy to clipboard
|
||
async function copyToClipboard(text: string) {
|
||
try {
|
||
await navigator.clipboard.writeText(text);
|
||
return true;
|
||
} catch {
|
||
return false;
|
||
}
|
||
}
|
||
|
||
export default function MerchantsAdminPage() {
|
||
const [merchants, setMerchants] = useState<MerchantAdminDto[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [savingId, setSavingId] = useState<number | null>(null);
|
||
const [importingId, setImportingId] = useState<number | null>(null);
|
||
const [offerSyncId, setOfferSyncId] = useState<number | null>(null);
|
||
const [banner, setBanner] = useState<string | null>(null);
|
||
const [copiedUrl, setCopiedUrl] = useState<string | null>(null);
|
||
const [openDropdown, setOpenDropdown] = useState<number | null>(null);
|
||
|
||
// --- new merchant form state ---
|
||
const [showNewMerchantForm, setShowNewMerchantForm] = useState(false);
|
||
const [creating, setCreating] = useState(false);
|
||
const [newMerchant, setNewMerchant] = useState({
|
||
name: "",
|
||
avantlinkMid: "",
|
||
feedUrl: "",
|
||
offerFeedUrl: "",
|
||
isActive: true,
|
||
});
|
||
|
||
// --- load merchants ---
|
||
useEffect(() => {
|
||
const controller = new AbortController();
|
||
|
||
async function loadMerchants() {
|
||
try {
|
||
setLoading(true);
|
||
setError(null);
|
||
|
||
const url = `/api/admin/merchants`;
|
||
console.log("Loading merchants from:", url);
|
||
|
||
const res = await fetch(url, {
|
||
method: "GET",
|
||
headers: { Accept: "application/json" },
|
||
signal: controller.signal,
|
||
});
|
||
|
||
if (!res.ok) {
|
||
const text = await res.text().catch(() => "");
|
||
throw new Error(`HTTP ${res.status} ${res.statusText} – ${text}`);
|
||
}
|
||
|
||
const data: MerchantAdminDto[] = await res.json();
|
||
setMerchants(data);
|
||
} catch (err: any) {
|
||
if (err?.name === "AbortError") return;
|
||
console.error("Error loading merchants", err);
|
||
setError(err?.message ?? "Failed to load merchants");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
|
||
loadMerchants();
|
||
return () => controller.abort();
|
||
}, []);
|
||
|
||
// --- local field editing ---
|
||
const updateMerchantField = <K extends keyof MerchantAdminDto>(
|
||
id: number,
|
||
field: K,
|
||
value: MerchantAdminDto[K]
|
||
) => {
|
||
setMerchants((prev) =>
|
||
prev.map((m) => (m.id === id ? { ...m, [field]: value } : m))
|
||
);
|
||
};
|
||
|
||
// --- copy URL handler ---
|
||
const handleCopyUrl = async (url: string, id: number) => {
|
||
const success = await copyToClipboard(url);
|
||
if (success) {
|
||
setCopiedUrl(`${id}-${url}`);
|
||
setTimeout(() => setCopiedUrl(null), 2000);
|
||
}
|
||
};
|
||
|
||
// --- save merchant (name/feed URLs/isActive) ---
|
||
const handleSave = async (id: number) => {
|
||
const merchant = merchants.find((m) => m.id === id);
|
||
if (!merchant) return;
|
||
|
||
try {
|
||
setSavingId(id);
|
||
setError(null);
|
||
setBanner(null);
|
||
|
||
const res = await fetch(`/api/admin/merchants/${id}`, {
|
||
method: "PUT",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
name: merchant.name,
|
||
avantlinkMid: merchant.avantlinkMid,
|
||
feedUrl: merchant.feedUrl,
|
||
offerFeedUrl: merchant.offerFeedUrl,
|
||
isActive: merchant.isActive,
|
||
}),
|
||
});
|
||
|
||
if (!res.ok) {
|
||
const text = await res.text().catch(() => "");
|
||
console.error("Merchant save failed", res.status, text);
|
||
throw new Error(`Save failed (${res.status})${text ? `: ${text}` : ""}`);
|
||
}
|
||
|
||
const updated: MerchantAdminDto = await res.json();
|
||
setMerchants((prev) => prev.map((m) => (m.id === id ? updated : m)));
|
||
|
||
setBanner("Merchant saved successfully.");
|
||
} catch (e: any) {
|
||
console.error("Error saving merchant", e);
|
||
setError(e?.message ?? "Failed to save merchant");
|
||
} finally {
|
||
setSavingId(null);
|
||
setTimeout(() => setBanner(null), 3000);
|
||
}
|
||
};
|
||
|
||
// --- run full import ---
|
||
const handleRunFullImport = async (id: number) => {
|
||
setOpenDropdown(null);
|
||
try {
|
||
setImportingId(id);
|
||
setError(null);
|
||
setBanner(null);
|
||
|
||
const res = await fetch(`/api/admin/merchants/${id}/import`, {
|
||
method: "POST",
|
||
});
|
||
|
||
if (!res.ok) {
|
||
const text = await res.text().catch(() => "");
|
||
console.error("Full import failed", res.status, text);
|
||
throw new Error(`Import failed (${res.status})${text ? `: ${text}` : ""}`);
|
||
}
|
||
|
||
setBanner("Full import started successfully.");
|
||
} catch (e: any) {
|
||
console.error("Error starting full import", e);
|
||
setError(e?.message ?? "Failed to start full import");
|
||
} finally {
|
||
setImportingId(null);
|
||
setTimeout(() => setBanner(null), 3000);
|
||
}
|
||
};
|
||
|
||
// --- run offer sync ---
|
||
const handleRunOfferSync = async (id: number) => {
|
||
setOpenDropdown(null);
|
||
try {
|
||
setOfferSyncId(id);
|
||
setError(null);
|
||
setBanner(null);
|
||
|
||
const res = await fetch(
|
||
`/api/admin/merchants/${id}/offer-sync`,
|
||
{ method: "POST" }
|
||
);
|
||
|
||
if (!res.ok) {
|
||
const text = await res.text().catch(() => "");
|
||
console.error("Offer sync failed", res.status, text);
|
||
throw new Error(
|
||
`Offer sync failed (${res.status})${text ? `: ${text}` : ""}`
|
||
);
|
||
}
|
||
|
||
setBanner("Offer sync started successfully.");
|
||
} catch (e: any) {
|
||
console.error("Error starting offer sync", e);
|
||
setError(e?.message ?? "Failed to start offer sync");
|
||
} finally {
|
||
setOfferSyncId(null);
|
||
setTimeout(() => setBanner(null), 3000);
|
||
}
|
||
};
|
||
|
||
// --- create new merchant ---
|
||
const handleCreateMerchant = async () => {
|
||
try {
|
||
setCreating(true);
|
||
setError(null);
|
||
setBanner(null);
|
||
|
||
const res = await fetch(`/api/admin/merchants`, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
name: newMerchant.name,
|
||
avantlinkMid: newMerchant.avantlinkMid,
|
||
feedUrl: newMerchant.feedUrl,
|
||
offerFeedUrl: newMerchant.offerFeedUrl || null,
|
||
isActive: newMerchant.isActive,
|
||
}),
|
||
});
|
||
|
||
if (!res.ok) {
|
||
const text = await res.text().catch(() => "");
|
||
console.error("Merchant creation failed", res.status, text);
|
||
throw new Error(
|
||
`Creation failed (${res.status})${text ? `: ${text}` : ""}`
|
||
);
|
||
}
|
||
|
||
const created: MerchantAdminDto = await res.json();
|
||
setMerchants((prev) => [...prev, created]);
|
||
|
||
// Reset form
|
||
setNewMerchant({
|
||
name: "",
|
||
avantlinkMid: "",
|
||
feedUrl: "",
|
||
offerFeedUrl: "",
|
||
isActive: true,
|
||
});
|
||
setShowNewMerchantForm(false);
|
||
|
||
setBanner("Merchant created successfully.");
|
||
} catch (e: any) {
|
||
console.error("Error creating merchant", e);
|
||
setError(e?.message ?? "Failed to create merchant");
|
||
} finally {
|
||
setCreating(false);
|
||
setTimeout(() => setBanner(null), 3000);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<main className="min-h-screen bg-black text-zinc-50">
|
||
<div className="mx-auto max-w-7xl px-4 py-6 lg:py-10">
|
||
{/* Header */}
|
||
<header className="mb-6 flex items-center justify-between gap-4">
|
||
<div>
|
||
<p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
|
||
Shadow Standard
|
||
</p>
|
||
<h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
|
||
Merchant Feeds <span className="text-amber-300">Admin</span>
|
||
</h1>
|
||
<p className="mt-2 text-sm text-zinc-400 max-w-2xl">
|
||
Manage your AvantLink merchants, product feed URLs, and offer sync
|
||
settings. Use this to onboard new merchants and keep feeds fresh
|
||
without touching SQL.
|
||
</p>
|
||
</div>
|
||
</header>
|
||
|
||
{/* Status banners */}
|
||
{banner && (
|
||
<div className="mb-4 rounded-md border border-emerald-500/40 bg-emerald-500/10 px-3 py-2 text-sm text-emerald-200">
|
||
{banner}
|
||
</div>
|
||
)}
|
||
{error && (
|
||
<div className="mb-4 rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
{/* Add New Merchant Section */}
|
||
<section className="mb-6 rounded-lg border border-zinc-800 bg-zinc-950/70 p-4">
|
||
{!showNewMerchantForm ? (
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowNewMerchantForm(true)}
|
||
className="inline-flex items-center gap-2 rounded-md bg-amber-400 px-4 py-2 text-sm font-semibold text-black hover:bg-amber-300 transition-colors"
|
||
>
|
||
<span className="text-lg">+</span>
|
||
Add New Merchant
|
||
</button>
|
||
) : (
|
||
<div>
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h2 className="text-lg font-semibold text-zinc-100">
|
||
Add New Merchant
|
||
</h2>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setShowNewMerchantForm(false);
|
||
setNewMerchant({
|
||
name: "",
|
||
avantlinkMid: "",
|
||
feedUrl: "",
|
||
offerFeedUrl: "",
|
||
isActive: true,
|
||
});
|
||
}}
|
||
className="text-zinc-400 hover:text-zinc-200 text-sm"
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-xs font-medium text-zinc-400 mb-1">
|
||
Merchant Name *
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={newMerchant.name}
|
||
onChange={(e) =>
|
||
setNewMerchant((prev) => ({ ...prev, name: e.target.value }))
|
||
}
|
||
placeholder="e.g., Brownells"
|
||
className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-50 placeholder:text-zinc-600 focus:border-amber-400/70 focus:outline-none focus:ring-0"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-medium text-zinc-400 mb-1">
|
||
AvantLink MID *
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={newMerchant.avantlinkMid}
|
||
onChange={(e) =>
|
||
setNewMerchant((prev) => ({
|
||
...prev,
|
||
avantlinkMid: e.target.value,
|
||
}))
|
||
}
|
||
placeholder="e.g., 12345"
|
||
className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-50 placeholder:text-zinc-600 focus:border-amber-400/70 focus:outline-none focus:ring-0"
|
||
/>
|
||
</div>
|
||
|
||
<div className="md:col-span-2">
|
||
<label className="block text-xs font-medium text-zinc-400 mb-1">
|
||
Feed URL *
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={newMerchant.feedUrl}
|
||
onChange={(e) =>
|
||
setNewMerchant((prev) => ({ ...prev, feedUrl: e.target.value }))
|
||
}
|
||
placeholder="https://..."
|
||
className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-50 placeholder:text-zinc-600 focus:border-amber-400/70 focus:outline-none focus:ring-0"
|
||
/>
|
||
</div>
|
||
|
||
<div className="md:col-span-2">
|
||
<label className="block text-xs font-medium text-zinc-400 mb-1">
|
||
Offer Feed URL (optional)
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={newMerchant.offerFeedUrl}
|
||
onChange={(e) =>
|
||
setNewMerchant((prev) => ({
|
||
...prev,
|
||
offerFeedUrl: e.target.value,
|
||
}))
|
||
}
|
||
placeholder="https://..."
|
||
className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-50 placeholder:text-zinc-600 focus:border-amber-400/70 focus:outline-none focus:ring-0"
|
||
/>
|
||
</div>
|
||
|
||
<div className="md:col-span-2">
|
||
<label className="inline-flex items-center gap-2 text-sm text-zinc-300">
|
||
<input
|
||
type="checkbox"
|
||
checked={newMerchant.isActive}
|
||
onChange={(e) =>
|
||
setNewMerchant((prev) => ({
|
||
...prev,
|
||
isActive: e.target.checked,
|
||
}))
|
||
}
|
||
className="h-4 w-4 rounded border-zinc-600 bg-zinc-900 text-amber-400 focus:ring-amber-400"
|
||
/>
|
||
Active
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4 flex gap-3">
|
||
<button
|
||
type="button"
|
||
onClick={handleCreateMerchant}
|
||
disabled={
|
||
creating ||
|
||
!newMerchant.name ||
|
||
!newMerchant.avantlinkMid ||
|
||
!newMerchant.feedUrl
|
||
}
|
||
className={`rounded-md px-4 py-2 text-sm font-semibold transition-colors ${
|
||
creating ||
|
||
!newMerchant.name ||
|
||
!newMerchant.avantlinkMid ||
|
||
!newMerchant.feedUrl
|
||
? "bg-amber-400/20 text-amber-200 cursor-not-allowed"
|
||
: "bg-amber-400 text-black hover:bg-amber-300"
|
||
}`}
|
||
>
|
||
{creating ? "Creating…" : "Create Merchant"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</section>
|
||
|
||
{/* Improved Table */}
|
||
<section className="rounded-lg border border-zinc-800 bg-zinc-950/70 overflow-hidden">
|
||
{loading ? (
|
||
<p className="text-sm text-zinc-500 p-4">Loading merchants…</p>
|
||
) : merchants.length === 0 ? (
|
||
<p className="text-sm text-zinc-500 p-4">
|
||
No merchants found. Use the "Add New Merchant" button above.
|
||
</p>
|
||
) : (
|
||
<div className="overflow-x-auto">
|
||
<table className="min-w-full text-left text-sm">
|
||
<thead className="sticky top-0 bg-zinc-950/95 backdrop-blur-sm">
|
||
<tr className="border-b border-zinc-800 text-xs uppercase tracking-[0.16em] text-zinc-500">
|
||
<th className="py-3 px-4 font-medium">Merchant</th>
|
||
<th className="py-3 px-4 font-medium">MID</th>
|
||
<th className="py-3 px-4 font-medium">Feed URL</th>
|
||
<th className="py-3 px-4 font-medium">Offer URL</th>
|
||
<th className="py-3 px-4 font-medium">Status</th>
|
||
<th className="py-3 px-4 font-medium">Last Import</th>
|
||
<th className="py-3 px-4 font-medium text-right">Actions</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody className="divide-y divide-zinc-800/50">
|
||
{merchants.map((m) => (
|
||
<tr key={m.id} className="hover:bg-zinc-900/30 transition-colors">
|
||
{/* Merchant Name */}
|
||
<td className="py-3 px-4">
|
||
<input
|
||
type="text"
|
||
value={m.name}
|
||
onChange={(e) =>
|
||
updateMerchantField(m.id, "name", e.target.value)
|
||
}
|
||
className="w-full min-w-[140px] rounded border border-zinc-700 bg-zinc-900 px-2 py-1.5 text-sm font-medium text-zinc-50 focus:border-amber-400/70 focus:outline-none focus:ring-0"
|
||
/>
|
||
</td>
|
||
|
||
{/* AvantLink MID */}
|
||
<td className="py-3 px-4">
|
||
<input
|
||
type="text"
|
||
value={m.avantlinkMid}
|
||
onChange={(e) =>
|
||
updateMerchantField(m.id, "avantlinkMid", e.target.value)
|
||
}
|
||
className="w-full min-w-[80px] rounded border border-zinc-700 bg-zinc-900 px-2 py-1.5 text-xs font-mono text-zinc-50 focus:border-amber-400/70 focus:outline-none focus:ring-0"
|
||
/>
|
||
</td>
|
||
|
||
{/* Feed URL with copy button */}
|
||
<td className="py-3 px-4">
|
||
<div className="flex items-center gap-2">
|
||
<input
|
||
type="text"
|
||
value={m.feedUrl ?? ""}
|
||
onChange={(e) =>
|
||
updateMerchantField(m.id, "feedUrl", e.target.value)
|
||
}
|
||
title={m.feedUrl ?? ""}
|
||
className="flex-1 min-w-[180px] rounded border border-zinc-700 bg-zinc-900 px-2 py-1.5 text-xs font-mono text-zinc-50 focus:border-amber-400/70 focus:outline-none focus:ring-0"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={() => handleCopyUrl(m.feedUrl, m.id)}
|
||
className="flex-shrink-0 p-1.5 rounded hover:bg-zinc-800 transition-colors text-zinc-400 hover:text-zinc-200"
|
||
title="Copy URL"
|
||
>
|
||
{copiedUrl === `${m.id}-${m.feedUrl}` ? (
|
||
<svg className="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
) : (
|
||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||
</svg>
|
||
)}
|
||
</button>
|
||
</div>
|
||
</td>
|
||
|
||
{/* Offer Feed URL with copy button */}
|
||
<td className="py-3 px-4">
|
||
<div className="flex items-center gap-2">
|
||
<input
|
||
type="text"
|
||
value={m.offerFeedUrl ?? ""}
|
||
onChange={(e) =>
|
||
updateMerchantField(m.id, "offerFeedUrl", e.target.value || null)
|
||
}
|
||
placeholder="—"
|
||
title={m.offerFeedUrl ?? "None"}
|
||
className="flex-1 min-w-[180px] rounded border border-zinc-700 bg-zinc-900 px-2 py-1.5 text-xs font-mono text-zinc-50 placeholder:text-zinc-600 focus:border-amber-400/70 focus:outline-none focus:ring-0"
|
||
/>
|
||
{m.offerFeedUrl && (
|
||
<button
|
||
type="button"
|
||
onClick={() => handleCopyUrl(m.offerFeedUrl!, m.id)}
|
||
className="flex-shrink-0 p-1.5 rounded hover:bg-zinc-800 transition-colors text-zinc-400 hover:text-zinc-200"
|
||
title="Copy URL"
|
||
>
|
||
{copiedUrl === `${m.id}-${m.offerFeedUrl}` ? (
|
||
<svg className="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
) : (
|
||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||
</svg>
|
||
)}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</td>
|
||
|
||
{/* Status Badge (replacing checkbox) */}
|
||
<td className="py-3 px-4">
|
||
<button
|
||
type="button"
|
||
onClick={() =>
|
||
updateMerchantField(m.id, "isActive", !m.isActive)
|
||
}
|
||
className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${
|
||
m.isActive
|
||
? "bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20"
|
||
: "bg-zinc-700/50 text-zinc-400 hover:bg-zinc-700"
|
||
}`}
|
||
>
|
||
<span
|
||
className={`w-1.5 h-1.5 rounded-full ${
|
||
m.isActive ? "bg-emerald-400" : "bg-zinc-500"
|
||
}`}
|
||
/>
|
||
{m.isActive ? "Active" : "Inactive"}
|
||
</button>
|
||
</td>
|
||
|
||
{/* Last Import with tooltip */}
|
||
<td className="py-3 px-4">
|
||
<div className="flex flex-col gap-0.5">
|
||
<span
|
||
className="text-xs text-zinc-400"
|
||
title={`Full: ${formatFullDate(m.lastFullImportAt)}`}
|
||
>
|
||
{formatRelativeTime(m.lastFullImportAt)}
|
||
</span>
|
||
<span
|
||
className="text-[10px] text-zinc-500"
|
||
title={`Offers: ${formatFullDate(m.lastOfferSyncAt)}`}
|
||
>
|
||
Offers: {formatRelativeTime(m.lastOfferSyncAt)}
|
||
</span>
|
||
</div>
|
||
</td>
|
||
|
||
{/* Actions Dropdown */}
|
||
<td className="py-3 px-4">
|
||
<div className="flex items-center justify-end gap-2">
|
||
{/* Primary Save Button */}
|
||
<button
|
||
type="button"
|
||
onClick={() => handleSave(m.id)}
|
||
disabled={savingId === m.id}
|
||
className={`rounded px-3 py-1.5 text-xs font-medium transition-colors ${
|
||
savingId === m.id
|
||
? "bg-amber-400/20 text-amber-200 cursor-wait"
|
||
: "bg-amber-400 text-black hover:bg-amber-300"
|
||
}`}
|
||
>
|
||
{savingId === m.id ? (
|
||
<span className="flex items-center gap-1">
|
||
<svg className="animate-spin h-3 w-3" fill="none" viewBox="0 0 24 24">
|
||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||
</svg>
|
||
Saving
|
||
</span>
|
||
) : (
|
||
"Save"
|
||
)}
|
||
</button>
|
||
|
||
{/* Dropdown Menu */}
|
||
<div className="relative">
|
||
<button
|
||
type="button"
|
||
onClick={() =>
|
||
setOpenDropdown(openDropdown === m.id ? null : m.id)
|
||
}
|
||
className="p-1.5 rounded hover:bg-zinc-800 transition-colors text-zinc-400 hover:text-zinc-200"
|
||
title="More actions"
|
||
>
|
||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
|
||
</svg>
|
||
</button>
|
||
|
||
{openDropdown === m.id && (
|
||
<>
|
||
<div
|
||
className="fixed inset-0 z-10"
|
||
onClick={() => setOpenDropdown(null)}
|
||
/>
|
||
<div className="absolute right-0 mt-1 w-48 rounded-md border border-zinc-700 bg-zinc-900 shadow-lg z-20">
|
||
<div className="py-1">
|
||
<button
|
||
type="button"
|
||
onClick={() => handleRunFullImport(m.id)}
|
||
disabled={importingId === m.id}
|
||
className="w-full text-left px-3 py-2 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-white transition-colors disabled:opacity-50 disabled:cursor-wait"
|
||
>
|
||
{importingId === m.id ? (
|
||
<span className="flex items-center gap-2">
|
||
<svg className="animate-spin h-3 w-3" fill="none" viewBox="0 0 24 24">
|
||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||
</svg>
|
||
Importing...
|
||
</span>
|
||
) : (
|
||
"Run Full Import"
|
||
)}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => handleRunOfferSync(m.id)}
|
||
disabled={offerSyncId === m.id}
|
||
className="w-full text-left px-3 py-2 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-white transition-colors disabled:opacity-50 disabled:cursor-wait"
|
||
>
|
||
{offerSyncId === m.id ? (
|
||
<span className="flex items-center gap-2">
|
||
<svg className="animate-spin h-3 w-3" fill="none" viewBox="0 0 24 24">
|
||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||
</svg>
|
||
Syncing...
|
||
</span>
|
||
) : (
|
||
"Run Offer Sync"
|
||
)}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
</section>
|
||
</div>
|
||
</main>
|
||
);
|
||
}
|