feat: implementasi Kodeva - sistem manajemen kursus coding

Fitur lengkap: - Auth JWT + RBAC (Admin/Teacher) + halaman login - Shell 3 kolom (left nav, topbar, right rail dashboard) - CRUD siswa + follow up kanban + status calon/student/ex - Dashboard: siswa aktif, kehadiran, bar sumber lead, perlu follow up - Pembayaran prorata per pertemuan (cash/transfer/qris) - Kelas, enrollment, generate sesi, kehadiran bulk - Jurnal aktivitas + upload multi-foto - Raport + placement test (tampil di detail siswa) - Pengaturan & seed data contoh Stack: Next.js 16, TypeScript, Tailwind v4, Prisma (SQLite), Recharts, Zod
2026-09-18 19:24:59 +07:00
commit 61ce9d7926
86 changed files with 13392 additions and 0 deletions
@@ -0,0 +1,125 @@
+import Link from "next/link";
+import { BellRing, Plus } from "lucide-react";
+import { prisma } from "@/lib/prisma";
+import { requireUser } from "@/lib/rbac";
+import { formatRelativeID } from "@/lib/utils";
+import { FOLLOW_UP_STATUSES, FOLLOW_UP_META } from "@/lib/constants";
+import { PageHeader } from "@/components/ui/page-header";
+import { Card } from "@/components/ui/card";
+import { Avatar } from "@/components/ui/avatar";
+import { EmptyState } from "@/components/ui/empty-state";
+import { FollowUpStatusForm } from "@/components/follow-up/status-form";
+import { SourceChip, StatusBadge } from "@/components/students/badges";
+import { cn } from "@/lib/utils";
+
+export const metadata = { title: "Follow Up — Kodeva" };
+
+export default async function FollowUpPage() {
+  await requireUser();
+
+  const followUps = await prisma.followUp.findMany({
+    include: { student: true, pic: true, activities: { orderBy: { createdAt: "desc" }, take: 1 } },
+    orderBy: { updatedAt: "desc" },
+  });
+
+  const columns = FOLLOW_UP_STATUSES.map((status) => ({
+    status,
+    items: followUps.filter((f) => f.status === status),
+  }));
+
+  const now = new Date();
+  const isDue = (d: Date | null) => d && d.getTime() <= now.getTime();
+
+  return (
+    <div>
+      <PageHeader
+        title="Follow Up Siswa"
+        description="Pantau dan pindahkan status follow up calon siswa."
+      />
+
+      {/* Quick create */}
+      <Card className="mb-6 p-4">
+        <form action="/follow-up" className="hidden">
+          <input type="hidden" name="q" value="" />
+        </form>
+        <Link href="/students?status=CALON_STUDENT">
+          <p className="flex items-center gap-2 text-[13px] font-medium text-ink-500">
+            <Plus className="size-4 text-brand-500" />
+            Follow up baru dibuat otomatis saat menambah calon siswa. Lihat calon siswa →
+          </p>
+        </Link>
+      </Card>
+
+      {/* Board */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
+        {columns.map((col) => {
+          const meta = FOLLOW_UP_META[col.status];
+          return (
+            <div key={col.status} className="rounded-[18px] bg-canvas p-2.5">
+              <div className="mb-2 flex items-center justify-between px-1.5">
+                <div className="flex items-center gap-2">
+                  <span className="size-2 rounded-full" style={{ backgroundColor: meta.color }} />
+                  <h3 className="text-[13px] font-semibold text-ink-900">{meta.label}</h3>
+                </div>
+                <span className="font-num rounded-full bg-surface px-2 py-0.5 text-[12px] font-bold text-ink-700">
+                  {col.items.length}
+                </span>
+              </div>
+
+              <div className="space-y-2.5">
+                {col.items.length === 0 ? (
+                  <div className="rounded-[12px] border border-dashed border-ink-300 py-6 text-center text-[12px] text-ink-500">
+                    Kosong
+                  </div>
+                ) : (
+                  col.items.map((f) => (
+                    <div key={f.id} className="rounded-[14px] border border-ink-100 bg-surface p-3 shadow-[var(--shadow-xs)]">
+                      <Link href={`/students/${f.student.id}`} className="flex items-center gap-2.5">
+                        <Avatar src={f.student.photoUrl} name={f.student.fullName} size={34} />
+                        <div className="min-w-0 flex-1">
+                          <p className="truncate text-[13px] font-semibold text-ink-900">{f.student.fullName}</p>
+                          <p className="truncate text-[11px] text-ink-500">{f.student.phone}</p>
+                        </div>
+                      </Link>
+
+                      <div className="mt-2 flex flex-wrap items-center gap-1.5">
+                        <SourceChip source={f.student.leadSource} />
+                        <StatusBadge status={f.student.status} />
+                      </div>
+
+                      <div className="mt-2.5 flex items-center justify-between gap-2">
+                        <FollowUpStatusForm id={f.id} status={f.status} />
+                        {f.nextFollowUpAt ? (
+                          <span
+                            className={cn(
+                              "text-[11px] font-medium",
+                              isDue(f.nextFollowUpAt) ? "text-danger-500" : "text-ink-500",
+                            )}
+                          >
+                            {formatRelativeID(f.nextFollowUpAt)}
+                          </span>
+                        ) : null}
+                      </div>
+
+                      {f.activities[0] ? (
+                        <p className="mt-2 line-clamp-2 rounded-[10px] bg-canvas px-2 py-1.5 text-[11.5px] text-ink-500">
+                          {f.activities[0].note}
+                        </p>
+                      ) : null}
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {followUps.length === 0 ? (
+        <div className="mt-6">
+          <EmptyState icon={<BellRing className="size-6" />} title="Belum ada follow up" description="Tambahkan calon siswa untuk mulai follow up." />
+        </div>
+      ) : null}
+    </div>
+  );
+}