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>
+  );
+}

app/contacts/segments/new/page.tsx

@@ -0,0 +1,45 @@
+import { redirect } from "next/navigation";
+
+import { ShellPage } from "@/components/page-templates";
+import { Button, SectionCard } from "@/components/ui";
+import { createContactSegment } from "@/lib/admin-crud";
+import { getSession } from "@/lib/auth";
+
+export default async function NewSegmentPage({
+  searchParams
+}: {
+  searchParams?: Promise<{ error?: string }>;
+}) {
+  const session = await getSession();
+  if (!session) {
+    redirect("/login");
+  }
+
+  const params = await (searchParams ?? Promise.resolve<{ error?: string }>({}));
+  const error = params.error;
+  const errorMessage = error === "missing_fields" ? "Nama segment wajib diisi." : null;
+
+  return (
+    <ShellPage shell="admin" title="Create Segment" description="Rule builder sederhana untuk audience segmentation.">
+      <SectionCard title="Segment rule">
+        <form action={createContactSegment} className="grid gap-4 md:max-w-2xl">
+          {errorMessage ? (
+            <p className="rounded-xl border border-warning/30 bg-warning/10 p-3 text-sm text-warning">{errorMessage}</p>
+          ) : null}
+          <input name="name" required className="rounded-xl border border-line px-4 py-3" placeholder="Segment name" />
+          <label className="text-sm text-on-surface-variant">
+            <span>Rules JSON / human-readable rules</span>
+            <textarea
+              name="rules"
+              className="mt-2 min-h-32 w-full rounded-xl border border-line px-4 py-3"
+              placeholder='Contoh: {"tags":["Enterprise"]} atau tulis deskripsi aturan di sini'
+            />
+          </label>
+          <div>
+            <Button type="submit">Save segment</Button>
+          </div>
+        </form>
+      </SectionCard>
+    </ShellPage>
+  );
+}

app/contacts/segments/page.tsx

@@ -0,0 +1,77 @@
+import { PlaceholderActions, ShellPage } from "@/components/page-templates";
+import { TablePlaceholder } from "@/components/placeholders";
+import { getSession } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+import Link from "next/link";
+
+function formatDate(date: Date | null | undefined) {
+  if (!date) {
+    return "-";
+  }
+
+  return new Intl.DateTimeFormat("id-ID", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric"
+  }).format(date);
+}
+
+function summarizeRules(raw: string | null) {
+  if (!raw) {
+    return "No rules defined";
+  }
+  try {
+    const parsed = JSON.parse(raw) as { description?: string };
+    if (parsed.description) {
+      return parsed.description;
+    }
+  } catch {
+    return raw;
+  }
+
+  return raw;
+}
+
+export default async function SegmentsPage() {
+  const session = await getSession();
+  if (!session) {
+    return (
+      <ShellPage shell="admin" title="Segments" description="Audience segment untuk kebutuhan broadcast campaign.">
+        <p className="rounded-xl border border-line bg-surface-container p-3 text-sm text-on-surface-variant">Silakan login terlebih dahulu.</p>
+      </ShellPage>
+    );
+  }
+
+  const tenantId = session.tenantId;
+  const segments = await prisma.contactSegment.findMany({
+    where: { tenantId },
+    include: {
+      _count: {
+        select: { members: true }
+      }
+    },
+    orderBy: { updatedAt: "desc" }
+  });
+
+  return (
+    <ShellPage
+      shell="admin"
+      title="Segments"
+      description="Audience segment untuk kebutuhan broadcast campaign."
+      actions={<PlaceholderActions primaryHref="/contacts/segments/new" primaryLabel="Create segment" />}
+    >
+      <TablePlaceholder
+        title="Segments list"
+        columns={["Segment", "Rule summary", "Members", "Updated"]}
+        rows={segments.map((segment) => [
+          <Link key={`${segment.id}-name`} href={`/contacts/segments/${segment.id}`} className="text-brand hover:underline">
+            {segment.name}
+          </Link>,
+          summarizeRules(segment.description ?? segment.rulesJson),
+          String(segment._count.members),
+          formatDate(segment.updatedAt)
+        ])}
+      />
+    </ShellPage>
+  );
+}