chore: initial project import
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
This commit is contained in:
Wira Basalamah
89
app/contacts/[contactId]/edit/page.tsx
Normal file
89
app/contacts/[contactId]/edit/page.tsx
Normal file
@ -0,0 +1,89 @@
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { ShellPage } from "@/components/page-templates";
|
||||
import { Button, SectionCard } from "@/components/ui";
|
||||
import { getSession } from "@/lib/auth";
|
||||
import { updateContact } from "@/lib/admin-crud";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export default async function EditContactPage({ params }: { params: Promise<{ contactId: string }> }) {
|
||||
const { contactId } = await params;
|
||||
const session = await getSession();
|
||||
if (!session) {
|
||||
redirect("/login");
|
||||
}
|
||||
|
||||
const contact = await prisma.contact.findFirst({
|
||||
where: { id: contactId, tenantId: session.tenantId },
|
||||
include: { contactTags: { include: { tag: true } }, channel: true }
|
||||
});
|
||||
if (!contact) {
|
||||
redirect("/contacts?error=contact_not_found");
|
||||
}
|
||||
|
||||
const channels = await prisma.channel.findMany({
|
||||
where: { tenantId: session.tenantId },
|
||||
orderBy: { channelName: "asc" }
|
||||
});
|
||||
|
||||
const tags = contact.contactTags.map((item) => item.tag.name).join(", ");
|
||||
|
||||
return (
|
||||
<ShellPage shell="admin" title="Edit Contact" description="Form update data contact.">
|
||||
<SectionCard title="Contact form">
|
||||
<form action={updateContact} className="grid gap-4 md:max-w-2xl md:grid-cols-2">
|
||||
<input type="hidden" name="contactId" value={contact.id} />
|
||||
<input required name="fullName" defaultValue={contact.fullName} className="rounded-xl border border-line px-4 py-3" />
|
||||
<input
|
||||
required
|
||||
name="phoneNumber"
|
||||
defaultValue={contact.phoneNumber}
|
||||
className="rounded-xl border border-line px-4 py-3"
|
||||
/>
|
||||
<input name="email" defaultValue={contact.email ?? ""} className="rounded-xl border border-line px-4 py-3" />
|
||||
<input
|
||||
name="countryCode"
|
||||
defaultValue={contact.countryCode ?? ""}
|
||||
className="rounded-xl border border-line px-4 py-3"
|
||||
/>
|
||||
<label className="md:col-span-2 block text-sm">
|
||||
<span className="text-on-surface-variant">Channel</span>
|
||||
<select name="channelId" defaultValue={contact.channelId || ""} className="mt-2 w-full rounded-xl border border-line px-4 py-3">
|
||||
<option value="">Tidak terkait channel</option>
|
||||
{channels.map((channel) => (
|
||||
<option key={channel.id} value={channel.id}>
|
||||
{channel.channelName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="md:col-span-2 block text-sm">
|
||||
<span className="text-on-surface-variant">Tags</span>
|
||||
<input name="tags" defaultValue={tags} className="mt-2 w-full rounded-xl border border-line px-4 py-3" />
|
||||
</label>
|
||||
<label className="md:col-span-2 block text-sm">
|
||||
<span className="text-on-surface-variant">Opt-in status</span>
|
||||
<select
|
||||
name="optInStatus"
|
||||
defaultValue={contact.optInStatus}
|
||||
className="mt-2 w-full rounded-xl border border-line px-4 py-3"
|
||||
>
|
||||
<option value="UNKNOWN">Unknown</option>
|
||||
<option value="OPTED_IN">Opted in</option>
|
||||
<option value="OPTED_OUT">Opted out</option>
|
||||
</select>
|
||||
</label>
|
||||
<div className="md:col-span-2 flex gap-3">
|
||||
<Button type="submit" className="rounded-xl">
|
||||
Save changes
|
||||
</Button>
|
||||
<Link href={`/contacts/${contact.id}`} className="text-on-surface-variant hover:underline">
|
||||
Cancel
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</SectionCard>
|
||||
</ShellPage>
|
||||
);
|
||||
}
|
||||
73
app/contacts/[contactId]/page.tsx
Normal file
73
app/contacts/[contactId]/page.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { ShellPage } from "@/components/page-templates";
|
||||
import { SectionCard } from "@/components/ui";
|
||||
import { getSession } from "@/lib/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export default async function ContactDetailPage({ params }: { params: Promise<{ contactId: string }> }) {
|
||||
const { contactId } = await params;
|
||||
const session = await getSession();
|
||||
if (!session) {
|
||||
redirect("/login");
|
||||
}
|
||||
|
||||
const contact = await prisma.contact.findFirst({
|
||||
where: { id: contactId, tenantId: session.tenantId },
|
||||
include: {
|
||||
contactTags: { include: { tag: true } },
|
||||
conversations: true,
|
||||
channel: true
|
||||
}
|
||||
});
|
||||
|
||||
if (!contact) {
|
||||
redirect("/contacts?error=contact_not_found");
|
||||
}
|
||||
|
||||
return (
|
||||
<ShellPage
|
||||
shell="admin"
|
||||
title="Contact Detail"
|
||||
description="Profile, tags, conversation history, dan campaign history."
|
||||
actions={<Link href={`/contacts/${contactId}/edit`}>Edit contact</Link>}
|
||||
>
|
||||
<div className="grid gap-6 xl:grid-cols-[340px_1fr]">
|
||||
<SectionCard title="Profile card">
|
||||
<p className="text-sm text-on-surface-variant">
|
||||
<strong>Nama:</strong> {contact.fullName}
|
||||
</p>
|
||||
<p className="text-sm text-on-surface-variant">
|
||||
<strong>Phone:</strong> {contact.phoneNumber}
|
||||
</p>
|
||||
<p className="text-sm text-on-surface-variant">
|
||||
<strong>Email:</strong> {contact.email || "-"}
|
||||
</p>
|
||||
<p className="text-sm text-on-surface-variant">
|
||||
<strong>Channel:</strong> {contact.channel?.channelName || "Unset"}
|
||||
</p>
|
||||
<p className="text-sm text-on-surface-variant">
|
||||
<strong>Opt-in:</strong> {contact.optInStatus}
|
||||
</p>
|
||||
<p className="text-sm text-on-surface-variant">
|
||||
<strong>Last interaction:</strong> {contact.lastInteractionAt?.toLocaleString() || "-"}
|
||||
</p>
|
||||
<p className="mt-3 text-xs text-outline">
|
||||
<Link href="/contacts" className="text-on-surface-variant hover:underline">
|
||||
Kembali ke daftar
|
||||
</Link>
|
||||
</p>
|
||||
</SectionCard>
|
||||
<SectionCard title="History">
|
||||
<p className="text-sm text-on-surface-variant">
|
||||
Total conversations: <strong>{contact.conversations.length}</strong>
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-on-surface-variant">
|
||||
Tags: {contact.contactTags.map((item) => item.tag.name).join(", ") || "-"}
|
||||
</p>
|
||||
</SectionCard>
|
||||
</div>
|
||||
</ShellPage>
|
||||
);
|
||||
}
|
||||
73
app/contacts/export/page.tsx
Normal file
73
app/contacts/export/page.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
import { ShellPage } from "@/components/page-templates";
|
||||
import { Button, SectionCard } from "@/components/ui";
|
||||
import { getSession } from "@/lib/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export default async function ExportContactsPage() {
|
||||
const session = await getSession();
|
||||
if (!session) {
|
||||
redirect("/login");
|
||||
}
|
||||
|
||||
if (session.role === "agent") {
|
||||
redirect("/unauthorized");
|
||||
}
|
||||
|
||||
const [segments, tags, count, lastUpdated] = await Promise.all([
|
||||
prisma.contactSegment.findMany({
|
||||
where: { tenantId: session.tenantId },
|
||||
orderBy: { name: "asc" },
|
||||
select: { id: true, name: true, _count: { select: { members: true } } }
|
||||
}),
|
||||
prisma.tag.findMany({ where: { tenantId: session.tenantId }, select: { name: true }, orderBy: { name: "asc" } }),
|
||||
prisma.contact.count({ where: { tenantId: session.tenantId } }),
|
||||
prisma.contact.findFirst({
|
||||
where: { tenantId: session.tenantId },
|
||||
orderBy: { updatedAt: "desc" },
|
||||
select: { updatedAt: true }
|
||||
})
|
||||
]);
|
||||
|
||||
const fields = ["fullName", "phoneNumber", "email", "countryCode", "optInStatus", "createdAt", "updatedAt"];
|
||||
|
||||
return (
|
||||
<ShellPage shell="admin" title="Export Contacts" description="Atur field dan filter sebelum export.">
|
||||
<SectionCard title="Export options">
|
||||
<div className="grid gap-4 md:max-w-xl">
|
||||
<p className="rounded-xl border border-line bg-surface-container p-3 text-sm text-on-surface-variant">
|
||||
Total kontak: {count} • Last updated: {lastUpdated?.updatedAt ? new Intl.DateTimeFormat("id-ID").format(lastUpdated.updatedAt) : "-"}
|
||||
</p>
|
||||
<input className="rounded-xl border border-line px-4 py-3" placeholder="Filter tags / segments" />
|
||||
<select className="rounded-xl border border-line px-4 py-3" defaultValue="">
|
||||
<option value="">Select segment (optional)</option>
|
||||
{segments.map((segment) => (
|
||||
<option key={segment.id} value={segment.id}>
|
||||
{segment.name} ({segment._count.members})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<label className="text-sm text-on-surface-variant">
|
||||
<span>Fields to export</span>
|
||||
<select className="mt-2 w-full rounded-xl border border-line px-4 py-3">
|
||||
{fields.map((field) => (
|
||||
<option key={field} value={field}>
|
||||
{field}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<p className="text-sm text-on-surface-variant">Available tags: {tags.length ? tags.map((tag) => tag.name).join(", ") : "-"}</p>
|
||||
<div>
|
||||
<Button href="/contacts">Export</Button>
|
||||
</div>
|
||||
<div>
|
||||
{segments.length === 0 ? (
|
||||
<p className="text-xs text-warning">Tambahkan segment untuk filtering export yang lebih presisi.</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</SectionCard>
|
||||
</ShellPage>
|
||||
);
|
||||
}
|
||||
95
app/contacts/import/page.tsx
Normal file
95
app/contacts/import/page.tsx
Normal file
@ -0,0 +1,95 @@
|
||||
import { ShellPage } from "@/components/page-templates";
|
||||
import { SectionCard } from "@/components/ui";
|
||||
import { getSession } from "@/lib/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
function formatDate(value: Date | null | undefined) {
|
||||
if (!value) {
|
||||
return "-";
|
||||
}
|
||||
|
||||
return new Intl.DateTimeFormat("id-ID", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric"
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
export default async function ImportContactsPage() {
|
||||
const session = await getSession();
|
||||
if (!session) {
|
||||
redirect("/login");
|
||||
}
|
||||
|
||||
if (session.role === "agent") {
|
||||
redirect("/unauthorized");
|
||||
}
|
||||
|
||||
const [channels, tags, sampleContacts] = await Promise.all([
|
||||
prisma.channel.findMany({
|
||||
where: { tenantId: session.tenantId },
|
||||
select: { id: true, channelName: true, provider: true }
|
||||
}),
|
||||
prisma.tag.findMany({
|
||||
where: { tenantId: session.tenantId },
|
||||
orderBy: { name: "asc" }
|
||||
}),
|
||||
prisma.contact.findMany({
|
||||
where: { tenantId: session.tenantId },
|
||||
orderBy: { createdAt: "desc" },
|
||||
take: 5,
|
||||
select: { id: true, fullName: true, phoneNumber: true, createdAt: true }
|
||||
})
|
||||
]);
|
||||
|
||||
return (
|
||||
<ShellPage shell="admin" title="Import Contacts" description="Upload CSV dan mapping ke field contact sesuai channel tenant.">
|
||||
<div className="grid gap-6 xl:grid-cols-3">
|
||||
<SectionCard title="Step 1" description="Upload CSV">
|
||||
<p className="text-sm text-on-surface-variant">
|
||||
Pilih file CSV dari browser dan pastikan header minimal: nama, no_telepon, email.
|
||||
</p>
|
||||
<div className="mt-3 rounded-xl border border-line bg-surface-container p-3">
|
||||
<input type="file" className="w-full text-sm" />
|
||||
</div>
|
||||
</SectionCard>
|
||||
<SectionCard title="Step 2" description="Field mapping">
|
||||
<div className="space-y-2 text-sm text-on-surface-variant">
|
||||
<p>Gunakan channel yang aktif:</p>
|
||||
{channels.length === 0 ? (
|
||||
<p className="text-sm text-warning">Tenant belum memiliki channel. Tambahkan channel dulu.</p>
|
||||
) : (
|
||||
<ul className="space-y-1">
|
||||
{channels.map((channel) => (
|
||||
<li key={channel.id} className="rounded-xl border border-line bg-surface-container p-3">
|
||||
{channel.channelName} • {channel.provider}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</SectionCard>
|
||||
<SectionCard title="Step 3" description="Validation preview">
|
||||
<div className="space-y-2 text-sm">
|
||||
<p className="text-on-surface-variant">Baris terakhir di tenant: {sampleContacts.length} contoh terbaru.</p>
|
||||
{sampleContacts.length === 0 ? (
|
||||
<p className="text-warning text-sm">Belum ada contact sebelumnya.</p>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{sampleContacts.map((contact) => (
|
||||
<li key={contact.id} className="rounded-xl border border-line bg-surface-container p-3">
|
||||
<p className="font-medium text-ink">{contact.fullName}</p>
|
||||
<p className="text-xs text-outline">{contact.phoneNumber}</p>
|
||||
<p className="text-xs text-outline">Created: {formatDate(contact.createdAt)}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<p className="text-xs text-on-surface-variant">Available tags: {tags.length > 0 ? tags.map((tag) => tag.name).join(", ") : "Belum ada tag."}</p>
|
||||
</div>
|
||||
</SectionCard>
|
||||
</div>
|
||||
</ShellPage>
|
||||
);
|
||||
}
|
||||
69
app/contacts/new/page.tsx
Normal file
69
app/contacts/new/page.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
import { ShellPage } from "@/components/page-templates";
|
||||
import { Button, SectionCard } from "@/components/ui";
|
||||
import { getSession } from "@/lib/auth";
|
||||
import { createContact } from "@/lib/admin-crud";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export default async function NewContactPage({
|
||||
searchParams
|
||||
}: {
|
||||
searchParams?: Promise<{ error?: string }>;
|
||||
}) {
|
||||
const params = await (searchParams ?? Promise.resolve({ error: undefined }));
|
||||
const error = params?.error;
|
||||
const errorMessage = error === "missing_fields" ? "Nama dan nomor wajib diisi." : error === "invalid_channel" ? "Channel tidak valid." : null;
|
||||
|
||||
const session = await getSession();
|
||||
const channels = session
|
||||
? await prisma.channel.findMany({
|
||||
where: { tenantId: session.tenantId },
|
||||
orderBy: { channelName: "asc" }
|
||||
})
|
||||
: [];
|
||||
|
||||
return (
|
||||
<ShellPage shell="admin" title="Create Contact" description="Form tambah contact manual untuk inbox dan broadcast.">
|
||||
<SectionCard title="Contact form">
|
||||
<form action={createContact} className="grid gap-4 md:max-w-2xl md:grid-cols-2">
|
||||
{errorMessage ? (
|
||||
<div className="md:col-span-2 rounded-xl border border-warning/30 bg-warning/10 p-3 text-sm text-warning">
|
||||
{errorMessage}
|
||||
</div>
|
||||
) : null}
|
||||
<input required name="fullName" className="rounded-xl border border-line px-4 py-3" placeholder="Full name" />
|
||||
<input required name="phoneNumber" className="rounded-xl border border-line px-4 py-3" placeholder="Phone number" />
|
||||
<input name="email" className="rounded-xl border border-line px-4 py-3" placeholder="Email" />
|
||||
<input name="countryCode" className="rounded-xl border border-line px-4 py-3" placeholder="Country code" />
|
||||
<label className="md:col-span-2 block text-sm">
|
||||
<span className="text-on-surface-variant">Channel</span>
|
||||
<select name="channelId" defaultValue="" className="mt-2 w-full rounded-xl border border-line px-4 py-3">
|
||||
<option value="">Tidak terkait channel</option>
|
||||
{channels.map((channel) => (
|
||||
<option key={channel.id} value={channel.id}>
|
||||
{channel.channelName} ({channel.displayPhoneNumber})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="md:col-span-2 block text-sm">
|
||||
<span className="text-on-surface-variant">Tags (pisah koma)</span>
|
||||
<input name="tags" className="mt-2 w-full rounded-xl border border-line px-4 py-3" placeholder="Enterprise, Hot Lead" />
|
||||
</label>
|
||||
<label className="md:col-span-2 block text-sm">
|
||||
<span className="text-on-surface-variant">Opt-in status</span>
|
||||
<select name="optInStatus" defaultValue="UNKNOWN" className="mt-2 w-full rounded-xl border border-line px-4 py-3">
|
||||
<option value="UNKNOWN">Unknown</option>
|
||||
<option value="OPTED_IN">Opted in</option>
|
||||
<option value="OPTED_OUT">Opted out</option>
|
||||
</select>
|
||||
</label>
|
||||
<div className="md:col-span-2">
|
||||
<Button type="submit" className="w-full">
|
||||
Save contact
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</SectionCard>
|
||||
</ShellPage>
|
||||
);
|
||||
}
|
||||
60
app/contacts/page.tsx
Normal file
60
app/contacts/page.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import Link from "next/link";
|
||||
|
||||
import { PlaceholderActions, ShellPage } from "@/components/page-templates";
|
||||
import { ContactSummaryCards, TablePlaceholder } from "@/components/placeholders";
|
||||
import { getContactsData } from "@/lib/platform-data";
|
||||
import { deleteContact } from "@/lib/admin-crud";
|
||||
|
||||
export default async function ContactsPage({
|
||||
searchParams
|
||||
}: {
|
||||
searchParams?: Promise<{ error?: string }>;
|
||||
}) {
|
||||
const params = await (searchParams ?? Promise.resolve({ error: undefined }));
|
||||
const contacts = await getContactsData();
|
||||
const error = params.error;
|
||||
const infoMessage = error === "contact_not_found"
|
||||
? "Contact tidak ditemukan."
|
||||
: error === "contact_has_conversations"
|
||||
? "Contact tidak bisa dihapus karena sudah punya riwayat percakapan."
|
||||
: error === "invalid_channel"
|
||||
? "Channel tidak valid."
|
||||
: null;
|
||||
|
||||
return (
|
||||
<ShellPage
|
||||
shell="admin"
|
||||
title="Contacts"
|
||||
description="Daftar contact, filter, import/export, dan akses ke detail screen."
|
||||
actions={<PlaceholderActions primaryHref="/contacts/new" primaryLabel="Add contact" secondaryHref="/contacts/import" secondaryLabel="Import CSV" />}
|
||||
>
|
||||
<ContactSummaryCards contacts={contacts} />
|
||||
{infoMessage ? <p className="rounded-xl border border-warning/30 bg-warning/10 p-3 text-sm text-warning">{infoMessage}</p> : null}
|
||||
<TablePlaceholder
|
||||
title="Contact list"
|
||||
columns={["Name", "Phone", "Tags", "Last Interaction", "Opt-in", "Actions"]}
|
||||
rows={contacts.map((contact) => [
|
||||
contact.fullName,
|
||||
contact.phone,
|
||||
contact.tags.join(", "),
|
||||
contact.lastInteraction,
|
||||
contact.optInStatus,
|
||||
<div key={contact.id} className="flex flex-wrap gap-2">
|
||||
<Link href={`/contacts/${contact.id}`} className="text-brand hover:underline">
|
||||
Detail
|
||||
</Link>
|
||||
<Link href={`/contacts/${contact.id}/edit`} className="text-brand hover:underline">
|
||||
Edit
|
||||
</Link>
|
||||
<form action={deleteContact} className="inline">
|
||||
<input type="hidden" name="contactId" value={contact.id} />
|
||||
<button type="submit" className="text-danger hover:underline">
|
||||
Hapus
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
])}
|
||||
/>
|
||||
</ShellPage>
|
||||
);
|
||||
}
|
||||
108
app/contacts/segments/[segmentId]/page.tsx
Normal file
108
app/contacts/segments/[segmentId]/page.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
45
app/contacts/segments/new/page.tsx
Normal file
45
app/contacts/segments/new/page.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
77
app/contacts/segments/page.tsx
Normal file
77
app/contacts/segments/page.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user