Amadea
61ce9d7926
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
40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import Link from "next/link";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function StatCard({
|
|
label,
|
|
value,
|
|
icon,
|
|
gradient = "grad-primary",
|
|
delta,
|
|
hint,
|
|
href,
|
|
}: {
|
|
label: string;
|
|
value: ReactNode;
|
|
icon: ReactNode;
|
|
gradient?: string;
|
|
delta?: string;
|
|
hint?: string;
|
|
href?: string;
|
|
}) {
|
|
const body = (
|
|
<div className="flex h-full items-center gap-4 rounded-[20px] border border-ink-100 bg-surface p-4 shadow-[var(--shadow-sm)] transition-all duration-150 hover:-translate-y-0.5 hover:shadow-[var(--shadow-md)]">
|
|
<span className={cn("flex size-11 shrink-0 items-center justify-center rounded-[14px] text-white", gradient)}>
|
|
{icon}
|
|
</span>
|
|
<div className="min-w-0">
|
|
<p className="truncate text-[12px] font-medium text-ink-500">{label}</p>
|
|
<div className="flex items-baseline gap-2">
|
|
<p className="font-num text-[26px] font-bold leading-tight text-ink-900">{value}</p>
|
|
{delta ? <span className="text-[12px] font-semibold text-mint-500">{delta}</span> : null}
|
|
</div>
|
|
{hint ? <p className="truncate text-[11px] text-ink-500">{hint}</p> : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
if (href) return <Link href={href}>{body}</Link>;
|
|
return body;
|
|
}
|