@blawness/admin-kit 0.2.0

package/src/lib/r2.ts

@@ -0,0 +1,70 @@
+import { S3Client, PutObjectCommand, DeleteObjectCommand } from "@aws-sdk/client-s3";
+import sharp from "sharp";
+
+const endpoint = process.env.R2_ENDPOINT;
+const accessKeyId = process.env.R2_ACCESS_KEY_ID;
+const secretAccessKey = process.env.R2_SECRET_ACCESS_KEY;
+
+if (!endpoint) throw new Error("admin-kit: R2_ENDPOINT env var is required");
+if (!accessKeyId || !secretAccessKey) throw new Error("admin-kit: R2_ACCESS_KEY_ID and R2_SECRET_ACCESS_KEY env vars are required");
+
+export const R2_BUCKET = process.env.R2_BUCKET ?? "lipan-ri";
+/** Base URL publik untuk menyajikan objek (r2.dev atau custom domain), tanpa trailing slash. */
+export const R2_PUBLIC_URL = (process.env.R2_PUBLIC_URL ?? "").replace(/\/$/, "");
+
+export const r2 = new S3Client({
+  region: "auto",
+  endpoint,
+  credentials:
+    accessKeyId && secretAccessKey
+      ? { accessKeyId, secretAccessKey }
+      : undefined,
+});
+
+/**
+ * Resize + kompres gambar lalu unggah ke R2.
+ * Apa pun ukuran input, hasil disimpan maksimal 1600px lebar, JPEG q80.
+ * Mengembalikan URL publik yang siap disimpan ke kolom `featured_image`.
+ */
+export async function uploadImage(
+  input: Buffer,
+  /** key/nama objek di bucket, tanpa ekstensi — mis. "berita/slug-artikel" */
+  keyBase: string
+): Promise<{ url: string; key: string; size: number }> {
+  const optimized = await sharp(input)
+    .rotate() // hormati orientasi EXIF
+    .resize({ width: 1600, withoutEnlargement: true })
+    .jpeg({ quality: 80, mozjpeg: true })
+    .toBuffer();
+
+  const key = `${keyBase.replace(/^\/+/, "")}.jpg`;
+
+  await r2.send(
+    new PutObjectCommand({
+      Bucket: R2_BUCKET,
+      Key: key,
+      Body: optimized,
+      ContentType: "image/jpeg",
+      CacheControl: "public, max-age=31536000, immutable",
+    })
+  );
+
+  if (!R2_PUBLIC_URL) {
+    throw new Error("R2_PUBLIC_URL belum di-set — tidak bisa menyusun URL publik.");
+  }
+
+  return { url: `${R2_PUBLIC_URL}/${key}`, key, size: optimized.length };
+}
+
+/**
+ * Hapus objek dari R2 berdasarkan URL publiknya. Hanya menghapus objek yang
+ * memang berada di bawah R2_PUBLIC_URL — URL eksternal/seed diabaikan dengan
+ * aman (return false). Kegagalan jaringan dibiarkan melempar ke pemanggil.
+ */
+export async function deleteObjectByUrl(url: string): Promise<boolean> {
+  if (!R2_PUBLIC_URL || !url.startsWith(`${R2_PUBLIC_URL}/`)) return false;
+  const key = url.slice(R2_PUBLIC_URL.length + 1);
+  if (!key) return false;
+  await r2.send(new DeleteObjectCommand({ Bucket: R2_BUCKET, Key: key }));
+  return true;
+}

package/src/lib/sanitize.ts

@@ -0,0 +1,29 @@
+import sanitizeHtmlLib from "sanitize-html";
+
+/**
+ * Sanitize editor HTML before persisting (content is rendered via
+ * dangerouslySetInnerHTML on the public site).
+ *
+ * Uses `sanitize-html` (pure JS, htmlparser2 — no jsdom) so it loads in the
+ * Vercel serverless runtime; `isomorphic-dompurify`/jsdom failed to load there
+ * ("Failed to load external module" → /admin/posts 500).
+ *
+ * Security posture (unchanged): strict tag allowlist, no `target` (avoids
+ * tab-napping), only http(s)/mailto + root-relative URLs, and protocol-relative
+ * `//host` URLs are rejected.
+ */
+export function sanitizeHtml(dirty: string): string {
+  return sanitizeHtmlLib(dirty, {
+    allowedTags: [
+      "p", "br", "strong", "em", "u", "s", "h2", "h3", "h4",
+      "ul", "ol", "li", "blockquote", "a", "img", "figure", "figcaption",
+    ],
+    allowedAttributes: {
+      a: ["href", "rel", "title"],
+      img: ["src", "alt", "title"],
+    },
+    allowedSchemes: ["http", "https", "mailto"],
+    allowedSchemesByTag: { img: ["http", "https"] },
+    allowProtocolRelative: false,
+  });
+}

package/src/lib/slug.ts

@@ -0,0 +1,9 @@
+export function slugify(input: string): string {
+  return input
+    .toLowerCase()
+    .normalize("NFKD")
+    .replace(/[̀-ͯ]/g, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 80);
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/screens/login/actions.ts

@@ -0,0 +1,38 @@
+"use server";
+
+import { redirect } from "next/navigation";
+import { signIn } from "../../auth/index";
+
+export type LoginState = { error?: string };
+
+export async function loginAction(
+  _prev: LoginState,
+  formData: FormData,
+): Promise<LoginState> {
+  try {
+    const result = await signIn("credentials", {
+      email: formData.get("email"),
+      password: formData.get("password"),
+      redirect: false,
+    });
+
+    // Auth.js returns the redirect URL when redirect:false
+    // On failure it returns a URL with ?error= param
+    if (typeof result === "string" && result.includes("error=")) {
+      return { error: "Email atau password salah." };
+    }
+
+    redirect("/admin");
+  } catch (error) {
+    // Catch CredentialsSignin and other auth errors thrown by next-auth
+    // NEXT_REDIRECT thrown by redirect() must propagate
+    if (
+      error instanceof Error &&
+      "digest" in error &&
+      String((error as { digest: string }).digest).startsWith("NEXT_REDIRECT")
+    ) {
+      throw error;
+    }
+    return { error: "Email atau password salah." };
+  }
+}

package/src/screens/login/page.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useActionState } from "react";
+import { loginAction, type LoginState } from "./actions";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+
+export const dynamic = "force-dynamic";
+
+export default function LoginScreen() {
+  const [state, action, pending] = useActionState<LoginState, FormData>(
+    loginAction,
+    {},
+  );
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-navy-50 px-4">
+      <form
+        action={action}
+        className="w-full max-w-sm bg-white rounded-2xl shadow-xl ring-1 ring-navy-100 p-8 space-y-4"
+      >
+        <h1 className="font-heading text-2xl font-bold text-navy-900">
+          Masuk Admin
+        </h1>
+        <div className="space-y-1">
+          <label htmlFor="email" className="text-sm font-medium text-navy-900">
+            Email
+          </label>
+          <Input id="email" name="email" type="email" required autoComplete="email" />
+        </div>
+        <div className="space-y-1">
+          <label htmlFor="password" className="text-sm font-medium text-navy-900">
+            Password
+          </label>
+          <Input id="password" name="password" type="password" required autoComplete="current-password" />
+        </div>
+        {state.error && (
+          <p className="text-sm text-red-600" role="alert">
+            {state.error}
+          </p>
+        )}
+        <Button type="submit" className="w-full" disabled={pending}>
+          {pending ? "Memproses…" : "Masuk"}
+        </Button>
+      </form>
+    </div>
+  );
+}

package/src/screens/media/actions.ts

@@ -0,0 +1,34 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { requireUser } from "../../lib/auth-helpers";
+import { uploadImage } from "../../lib/r2";
+import { db } from "../../db/index";
+import { media } from "../../db/schema";
+
+const MAX_BYTES = 8 * 1024 * 1024;
+const OK_TYPES = ["image/jpeg", "image/png", "image/webp", "image/gif"];
+
+export async function uploadImageAction(formData: FormData): Promise<{ url?: string; error?: string }> {
+  await requireUser();
+  const file = formData.get("file");
+  if (!(file instanceof File)) return { error: "Tidak ada berkas." };
+  if (!OK_TYPES.includes(file.type)) return { error: "Format gambar tidak didukung." };
+  if (file.size > MAX_BYTES) return { error: "Ukuran gambar maksimal 8MB." };
+
+  const buf = Buffer.from(await file.arrayBuffer());
+  const keyBase = `uploads/${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+
+  let url: string;
+  try {
+    // sharp (inside uploadImage) throws on data that isn't really an image,
+    // e.g. a non-image file sent with a spoofed image MIME type.
+    ({ url } = await uploadImage(buf, keyBase));
+  } catch {
+    return { error: "Gambar gagal diproses. Pastikan berkas benar-benar gambar." };
+  }
+
+  await db.insert(media).values({ url, altText: file.name });
+  revalidatePath("/admin/media");
+  return { url };
+}

package/src/screens/media/lib.ts

@@ -0,0 +1,39 @@
+import { redirect } from "next/navigation";
+import { requireUser } from "../../lib/auth-helpers";
+import { deleteObjectByUrl } from "../../lib/r2";
+import { getMediaById, deleteMediaRow } from "../../lib/admin/media";
+import { revalidatePath } from "next/cache";
+
+/**
+ * Generic delete-media logic, extracted from the server action so that the
+ * consuming app can inject its own reference checker (posts, banners, etc.).
+ *
+ * @param formData - FormData containing "id" field
+ * @param referenceChecker - async fn that returns the count of references to the given URL
+ */
+export async function handleDeleteMedia(
+  formData: FormData,
+  referenceChecker: (url: string) => Promise<number>,
+): Promise<void> {
+  await requireUser();
+  const id = Number(formData.get("id"));
+  if (!id) return;
+
+  const row = await getMediaById(id);
+  if (!row) return;
+
+  const refs = await referenceChecker(row.url);
+  if (refs > 0) {
+    redirect(
+      `/admin/media?error=${encodeURIComponent(
+        `Gambar masih dipakai oleh ${refs} konten. Lepas dulu dari berita/banner sebelum menghapus.`
+      )}`
+    );
+  }
+
+  // Hapus objek R2 lebih dulu; bila gagal, biarkan melempar agar row DB tetap
+  // ada dan operasi bisa diulang (hindari row hilang tapi objek menggantung).
+  await deleteObjectByUrl(row.url);
+  await deleteMediaRow(id);
+  revalidatePath("/admin/media");
+}

package/src/screens/media/page.tsx

@@ -0,0 +1,82 @@
+import { listMedia } from "../../lib/admin/media";
+import { requireUser } from "../../lib/auth-helpers";
+import { ConfirmDelete } from "../../components/confirm-delete";
+import { GalleryUploader } from "./uploader";
+import { Trash2, ImageOff, AlertCircle } from "lucide-react";
+
+export const dynamic = "force-dynamic";
+
+export default async function MediaLibraryScreen({
+  deleteAction,
+  searchParams,
+}: {
+  deleteAction: (fd: FormData) => Promise<void>;
+  searchParams: Promise<{ error?: string }>;
+}) {
+  await requireUser();
+  const items = await listMedia();
+  const { error } = await searchParams;
+
+  return (
+    <div className="max-w-5xl">
+      <div className="mb-6">
+        <h1 className="font-heading text-2xl font-bold text-navy-900">Galeri</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          {items.length} gambar tersimpan
+        </p>
+      </div>
+
+      {error && (
+        <p className="mb-4 flex items-center gap-1.5 rounded-md bg-red-50 px-3 py-2 text-sm text-red-600 ring-1 ring-red-100" role="alert">
+          <AlertCircle className="h-4 w-4 shrink-0" />
+          {error}
+        </p>
+      )}
+
+      <GalleryUploader />
+
+      {items.length === 0 ? (
+        <div className="mt-6 flex flex-col items-center justify-center rounded-xl border border-dashed border-navy-200 bg-white py-16 text-center">
+          <ImageOff className="h-8 w-8 text-navy-300" />
+          <p className="mt-3 text-sm font-medium text-navy-700">Belum ada gambar</p>
+          <p className="text-xs text-muted-foreground">
+            Unggah gambar pertama lewat kotak di atas.
+          </p>
+        </div>
+      ) : (
+        <div className="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
+          {items.map((m) => (
+            <div
+              key={m.id}
+              className="group relative overflow-hidden rounded-xl border border-navy-100 bg-white shadow-sm"
+            >
+              {/* eslint-disable-next-line @next/next/no-img-element -- R2 URL */}
+              <img
+                src={m.url}
+                alt={m.altText ?? ""}
+                className="aspect-square w-full object-cover transition-transform duration-300 group-hover:scale-105"
+              />
+              <div className="absolute right-2 top-2">
+                <ConfirmDelete
+                  action={deleteAction}
+                  id={m.id}
+                  title="Hapus gambar?"
+                  description="Gambar akan dihapus permanen dari media."
+                  trigger={
+                    <button
+                      type="button"
+                      aria-label="Hapus gambar"
+                      className="flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-navy-600 opacity-100 shadow-sm ring-1 ring-navy-100 backdrop-blur transition-all hover:bg-red-50 hover:text-red-600 sm:opacity-0 sm:group-hover:opacity-100"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </button>
+                  }
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/screens/media/uploader.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Images } from "lucide-react";
+import { ImageUpload } from "../../components/admin/image-upload";
+import { uploadImageAction } from "./actions";
+
+export function GalleryUploader() {
+  const router = useRouter();
+  return (
+    <div className="max-w-xl rounded-xl border border-navy-100 bg-white p-5 shadow-sm">
+      <div className="mb-3 flex items-center gap-2">
+        <Images className="h-4 w-4 text-brand-600" />
+        <p className="text-sm font-semibold text-navy-900">Tambah gambar ke galeri</p>
+      </div>
+      <ImageUpload uploadAction={uploadImageAction} onChange={() => router.refresh()} />
+    </div>
+  );
+}

package/src/screens/users/actions.ts

@@ -0,0 +1,71 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import { z } from "zod";
+import { requireAdmin } from "../../lib/auth-helpers";
+import { isUniqueViolation, isForeignKeyViolation } from "../../lib/db-errors";
+import { createUser, updateUserPassword, updateUserRole, deleteUser } from "../../lib/admin/users";
+
+const createSchema = z.object({
+  email: z.string().email(),
+  name: z.string().min(1),
+  password: z.string().min(8),
+  role: z.enum(["admin", "editor"]),
+});
+
+export async function createUserAction(formData: FormData) {
+  await requireAdmin();
+  const parsed = createSchema.safeParse({
+    email: formData.get("email"),
+    name: formData.get("name"),
+    password: formData.get("password"),
+    role: formData.get("role"),
+  });
+  if (!parsed.success) {
+    redirect("/admin/users?error=Data+tidak+valid+(email+benar,+password+min+8+karakter)");
+  }
+  const { email, name, password, role } = parsed.data;
+  try {
+    await createUser(email, name, password, role);
+  } catch (e) {
+    if (isUniqueViolation(e)) {
+      redirect("/admin/users?error=Email+sudah+terdaftar");
+    }
+    throw e;
+  }
+  revalidatePath("/admin/users");
+}
+
+export async function resetPasswordAction(formData: FormData) {
+  await requireAdmin();
+  const id = Number(formData.get("id"));
+  const password = String(formData.get("password") ?? "");
+  if (!id || password.length < 8) return;
+  await updateUserPassword(id, password);
+  revalidatePath("/admin/users");
+}
+
+export async function setRoleAction(formData: FormData) {
+  await requireAdmin();
+  const id = Number(formData.get("id"));
+  const role = String(formData.get("role") ?? "");
+  if (!id || (role !== "admin" && role !== "editor")) return;
+  await updateUserRole(id, role);
+  revalidatePath("/admin/users");
+}
+
+export async function deleteUserAction(formData: FormData) {
+  const session = await requireAdmin();
+  const id = Number(formData.get("id"));
+  if (!id || id === Number(session.user.id)) return; // never delete yourself / invalid id
+  try {
+    await deleteUser(id);
+  } catch (e) {
+    if (isForeignKeyViolation(e)) {
+      redirect("/admin/users?error=User+ini+masih+menjadi+penulis+berita");
+    }
+    throw e;
+  }
+  revalidatePath("/admin/users");
+}

package/src/screens/users/page.tsx

@@ -0,0 +1,128 @@
+import { requireAdmin } from "../../lib/auth-helpers";
+import { listUsers } from "../../lib/admin/users";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { ConfirmDelete } from "../../components/confirm-delete";
+import { createUserAction, resetPasswordAction, setRoleAction, deleteUserAction } from "./actions";
+import { UserPlus, KeyRound, AlertCircle } from "lucide-react";
+
+export const dynamic = "force-dynamic";
+
+const selectClass =
+  "h-9 rounded-md border border-navy-200 bg-white px-2.5 text-sm text-navy-900 outline-none transition-colors focus:border-brand-400 focus:ring-2 focus:ring-brand-100";
+
+export default async function UsersScreen({
+  searchParams,
+}: {
+  searchParams: Promise<{ error?: string }>;
+}) {
+  const session = await requireAdmin();
+  const rows = await listUsers();
+  const { error } = await searchParams;
+
+  return (
+    <div className="max-w-3xl">
+      <h1 className="font-heading text-2xl font-bold text-navy-900">User</h1>
+      <p className="mt-1 text-sm text-muted-foreground">{rows.length} akun</p>
+
+      {error && (
+        <p className="mt-4 flex items-center gap-1.5 rounded-md bg-red-50 px-3 py-2 text-sm text-red-600 ring-1 ring-red-100" role="alert">
+          <AlertCircle className="h-4 w-4 shrink-0" />
+          {error}
+        </p>
+      )}
+
+      <form
+        action={createUserAction}
+        className="mt-6 grid grid-cols-1 gap-2.5 rounded-xl border border-navy-100 bg-white p-5 shadow-sm sm:grid-cols-2"
+      >
+        <p className="flex items-center gap-2 text-sm font-semibold text-navy-900 sm:col-span-2">
+          <UserPlus className="h-4 w-4 text-brand-600" />
+          Tambah user baru
+        </p>
+        <Input name="name" placeholder="Nama" required />
+        <Input name="email" type="email" placeholder="Email" required />
+        <Input name="password" type="password" placeholder="Password (min 8)" required />
+        <select name="role" className={selectClass}>
+          <option value="editor">Editor</option>
+          <option value="admin">Admin</option>
+        </select>
+        <Button type="submit" className="sm:col-span-2">
+          <UserPlus className="h-4 w-4" />
+          Tambah User
+        </Button>
+      </form>
+
+      <ul className="mt-6 divide-y divide-navy-50 overflow-hidden rounded-xl border border-navy-100 bg-white shadow-sm">
+        {rows.map((u) => {
+          const isSelf = u.id === Number(session.user.id);
+          const isAdmin = (u.role ?? "editor") === "admin";
+          return (
+            <li key={u.id} className="space-y-3 p-4">
+              <div className="flex items-center justify-between gap-3">
+                <div className="flex min-w-0 items-center gap-3">
+                  <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-navy-100 text-sm font-semibold uppercase text-navy-700">
+                    {u.name?.[0] ?? u.email[0]}
+                  </span>
+                  <div className="min-w-0">
+                    <p className="flex items-center gap-2 font-medium text-navy-900">
+                      <span className="truncate">{u.name}</span>
+                      {isSelf && (
+                        <span className="rounded bg-navy-100 px-1.5 py-0.5 text-[10px] font-medium text-navy-500">
+                          Anda
+                        </span>
+                      )}
+                    </p>
+                    <p className="truncate text-xs text-muted-foreground">{u.email}</p>
+                  </div>
+                </div>
+                <span
+                  className={`shrink-0 rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize ring-1 ${
+                    isAdmin
+                      ? "bg-gold-100 text-gold-700 ring-gold-200"
+                      : "bg-brand-50 text-brand-700 ring-brand-100"
+                  }`}
+                >
+                  {u.role ?? "editor"}
+                </span>
+              </div>
+
+              <div className="flex flex-wrap items-center gap-2 border-t border-navy-50 pt-3">
+                <form action={setRoleAction} className="flex items-center gap-2">
+                  <input type="hidden" name="id" value={u.id} />
+                  <select name="role" defaultValue={u.role ?? "editor"} className="h-8 rounded-md border border-navy-200 bg-white px-2 text-xs">
+                    <option value="editor">Editor</option>
+                    <option value="admin">Admin</option>
+                  </select>
+                  <Button size="sm" variant="outline" type="submit">Set Role</Button>
+                </form>
+                <form action={resetPasswordAction} className="flex items-center gap-2">
+                  <input type="hidden" name="id" value={u.id} />
+                  <Input name="password" type="password" placeholder="Password baru" className="h-8 w-36" />
+                  <Button size="sm" variant="outline" type="submit">
+                    <KeyRound className="h-3.5 w-3.5" />
+                    Reset
+                  </Button>
+                </form>
+                {!isSelf && (
+                  <div className="ml-auto">
+                    <ConfirmDelete
+                      action={deleteUserAction}
+                      id={u.id}
+                      title="Hapus user?"
+                      description={
+                        <>
+                          User <span className="font-medium text-navy-900">{u.email}</span> akan dihapus.
+                        </>
+                      }
+                    />
+                  </div>
+                )}
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

package/src/shell/actions.ts

@@ -0,0 +1,6 @@
+"use server";
+import { signOut } from "../auth/index";
+
+export async function signOutAction() {
+  await signOut({ redirectTo: "/admin/login" });
+}

package/src/shell/layout.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+import { auth } from "../auth/index";
+import { Toaster } from "sonner";
+import { AdminSidebar, type NavItem } from "./sidebar";
+
+export async function AdminLayout({
+  navItems,
+  children,
+  logoSrc,
+  brandName,
+}: {
+  navItems: NavItem[];
+  children: ReactNode;
+  logoSrc?: string;
+  brandName?: string;
+}) {
+  const session = await auth();
+
+  // The only unauthenticated route reachable here is /admin/login: the proxy
+  // redirects every other /admin/* to login, and each admin page additionally
+  // calls requireUser()/requireAdmin() before touching data.
+  // So rendering bare children here (no shell) cannot leak protected content.
+  if (!session?.user) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div className="flex min-h-screen bg-navy-50/60">
+      <AdminSidebar role={session.user.role} navItems={navItems} logoSrc={logoSrc} brandName={brandName} />
+      <div className="flex min-w-0 flex-1 flex-col">
+        <header className="sticky top-0 z-10 flex h-16 items-center justify-between border-b border-navy-100 bg-white/80 px-6 backdrop-blur-sm">
+          <span className="text-sm font-medium text-navy-500">Panel Admin</span>
+          <div className="flex items-center gap-2.5">
+            <span className="hidden text-sm text-navy-600 sm:inline">
+              {session.user.email}
+            </span>
+            <span className="inline-flex items-center rounded-full bg-brand-50 px-2.5 py-1 text-xs font-semibold capitalize text-brand-700 ring-1 ring-brand-100">
+              {session.user.role}
+            </span>
+          </div>
+        </header>
+        <main className="flex-1 p-6 md:p-8">{children}</main>
+      </div>
+      <Toaster />
+    </div>
+  );
+}