chore: initial project import

app/contacts/segments/[segmentId]/page.tsx

@@ -0,0 +1,108 @@
+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>
+  );
+}