feat: add campaign configuration controls
This commit is contained in:
407
components/campaigns/campaign-form-dialog.tsx
Normal file
407
components/campaigns/campaign-form-dialog.tsx
Normal file
@@ -0,0 +1,407 @@
|
||||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useForm, useWatch } from "react-hook-form";
|
||||
import { z } from "zod/v4";
|
||||
|
||||
import {
|
||||
campaignFormDefaults,
|
||||
campaignFormSchema,
|
||||
mapCampaignFormToPayload,
|
||||
} from "@/lib/campaign-form";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogCloseButton,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
|
||||
type CampaignFormValues = z.infer<typeof campaignFormSchema>;
|
||||
|
||||
type CampaignFormSeed = Partial<CampaignFormValues> & {
|
||||
_id?: string;
|
||||
};
|
||||
|
||||
type CampaignFormDialogProps = {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
campaign?: CampaignFormSeed | null;
|
||||
onSubmit: (
|
||||
payload: Omit<CampaignFormValues, "status"> &
|
||||
Required<Pick<CampaignFormValues, "status">> & {
|
||||
countryCode: "DE";
|
||||
country: "Deutschland";
|
||||
},
|
||||
) => Promise<void>;
|
||||
};
|
||||
|
||||
const categoryOptions = [
|
||||
"Anwalt",
|
||||
"Bauunternehmen",
|
||||
"Friseur",
|
||||
"Gastronomie",
|
||||
"Handwerk",
|
||||
"Immobilien",
|
||||
"Kfz-Werkstatt",
|
||||
"Marketing",
|
||||
"Restaurant",
|
||||
"Zahnarzt",
|
||||
"Anderes",
|
||||
] as const;
|
||||
|
||||
const recurrenceOptions: Record<CampaignFormValues["recurrence"], string> = {
|
||||
manual: "manuell",
|
||||
daily: "täglich",
|
||||
weekly: "wöchentlich",
|
||||
monthly: "monatlich",
|
||||
};
|
||||
|
||||
const statusLabel: Record<CampaignFormValues["status"], string> = {
|
||||
active: "Aktiv",
|
||||
paused: "Pausiert",
|
||||
};
|
||||
|
||||
const customCategoryValue = "Anderes";
|
||||
|
||||
export function CampaignFormDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
campaign,
|
||||
onSubmit,
|
||||
}: CampaignFormDialogProps) {
|
||||
const [pending, setPending] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const methods = useForm<CampaignFormValues>({
|
||||
resolver: zodResolver(campaignFormSchema),
|
||||
defaultValues: campaignFormDefaults,
|
||||
});
|
||||
|
||||
const {
|
||||
control,
|
||||
reset,
|
||||
setValue,
|
||||
formState: { isSubmitting },
|
||||
} = methods;
|
||||
|
||||
const selectedCategory = useWatch({
|
||||
control,
|
||||
name: "category",
|
||||
defaultValue: campaignFormDefaults.category,
|
||||
});
|
||||
const selectedStatus = useWatch({
|
||||
control,
|
||||
name: "status",
|
||||
defaultValue: campaignFormDefaults.status,
|
||||
});
|
||||
const showCustomSearch = selectedCategory === customCategoryValue;
|
||||
|
||||
useEffect(() => {
|
||||
const defaults = campaign
|
||||
? {
|
||||
status: campaign.status ?? campaignFormDefaults.status,
|
||||
categoryMode: campaign.categoryMode ?? campaignFormDefaults.categoryMode,
|
||||
recurrence: campaign.recurrence ?? campaignFormDefaults.recurrence,
|
||||
radiusKm: campaign.radiusKm ?? campaignFormDefaults.radiusKm,
|
||||
maxNewLeadsPerRun:
|
||||
campaign.maxNewLeadsPerRun ?? campaignFormDefaults.maxNewLeadsPerRun,
|
||||
maxAuditsPerRun:
|
||||
campaign.maxAuditsPerRun ?? campaignFormDefaults.maxAuditsPerRun,
|
||||
name: campaign.name ?? "",
|
||||
category: campaign.category ?? "",
|
||||
customSearchTerm: campaign.customSearchTerm ?? "",
|
||||
postalCode: campaign.postalCode ?? campaignFormDefaults.postalCode,
|
||||
}
|
||||
: campaignFormDefaults;
|
||||
|
||||
reset(defaults);
|
||||
}, [campaign, reset]);
|
||||
|
||||
useEffect(() => {
|
||||
if (showCustomSearch) {
|
||||
setValue("categoryMode", "custom");
|
||||
return;
|
||||
}
|
||||
|
||||
setValue("categoryMode", "preset");
|
||||
setValue("customSearchTerm", "");
|
||||
}, [showCustomSearch, setValue]);
|
||||
|
||||
const dialogTitle = useMemo(
|
||||
() => (campaign ? "Kampagne bearbeiten" : "Kampagne anlegen"),
|
||||
[campaign],
|
||||
);
|
||||
|
||||
const submitLabel = useMemo(
|
||||
() => (campaign ? "Speichern" : "Erstellen"),
|
||||
[campaign],
|
||||
);
|
||||
|
||||
const submitForm = async (values: CampaignFormValues) => {
|
||||
setPending(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const payload = mapCampaignFormToPayload(values as Record<string, unknown>);
|
||||
|
||||
await onSubmit({
|
||||
...payload,
|
||||
status: values.status,
|
||||
categoryMode: values.categoryMode,
|
||||
category: values.category,
|
||||
customSearchTerm: values.customSearchTerm || undefined,
|
||||
postalCode: values.postalCode,
|
||||
radiusKm: values.radiusKm,
|
||||
recurrence: values.recurrence,
|
||||
maxNewLeadsPerRun: values.maxNewLeadsPerRun,
|
||||
maxAuditsPerRun: values.maxAuditsPerRun,
|
||||
name: values.name,
|
||||
});
|
||||
onOpenChange(false);
|
||||
} catch {
|
||||
setError("Speichern fehlgeschlagen.");
|
||||
} finally {
|
||||
setPending(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{dialogTitle}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Wähle Kategorie, PLZ, Radius und Limits je Kampagne.
|
||||
</DialogDescription>
|
||||
<DialogCloseButton />
|
||||
</DialogHeader>
|
||||
|
||||
<Form form={methods} onSubmit={submitForm}>
|
||||
<FormField
|
||||
control={control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={control}
|
||||
name="category"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Kategorie</FormLabel>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Kategorie wählen" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{categoryOptions.map((category) => (
|
||||
<SelectItem value={category} key={category}>
|
||||
{category}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{showCustomSearch && (
|
||||
<FormField
|
||||
control={control}
|
||||
name="customSearchTerm"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Eigene Nische</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
value={field.value ?? ""}
|
||||
placeholder="Beispiel: Webdesigner für Restaurants"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<FormField
|
||||
control={control}
|
||||
name="postalCode"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>PLZ</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
value={field.value ?? ""}
|
||||
inputMode="numeric"
|
||||
maxLength={5}
|
||||
placeholder="10115"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={control}
|
||||
name="radiusKm"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Radius (km)</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
value={field.value ?? ""}
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
min={1}
|
||||
step={1}
|
||||
onChange={(event) => {
|
||||
const value = Number(event.target.value);
|
||||
field.onChange(Number.isFinite(value) ? value : 0);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={control}
|
||||
name="recurrence"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Wiederholung</FormLabel>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Wiederholung wählen" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{Object.entries(recurrenceOptions).map(([value, label]) => (
|
||||
<SelectItem value={value} key={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<FormField
|
||||
control={control}
|
||||
name="maxNewLeadsPerRun"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Max. neue Leads</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
value={field.value ?? ""}
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
min={1}
|
||||
onChange={(event) => {
|
||||
const value = Number(event.target.value);
|
||||
field.onChange(Number.isFinite(value) ? value : 0);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={control}
|
||||
name="maxAuditsPerRun"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Max. Audits</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
value={field.value ?? ""}
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
min={1}
|
||||
onChange={(event) => {
|
||||
const value = Number(event.target.value);
|
||||
field.onChange(Number.isFinite(value) ? value : 0);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={control}
|
||||
name="status"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Status</FormLabel>
|
||||
<div className="flex items-center gap-3">
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value === "active"}
|
||||
onCheckedChange={(checked) =>
|
||||
field.onChange(checked ? "active" : "paused")
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<span>{statusLabel[selectedStatus ?? "paused"]}</span>
|
||||
</div>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{error ? <p className="text-xs text-destructive" role="alert">{error}</p> : null}
|
||||
|
||||
<div className="flex flex-wrap gap-2 justify-end">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={isSubmitting || pending}
|
||||
>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSubmitting || pending}>
|
||||
{isSubmitting || pending ? "Speichert..." : submitLabel}
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
454
components/campaigns/campaigns-board.tsx
Normal file
454
components/campaigns/campaigns-board.tsx
Normal file
@@ -0,0 +1,454 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user