chore: initial project import

app/team/[userId]/edit/page.tsx

@@ -0,0 +1,84 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+
+import { RoleCode } from "@prisma/client";
+import { ShellPage } from "@/components/page-templates";
+import { Button, SectionCard } from "@/components/ui";
+import { getSession } from "@/lib/auth";
+import { updateTeamUser } from "@/lib/admin-crud";
+import { prisma } from "@/lib/prisma";
+
+export default async function EditUserPage({ params }: { params: Promise<{ userId: string }> }) {
+  const { userId } = await params;
+  const session = await getSession();
+  if (!session) {
+    redirect("/login");
+  }
+
+  const roles = await prisma.role.findMany({
+    where: { tenantId: session.tenantId, code: { in: [RoleCode.ADMIN_CLIENT, RoleCode.AGENT] } },
+    orderBy: { code: "asc" }
+  });
+  const fullUser = await prisma.user.findFirst({
+    where: { id: userId, tenantId: session.tenantId },
+    include: { role: true }
+  });
+  if (!fullUser) {
+    redirect("/team?error=user_not_found");
+  }
+
+  return (
+    <ShellPage shell="admin" title="Edit User" description="Update role dan status user.">
+      <SectionCard title="User form">
+        <form action={updateTeamUser} className="grid gap-4 md:max-w-2xl">
+          <input type="hidden" name="userId" value={fullUser.id} />
+          <input
+            name="fullName"
+            required
+            defaultValue={fullUser.fullName}
+            className="rounded-xl border border-line px-4 py-3"
+          />
+          <input
+            name="email"
+            required
+            type="email"
+            defaultValue={fullUser.email}
+            className="rounded-xl border border-line px-4 py-3"
+          />
+          <label className="block text-sm">
+            <span className="text-on-surface-variant">Role</span>
+            <select name="roleId" defaultValue={fullUser.roleId} className="mt-2 w-full rounded-xl border border-line px-4 py-3">
+              {roles.map((role) => (
+                <option key={role.id} value={role.id}>
+                  {role.name}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label className="block text-sm">
+            <span className="text-on-surface-variant">Status</span>
+            <select name="status" defaultValue={fullUser.status} className="mt-2 w-full rounded-xl border border-line px-4 py-3">
+              <option value="INVITED">Invited</option>
+              <option value="ACTIVE">Active</option>
+              <option value="DISABLED">Disabled</option>
+            </select>
+          </label>
+          <input
+            name="password"
+            type="password"
+            placeholder="Password baru (opsional)"
+            className="md:col-span-2 rounded-xl border border-line px-4 py-3"
+          />
+          <div className="md:col-span-2 flex gap-3">
+            <Button type="submit" className="rounded-xl">
+              Save changes
+            </Button>
+            <Link href={`/team/${fullUser.id}`} className="text-on-surface-variant hover:underline">
+              Cancel
+            </Link>
+          </div>
+        </form>
+      </SectionCard>
+    </ShellPage>
+  );
+}

app/team/[userId]/page.tsx

@@ -0,0 +1,58 @@
+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 UserDetailPage({ params }: { params: Promise<{ userId: string }> }) {
+  const { userId } = await params;
+  const session = await getSession();
+  if (!session) {
+    redirect("/login");
+  }
+
+  const user = await prisma.user.findFirst({
+    where: { id: userId, tenantId: session.tenantId },
+    include: { role: true, assignedConversations: true }
+  });
+
+  if (!user) {
+    redirect("/team?error=user_not_found");
+  }
+
+  return (
+    <ShellPage
+      shell="admin"
+      title="User Detail"
+      description="Role, status, assigned conversations, dan snapshot performa."
+      actions={<Link href={`/team/${user.id}/edit`}>Edit user</Link>}
+    >
+      <div className="grid gap-6 xl:grid-cols-2">
+        <SectionCard title="User profile">
+          <p className="text-sm text-on-surface-variant">
+            <strong>Nama:</strong> {user.fullName}
+          </p>
+          <p className="text-sm text-on-surface-variant">
+            <strong>Email:</strong> {user.email}
+          </p>
+          <p className="text-sm text-on-surface-variant">
+            <strong>Role:</strong> {user.role.name}
+          </p>
+          <p className="text-sm text-on-surface-variant">
+            <strong>Status:</strong> {user.status}
+          </p>
+          <p className="text-sm text-on-surface-variant">
+            <strong>Last login:</strong> {user.lastLoginAt?.toLocaleString() || "-"}
+          </p>
+        </SectionCard>
+        <SectionCard title="Performance snapshot">
+          <p className="text-sm text-on-surface-variant">Handled conversations: {user.assignedConversations.length}</p>
+          <p className="text-sm text-on-surface-variant">Avg response time: -</p>
+          <p className="text-sm text-on-surface-variant">Resolved count: -</p>
+        </SectionCard>
+      </div>
+    </ShellPage>
+  );
+}

app/team/new/page.tsx

@@ -0,0 +1,66 @@
+import { redirect } from "next/navigation";
+
+import { ShellPage } from "@/components/page-templates";
+import { Button, SectionCard } from "@/components/ui";
+import { getSession } from "@/lib/auth";
+import { createTeamUser } from "@/lib/admin-crud";
+import { prisma } from "@/lib/prisma";
+
+export default async function NewUserPage({
+  searchParams
+}: {
+  searchParams?: Promise<{ error?: string }>; 
+}) {
+  const params = await (searchParams ?? Promise.resolve({ error: undefined }));
+  const session = await getSession();
+  if (!session) {
+    redirect("/login");
+  }
+
+  const roles = await prisma.role.findMany({
+    where: { tenantId: session.tenantId, code: { in: ["ADMIN_CLIENT", "AGENT"] } },
+    orderBy: { code: "asc" }
+  });
+  const error = params?.error;
+  const errorMessage = error === "missing_fields" ? "Lengkapi nama, email, dan role." : error === "invalid_role" ? "Role tidak valid." : null;
+
+  return (
+    <ShellPage shell="admin" title="Create User" description="Tambah admin client atau agent baru.">
+      <SectionCard title="User form">
+        <form action={createTeamUser} 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="fullName" required placeholder="Full name" className="rounded-xl border border-line px-4 py-3" />
+          <input name="email" required type="email" placeholder="Email" 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">Role</span>
+            <select name="roleId" required className="mt-2 w-full rounded-xl border border-line px-4 py-3">
+              <option value="">Pilih role</option>
+              {roles.map((role) => (
+                <option key={role.id} value={role.id}>
+                  {role.name}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label className="md:col-span-2 block text-sm">
+            <span className="text-on-surface-variant">Status</span>
+            <select name="status" defaultValue="INVITED" className="mt-2 w-full rounded-xl border border-line px-4 py-3">
+              <option value="INVITED">Invited</option>
+              <option value="ACTIVE">Active</option>
+              <option value="DISABLED">Disabled</option>
+            </select>
+          </label>
+          <input
+            name="password"
+            type="password"
+            placeholder="Password (wajib untuk status Active)"
+            className="md:col-span-2 rounded-xl border border-line px-4 py-3"
+          />
+          <Button type="submit" className="md:col-span-2 w-full">
+            Save user
+          </Button>
+        </form>
+      </SectionCard>
+    </ShellPage>
+  );
+}

app/team/page.tsx

@@ -0,0 +1,64 @@
+import Link from "next/link";
+
+import { PlaceholderActions, ShellPage } from "@/components/page-templates";
+import { TablePlaceholder, TeamSummaryCards } from "@/components/placeholders";
+import { getTeamData } from "@/lib/platform-data";
+import { deleteTeamUser } from "@/lib/admin-crud";
+
+export default async function TeamPage({
+  searchParams
+}: {
+  searchParams?: Promise<{ error?: string }>; 
+}) {
+  const params = await (searchParams ?? Promise.resolve({ error: undefined }));
+  const users = await getTeamData();
+  const error = params.error;
+  const infoMessage = error === "user_not_found"
+    ? "User tidak ditemukan."
+    : error === "user_has_campaigns"
+      ? "User tidak bisa dihapus karena pernah membuat campaign."
+    : error === "self_delete_not_allowed"
+      ? "Tidak bisa menghapus akun sendiri."
+      : error === "invalid_role"
+        ? "Role tidak valid."
+        : error === "missing_fields"
+          ? "Pastikan semua kolom wajib terisi."
+          : null;
+
+  return (
+    <ShellPage
+      shell="admin"
+      title="Team / Users"
+      description="Kelola admin client dan agent di tenant."
+      actions={<PlaceholderActions primaryHref="/team/new" primaryLabel="Create user" secondaryHref="/team/performance" secondaryLabel="Team performance" />}
+    >
+      <TeamSummaryCards users={users} />
+      {infoMessage ? <p className="rounded-xl border border-warning/30 bg-warning/10 p-3 text-sm text-warning">{infoMessage}</p> : null}
+      <TablePlaceholder
+        title="Users list"
+        columns={["Name", "Email", "Role", "Status", "Last login", "Actions"]}
+        rows={users.map((user) => [
+          user.fullName,
+          user.email,
+          user.role,
+          user.status,
+          user.lastLogin,
+          <div key={user.id} className="flex gap-2">
+            <Link href={`/team/${user.id}`} className="text-brand hover:underline">
+              Detail
+            </Link>
+            <Link href={`/team/${user.id}/edit`} className="text-brand hover:underline">
+              Edit
+            </Link>
+            <form action={deleteTeamUser} className="inline">
+              <input type="hidden" name="userId" value={user.id} />
+              <button type="submit" className="text-danger hover:underline">
+                Delete
+              </button>
+            </form>
+          </div>
+        ])}
+      />
+    </ShellPage>
+  );
+}

app/team/performance/page.tsx

@@ -0,0 +1,90 @@
+import { redirect } from "next/navigation";
+
+import { getSession } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+import { ShellPage } from "@/components/page-templates";
+import { TablePlaceholder } from "@/components/placeholders";
+
+const AVERAGE_RESPONSE_DIVISOR = 1;
+
+function formatDuration(ms: number | null) {
+  if (!ms || ms < 0) {
+    return "-";
+  }
+
+  const totalMinutes = Math.floor(ms / 60000);
+  const minutes = totalMinutes % 60;
+  const seconds = Math.floor((ms % 60000) / 1000);
+
+  if (totalMinutes < 60) {
+    return `${totalMinutes}m ${seconds}s`;
+  }
+
+  const hours = Math.floor(totalMinutes / 60);
+  return `${hours}h ${minutes}m`;
+}
+
+export default async function TeamPerformancePage() {
+  const session = await getSession();
+  if (!session) {
+    redirect("/login");
+  }
+
+  if (session.role !== "admin_client") {
+    redirect("/unauthorized");
+  }
+
+  const agents = await prisma.user.findMany({
+    where: {
+      tenantId: session.tenantId,
+      role: { code: "AGENT" }
+    },
+    include: {
+      assignedConversations: {
+        select: {
+          status: true,
+          firstMessageAt: true,
+          lastOutboundAt: true
+        }
+      }
+    },
+    orderBy: { fullName: "asc" }
+  });
+
+  const rows = agents.map((agent) => {
+    const handled = agent.assignedConversations.length;
+    const resolved = agent.assignedConversations.filter((item) => item.status === "RESOLVED").length;
+    const workload = agent.assignedConversations.filter((item) => item.status === "OPEN" || item.status === "PENDING").length;
+
+    const responseSamples = agent.assignedConversations
+      .filter((item) => item.firstMessageAt && item.lastOutboundAt)
+      .map((item) => {
+        if (!item.firstMessageAt || !item.lastOutboundAt) {
+          return null;
+        }
+
+        return item.lastOutboundAt.getTime() - item.firstMessageAt.getTime();
+      })
+      .filter((item): item is number => item !== null && item >= 0);
+
+    const avgResponse =
+      responseSamples.length > 0
+        ? formatDuration(
+            responseSamples.reduce((sum, value) => sum + value, 0) /
+              Math.max(AVERAGE_RESPONSE_DIVISOR, responseSamples.length)
+          )
+        : "-";
+
+    return [agent.fullName, String(handled), avgResponse, String(resolved), `${workload} open`];
+  });
+
+  return (
+    <ShellPage shell="admin" title="Team Performance" description="Leaderboard performa agent dan workload snapshot.">
+      <TablePlaceholder
+        title="Performance table"
+        columns={["Agent", "Handled", "Avg response", "Resolved", "Workload"]}
+        rows={rows}
+      />
+    </ShellPage>
+  );
+}