109 lines
3.4 KiB
TypeScript
109 lines
3.4 KiB
TypeScript
import Link from "next/link";
|
|
import { redirect } from "next/navigation";
|
|
|
|
import { ShellPage } from "@/components/page-templates";
|
|
import { TablePlaceholder } from "@/components/placeholders";
|
|
import { SectionCard } from "@/components/ui";
|
|
import { getSession } from "@/lib/auth";
|
|
import { prisma } from "@/lib/prisma";
|
|
|
|
function summarizeRules(value: string | null) {
|
|
if (!value) {
|
|
return "-";
|
|
}
|
|
|
|
try {
|
|
const parsed = JSON.parse(value);
|
|
return parsed.description ? String(parsed.description) : JSON.stringify(parsed);
|
|
} catch {
|
|
return value;
|
|
}
|
|
}
|
|
|
|
function formatDate(date: Date | null) {
|
|
if (!date) {
|
|
return "-";
|
|
}
|
|
|
|
return new Intl.DateTimeFormat("id-ID", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric"
|
|
}).format(date);
|
|
}
|
|
|
|
export default async function SegmentDetailPage({ params }: { params: Promise<{ segmentId: string }> }) {
|
|
const { segmentId } = await params;
|
|
const session = await getSession();
|
|
if (!session) {
|
|
redirect("/login");
|
|
}
|
|
|
|
const segment = await prisma.contactSegment.findFirst({
|
|
where: { id: segmentId, tenantId: session.tenantId },
|
|
include: {
|
|
_count: {
|
|
select: { members: true }
|
|
},
|
|
members: {
|
|
include: { contact: true },
|
|
orderBy: { createdAt: "desc" },
|
|
take: 20
|
|
},
|
|
campaigns: {
|
|
select: { id: true, name: true, status: true, updatedAt: true },
|
|
orderBy: { updatedAt: "desc" }
|
|
}
|
|
}
|
|
});
|
|
|
|
if (!segment) {
|
|
redirect("/contacts/segments?error=segment_not_found");
|
|
}
|
|
|
|
return (
|
|
<ShellPage
|
|
shell="admin"
|
|
title="Segment Detail"
|
|
description="Metadata segment, preview members, dan campaign yang memakai segment ini."
|
|
actions={<Link href="/contacts/segments">Back to segments</Link>}
|
|
>
|
|
<div className="grid gap-6 xl:grid-cols-2">
|
|
<SectionCard title="Segment metadata">
|
|
<p className="text-sm text-on-surface-variant">Nama: {segment.name}</p>
|
|
<p className="text-sm text-on-surface-variant">Rule: {summarizeRules(segment.description ?? segment.rulesJson)}</p>
|
|
<p className="text-sm text-on-surface-variant">Members: {segment._count.members}</p>
|
|
<p className="text-sm text-on-surface-variant">Updated: {formatDate(segment.updatedAt)}</p>
|
|
</SectionCard>
|
|
<SectionCard title="Campaign usage">
|
|
{segment.campaigns.length === 0 ? (
|
|
<p className="text-sm text-on-surface-variant">Tidak ada campaign yang memakai segment ini.</p>
|
|
) : (
|
|
<ul className="space-y-2">
|
|
{segment.campaigns.map((campaign) => (
|
|
<li key={campaign.id} className="rounded-xl border border-line bg-surface-container p-3">
|
|
<Link href={`/campaigns/${campaign.id}`} className="text-brand hover:underline">
|
|
{campaign.name}
|
|
</Link>
|
|
<p className="text-xs text-outline">Status: {campaign.status} • {formatDate(campaign.updatedAt)}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</SectionCard>
|
|
</div>
|
|
{segment.members.length > 0 ? (
|
|
<TablePlaceholder
|
|
title="Member preview"
|
|
columns={["Contact", "Phone", "Added at"]}
|
|
rows={segment.members.map((member) => [
|
|
member.contact.fullName,
|
|
member.contact.phoneNumber,
|
|
formatDate(member.createdAt)
|
|
])}
|
|
/>
|
|
) : null}
|
|
</ShellPage>
|
|
);
|
|
}
|