455 lines
16 KiB
TypeScript
455 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
import { useMutation, useQuery } from "convex/react";
|
|
import { FunctionReturnType } from "convex/server";
|
|
import { MapPin, Pencil, Play, RefreshCcw, Plus } from "lucide-react";
|
|
|
|
import { api } from "@/convex/_generated/api";
|
|
import { Id } from "@/convex/_generated/dataModel";
|
|
import { campaignFormDefaults } from "@/lib/campaign-form";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { CampaignFormDialog } from "@/components/campaigns/campaign-form-dialog";
|
|
|
|
type CampaignsListResult = FunctionReturnType<typeof api.campaigns.list>;
|
|
type CampaignRow = NonNullable<CampaignsListResult>[number];
|
|
|
|
type RecurrenceLabel = Record<CampaignRow["recurrence"], string>;
|
|
type CurrentRunStatusLabel = {
|
|
[key: string]: string;
|
|
};
|
|
|
|
const recurrenceLabel: RecurrenceLabel = {
|
|
manual: "manuell",
|
|
daily: "täglich",
|
|
weekly: "wöchentlich",
|
|
monthly: "monatlich",
|
|
};
|
|
|
|
const statusLabel: CurrentRunStatusLabel = {
|
|
running: "Läuft",
|
|
pending: "Ausstehend",
|
|
succeeded: "Erledigt",
|
|
failed: "Fehlgeschlagen",
|
|
canceled: "Abgebrochen",
|
|
idle: "Leerlauf",
|
|
paused: "Pausiert",
|
|
};
|
|
|
|
const dateFormatter = new Intl.DateTimeFormat("de-DE", {
|
|
dateStyle: "short",
|
|
timeStyle: "short",
|
|
});
|
|
|
|
function formatDateTime(value?: number | null): string {
|
|
if (!value) {
|
|
return "Nicht gesetzt";
|
|
}
|
|
|
|
return dateFormatter.format(new Date(value));
|
|
}
|
|
|
|
const formPayloadFromCampaign = (campaign?: CampaignRow | null) => {
|
|
if (!campaign) {
|
|
return campaignFormDefaults;
|
|
}
|
|
|
|
return {
|
|
status: campaign.status,
|
|
categoryMode: campaign.categoryMode,
|
|
recurrence: campaign.recurrence,
|
|
radiusKm: campaign.radiusKm,
|
|
maxNewLeadsPerRun: campaign.maxNewLeadsPerRun,
|
|
maxAuditsPerRun: campaign.maxAuditsPerRun,
|
|
name: campaign.name,
|
|
category: campaign.category,
|
|
customSearchTerm: campaign.customSearchTerm ?? "",
|
|
postalCode: campaign.postalCode,
|
|
};
|
|
};
|
|
|
|
const formatNiche = (campaign: CampaignRow): string => {
|
|
if (campaign.category !== "Anderes") {
|
|
return campaign.category;
|
|
}
|
|
|
|
return campaign.customSearchTerm?.trim()
|
|
? `${campaign.category}: ${campaign.customSearchTerm}`
|
|
: campaign.category;
|
|
};
|
|
|
|
export function CampaignsBoard() {
|
|
const campaigns = useQuery(api.campaigns.list, { limit: 100 });
|
|
const createCampaign = useMutation(api.campaigns.create);
|
|
const updateCampaign = useMutation(api.campaigns.update);
|
|
const setStatus = useMutation(api.campaigns.setStatus);
|
|
const requestRun = useMutation(api.campaigns.requestRun);
|
|
|
|
const [editingCampaign, setEditingCampaign] = useState<CampaignRow | null>(null);
|
|
const [isFormOpen, setIsFormOpen] = useState(false);
|
|
const [actionBusyId, setActionBusyId] = useState<Id<"campaigns"> | null>(null);
|
|
const [actionLabel, setActionLabel] = useState<string | null>(null);
|
|
const [formError, setFormError] = useState<string | null>(null);
|
|
const [rowError, setRowError] = useState<string | null>(null);
|
|
const actionLabelTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
|
|
const clearActionLabelTimer = () => {
|
|
if (actionLabelTimerRef.current) {
|
|
clearTimeout(actionLabelTimerRef.current);
|
|
actionLabelTimerRef.current = null;
|
|
}
|
|
};
|
|
|
|
const setActionLabelWithTimeout = (
|
|
label: string,
|
|
clearAfterMs = 1200,
|
|
) => {
|
|
clearActionLabelTimer();
|
|
setActionLabel(label);
|
|
|
|
if (clearAfterMs > 0) {
|
|
actionLabelTimerRef.current = setTimeout(() => setActionLabel(null), clearAfterMs);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
clearActionLabelTimer();
|
|
};
|
|
}, []);
|
|
|
|
const campaignsSorted = useMemo(() => {
|
|
if (!campaigns) {
|
|
return [];
|
|
}
|
|
|
|
return [...campaigns].sort((a, b) => b.createdAt - a.createdAt);
|
|
}, [campaigns]);
|
|
|
|
const closeDialog = () => {
|
|
setEditingCampaign(null);
|
|
setIsFormOpen(false);
|
|
setFormError(null);
|
|
};
|
|
|
|
const openCreateDialog = () => {
|
|
setEditingCampaign(null);
|
|
setRowError(null);
|
|
setIsFormOpen(true);
|
|
};
|
|
|
|
const openEditDialog = (campaign: CampaignRow) => {
|
|
setEditingCampaign(campaign);
|
|
setRowError(null);
|
|
setIsFormOpen(true);
|
|
};
|
|
|
|
const submitCampaign = async (payload: {
|
|
status: CampaignRow["status"];
|
|
categoryMode: CampaignRow["categoryMode"];
|
|
category: string;
|
|
customSearchTerm?: string;
|
|
postalCode: string;
|
|
radiusKm: number;
|
|
maxNewLeadsPerRun: number;
|
|
maxAuditsPerRun: number;
|
|
recurrence: CampaignRow["recurrence"];
|
|
countryCode: "DE";
|
|
country: "Deutschland";
|
|
name: string;
|
|
}) => {
|
|
setActionLabel("Speichere...");
|
|
setFormError(null);
|
|
try {
|
|
if (!editingCampaign) {
|
|
await createCampaign(payload);
|
|
} else {
|
|
await updateCampaign({
|
|
id: editingCampaign._id,
|
|
...payload,
|
|
});
|
|
}
|
|
setActionLabelWithTimeout("Gespeichert");
|
|
setIsFormOpen(false);
|
|
setEditingCampaign(null);
|
|
} catch {
|
|
setFormError("Speichern fehlgeschlagen.");
|
|
setActionLabelWithTimeout("Fehler", 2000);
|
|
}
|
|
};
|
|
|
|
const runCampaign = async (campaign: CampaignRow) => {
|
|
setActionBusyId(campaign._id);
|
|
setRowError(null);
|
|
try {
|
|
await requestRun({ id: campaign._id });
|
|
setActionLabelWithTimeout(`${campaign.name}: Lauf gestartet`);
|
|
} catch {
|
|
setRowError("Kampagne konnte nicht gestartet werden.");
|
|
setActionLabelWithTimeout("Kampagne konnte nicht gestartet werden.", 2400);
|
|
} finally {
|
|
setActionBusyId(null);
|
|
}
|
|
};
|
|
|
|
const toggleCampaign = async (campaign: CampaignRow) => {
|
|
const nextStatus = campaign.status === "active" ? "paused" : "active";
|
|
setActionBusyId(campaign._id);
|
|
setRowError(null);
|
|
try {
|
|
await setStatus({ id: campaign._id, status: nextStatus });
|
|
setActionLabelWithTimeout(
|
|
`${campaign.name}: ${nextStatus === "active" ? "Aktiviert" : "Pausiert"}`,
|
|
);
|
|
} catch {
|
|
setRowError("Status konnte nicht geändert werden.");
|
|
setActionLabelWithTimeout("Status konnte nicht geändert werden.", 2400);
|
|
} finally {
|
|
setActionBusyId(null);
|
|
}
|
|
};
|
|
|
|
if (campaigns === undefined) {
|
|
return (
|
|
<section className="space-y-3">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="h-7 w-48 rounded-md bg-muted" />
|
|
<div className="h-8 w-24 rounded-md bg-muted" />
|
|
</div>
|
|
|
|
<div className="grid gap-3">
|
|
{Array.from({ length: 4 }, (_, index) => (
|
|
<Skeleton className="h-28 rounded-lg" key={index} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section className="space-y-4">
|
|
<CampaignFormDialog
|
|
campaign={editingCampaign ? formPayloadFromCampaign(editingCampaign) : null}
|
|
open={isFormOpen}
|
|
onOpenChange={closeDialog}
|
|
onSubmit={submitCampaign}
|
|
/>
|
|
|
|
<div className="flex flex-col gap-3 border-b pb-3 sm:flex-row sm:items-end sm:justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Lokale Kampagnenverwaltung</p>
|
|
<h1 className="mt-2 text-3xl font-semibold tracking-normal">
|
|
Kampagnen
|
|
</h1>
|
|
</div>
|
|
|
|
<Button onClick={openCreateDialog} className="justify-start sm:w-auto">
|
|
<Plus className="size-4" />
|
|
Kampagne anlegen
|
|
</Button>
|
|
</div>
|
|
|
|
{formError ? <p className="text-sm text-destructive" role="alert">{formError}</p> : null}
|
|
{rowError ? <p className="text-sm text-destructive" role="alert">{rowError}</p> : null}
|
|
{actionLabel ? <p className="text-sm" role="status">{actionLabel}</p> : null}
|
|
|
|
{campaignsSorted.length === 0 ? (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Keine Kampagnen</CardTitle>
|
|
<CardDescription>
|
|
Lege zuerst eine Kampagne mit Kategorie, PLZ und Limits an.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
) : (
|
|
<>
|
|
<div className="hidden overflow-x-auto rounded-lg border bg-card md:block">
|
|
<table className="w-full min-w-[820px] border-separate border-spacing-0">
|
|
<thead>
|
|
<tr className="text-left text-sm text-muted-foreground">
|
|
<th className="sticky left-0 bg-card p-3 font-normal">Kampagne</th>
|
|
<th className="p-3 font-normal">PLZ / Radius</th>
|
|
<th className="p-3 font-normal">Cadence</th>
|
|
<th className="p-3 font-normal">Limits</th>
|
|
<th className="p-3 font-normal">Status</th>
|
|
<th className="p-3 font-normal">Lauf</th>
|
|
<th className="p-3 font-normal">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{campaignsSorted.map((campaign) => (
|
|
<tr
|
|
className="border-t"
|
|
key={campaign._id}
|
|
>
|
|
<td className="max-w-[220px] p-3 align-top">
|
|
<div className="space-y-1">
|
|
<p className="truncate font-medium">{campaign.name}</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{formatNiche(campaign)}
|
|
</p>
|
|
</div>
|
|
</td>
|
|
|
|
<td className="max-w-[180px] p-3 align-top">
|
|
<div className="space-y-1 text-sm text-muted-foreground">
|
|
<p className="inline-flex items-center gap-1">
|
|
<MapPin className="size-3" />
|
|
<span>{campaign.postalCode}</span>
|
|
</p>
|
|
<p>{campaign.radiusKm} km Umkreis</p>
|
|
</div>
|
|
</td>
|
|
|
|
<td className="p-3 align-top">
|
|
<span className="rounded-md bg-muted px-2 py-1 text-sm">
|
|
{recurrenceLabel[campaign.recurrence]}
|
|
</span>
|
|
</td>
|
|
|
|
<td className="p-3 align-top">
|
|
<p className="text-sm">
|
|
Leads: {campaign.maxNewLeadsPerRun} · Audits:{" "}
|
|
{campaign.maxAuditsPerRun}
|
|
</p>
|
|
</td>
|
|
|
|
<td className="p-3 align-top">
|
|
<Badge
|
|
variant={campaign.status === "active" ? "default" : "secondary"}
|
|
>
|
|
{campaign.status === "active" ? "Aktiv" : "Pausiert"}
|
|
</Badge>
|
|
</td>
|
|
|
|
<td className="p-3 align-top">
|
|
<div className="space-y-1 text-sm text-muted-foreground">
|
|
<p>Letzter Lauf: {formatDateTime(campaign.lastRunAt)}</p>
|
|
<p>Nächster Lauf: {formatDateTime(campaign.nextRunAt)}</p>
|
|
<p>Run-Status: {statusLabel[campaign.currentRunStatus] ?? campaign.currentRunStatus}</p>
|
|
</div>
|
|
</td>
|
|
|
|
<td className="p-3 align-top">
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
className="w-full sm:w-auto"
|
|
variant="outline"
|
|
onClick={() => openEditDialog(campaign)}
|
|
disabled={actionBusyId === campaign._id}
|
|
>
|
|
<Pencil className="size-4" />
|
|
Bearbeiten
|
|
</Button>
|
|
<Button
|
|
className="w-full sm:w-auto"
|
|
variant="outline"
|
|
onClick={() => toggleCampaign(campaign)}
|
|
disabled={actionBusyId === campaign._id}
|
|
>
|
|
<RefreshCcw className="size-4" />
|
|
{campaign.status === "active" ? "Pausieren" : "Fortfahren"}
|
|
</Button>
|
|
<Button
|
|
className="w-full sm:w-auto"
|
|
onClick={() => runCampaign(campaign)}
|
|
disabled={actionBusyId === campaign._id}
|
|
>
|
|
<Play className="size-4" />
|
|
Jetzt ausführen
|
|
</Button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div className="grid gap-3 md:hidden">
|
|
{campaignsSorted.map((campaign) => (
|
|
<Card key={campaign._id}>
|
|
<CardHeader>
|
|
<div className="flex flex-wrap items-start justify-between gap-2">
|
|
<div className="min-w-0">
|
|
<CardTitle className="truncate">{campaign.name}</CardTitle>
|
|
<CardDescription className="truncate">
|
|
{formatNiche(campaign)}
|
|
</CardDescription>
|
|
</div>
|
|
<Badge
|
|
variant={campaign.status === "active" ? "default" : "secondary"}
|
|
>
|
|
{campaign.status === "active" ? "Aktiv" : "Pausiert"}
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent className="grid gap-2 text-sm">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div className="inline-flex items-center gap-1 text-muted-foreground">
|
|
<MapPin className="size-3" />
|
|
<span>{campaign.postalCode}</span>
|
|
</div>
|
|
<span>{campaign.radiusKm} km</span>
|
|
</div>
|
|
<Separator className="bg-border" />
|
|
<div>
|
|
<p>Cadence: {recurrenceLabel[campaign.recurrence]}</p>
|
|
<p>
|
|
Limits: L {campaign.maxNewLeadsPerRun}, A{" "}
|
|
{campaign.maxAuditsPerRun}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground">Letzter Lauf: {formatDateTime(campaign.lastRunAt)}</p>
|
|
<p className="text-muted-foreground">Nächster Lauf: {formatDateTime(campaign.nextRunAt)}</p>
|
|
<p className="text-muted-foreground">
|
|
Run-Status: {statusLabel[campaign.currentRunStatus] ?? campaign.currentRunStatus}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => openEditDialog(campaign)}
|
|
disabled={actionBusyId === campaign._id}
|
|
className="w-full justify-start"
|
|
>
|
|
<Pencil className="size-4" />
|
|
Bearbeiten
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => toggleCampaign(campaign)}
|
|
disabled={actionBusyId === campaign._id}
|
|
className="w-full justify-start"
|
|
>
|
|
<RefreshCcw className="size-4" />
|
|
{campaign.status === "active" ? "Pausieren" : "Fortfahren"}
|
|
</Button>
|
|
<Button
|
|
onClick={() => runCampaign(campaign)}
|
|
disabled={actionBusyId === campaign._id}
|
|
className="w-full justify-start"
|
|
>
|
|
<Play className="size-4" />
|
|
Jetzt ausführen
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|