Kalebun Panel

Modern admin dashboard boilerplate — Laravel 13 + Inertia.js + React 19 + TypeScript dengan design system oklch dan komponen dari shadcn/ui.

Screenshots

Dashboard

Products

Users

Roles

Filter DataTable

Mobile View

DataTable Mobile

Tech Stack

Fitur Utama

Design System (oklch)

• Color tokens berbasis oklch di resources/css/app.css
• Light & dark mode otomatis
• Brand color: rgb(14, 94, 157)
• Semua komponen responsive (mobile-first)

Layout

• Sidebar collapsible — persist state via localStorage, hover popover saat collapsed
• Header sticky — dark/light toggle, notification bell, profile dropdown
• Permission-based menu — menu otomatis tersembunyi jika user tidak punya permission
• Mobile drawer — sidebar full-screen di mobile
• Loading progress bar — brand color saat navigasi

CRUD Architecture

Setiap modul CRUD mengikuti pola yang sama:

Pages/Products/
├── Index.tsx       # CrudDataTable + mobileCard
├── Form.tsx        # Form fields (no submit logic, reusable)
├── Create.tsx      # Caption + Form + post
├── Edit.tsx        # Caption + Form + put
├── Show.tsx        # Detail grid (label-value)
├── Caption.tsx     # Header (back arrow + title + action buttons)
└── Interface.tsx   # Types, filters, columns, defaults

Keuntungan:

• Form.tsx single source of truth — tambah field sekali, berlaku di Create & Edit
• Interface.tsx centralized — semua type, column config, filter config di satu tempat
• Create/Edit sangat tipis (~30 lines) — hanya wrapper untuk submit logic
• Caption reusable — back button + title + Edit/Delete buttons

CrudLayout Global

Tersedia komponen layout CRUD global di components/crud/ yang bisa langsung dipakai:

import { CrudIndexLayout } from "@/components/crud/CrudIndexLayout";
import { CrudFormLayout } from "@/components/crud/CrudFormLayout";
import { CrudShowLayout } from "@/components/crud/CrudShowLayout";
import { CrudFormFooter, Breadcrumb } from "@/components/crud/CrudLayout";

CrudIndexLayout — layout halaman list lengkap:

<CrudIndexLayout
  title="Manajemen User"
  cardTitle="Daftar Pengguna"
  cardDescription="Kelola pengguna dan hak akses."
  data={users}
  columns={columns}
  routePrefix="/users"
  entityName="user"
  canCreate={hasPermission("create-users")}
  canEdit={hasPermission("edit-users")}
  canDelete={hasPermission("delete-users")}
/>

CrudFormLayout — layout halaman form create/edit:

<CrudFormLayout
  title="Tambah User"
  heading="Tambah User Baru"
  backRoute="/users"
  submitRoute="/users"
  formValues={data}
  isSubmitting={processing}
  setIsSubmitting={setProcessing}
>
  {/* Form fields */}
</CrudFormLayout>

CrudShowLayout — layout halaman detail:

<CrudShowLayout
  title="Detail User"
  heading="John Doe"
  backRoute="/users"
  editRoute="/users/edit/john"
  fields={[
    { label: "Email", value: user.email },
    { label: "Role", value: <Badge>{user.role}</Badge> },
  ]}
/>

CrudDataTable (Global)

Komponen tabel reusable yang bisa dipakai standalone di halaman manapun:

import { CrudDataTable } from "@/components/crud/CrudDataTable";

<CrudDataTable
  data={products}
  columns={columns}
  searchKeys={["name", "sku"]}
  searchPlaceholder="Cari produk..."
  title="Daftar Produk"
  subtitle="199 produk tersedia"
  addLabel="Tambah Produk"
  addHref="/products/create"
  filters={[{ key: "status", placeholder: "Status", options: [...] }]}
  entityName="produk"
  onView={handleView}
  onEdit={handleEdit}
  onDelete={handleDelete}
  onBulkDelete={handleBulkDelete}
  mobileCard={(item) => <MobileCard item={item} />}
/>

Fitur lengkap:

• Server-side pagination (page, per_page, sort, direction)
• Server-side filter — dikirim sebagai query params
• Filter dropdown dengan search input
• Column visibility (hide/show)
• Sorting (klik header)
• Search (debounced, server-side)
• Bulk select & delete
• Mobile cards (prop mobileCard)
• Export CSV
• Custom row actions

Dashboard Cards (Global Reusable)

Komponen card yang bisa dipakai di halaman manapun:

import {
  WelcomeHero,
  StatCard, StatGrid,
  QuickActionCard, QuickActionGrid,
  PendingActionCard, PendingActionsSection,
} from "@/components/dashboard/Cards";

WelcomeHero — Banner gradient biru:

<WelcomeHero
  title="Welcome back, Admin"
  subtitle="Platform performance overview"
  dateLabel="Selasa, 21 Juli 2026"
  onExport={() => {}}
  stats={[
    { icon: ShoppingBag, label: "Today's Orders", value: "47", delta: "+12%" },
    { icon: UserPlus, label: "New Users", value: "23", delta: "+8%" },
  ]}
/>

StatCard — Card metric dengan progress bar:

<StatGrid>
  <StatCard icon={Users} value="12,543" label="Total Users" progress={75} delta="+12.5%" vsValue="11,156" color="blue" />
  <StatCard icon={Package} value="3,842" label="Total Products" progress={62} delta="+8.2%" color="green" />
</StatGrid>

QuickActionCard — Card gradient warna-warni:

<QuickActionGrid>
  <QuickActionCard icon={Plus} title="Add Product" subtitle="Create new listing" color="blue" />
  <QuickActionCard icon={CheckCircle2} title="Approve Users" subtitle="Review pending" color="green" />
</QuickActionGrid>

PendingActionCard — Card dengan badge count:

<PendingActionsSection totalPending={25}>
  <PendingActionCard icon={ShieldCheck} title="Seller Verifications" description="..." count={12} tone="orange" />
  <PendingActionCard icon={PackageCheck} title="Product Approvals" description="..." count={8} tone="blue" />
</PendingActionsSection>

Form Components

Komponen form custom yang konsisten:

import {
  FormField, FormInput, FormTextarea, FormSelect,
  FormRow, FormRadio, FormCheckbox, FormSection,
} from "@/components/crud/FormComponents";

• Focus ring warna brand
• Error state (red border)
• Hint text & required indicator
• Responsive grid (1/2/3 columns)

Permission System

import { usePermission } from "@/hooks/usePermission";
const { hasPermission } = usePermission();

// Sidebar menu auto-hide
// CRUD buttons conditional
{hasPermission("create-users") && <Button>Tambah</Button>}

Setup

Quick Install

composer create-project ahmadsayadi/kalebun-panel my-admin
cd my-admin

# Setup database (edit .env dulu jika pakai MySQL)
php artisan migrate:fresh --seed

# Build frontend
npm install
npm run build

# Jalankan
php artisan serve

• Generate app key
• Buat database SQLite
• Migrate & seed
• Install npm dependencies
• Build assets

Manual Install

# Clone / download
git clone https://github.com/AhmadSayadi/kalebun-panel.git my-admin
cd my-admin

# Install dependencies
composer install
npm install

# Environment
cp .env.example .env
php artisan key:generate

# Database
php artisan migrate:fresh --seed

# Build
npm run build

# Run
php artisan serve

Development Mode

composer dev

Menjalankan server, queue, log viewer, dan Vite secara bersamaan.

Default Login

Login Variants

Tersedia 3 tampilan halaman login yang bisa dipilih:

Split — Form kanan, branding kiri (default)

Centered — Card di tengah layar

Minimal — Card floating di atas gradient

Cara Mengubah

Via artisan command (interactive):

php artisan login:variant

Akan muncul menu pilihan:

Pilih tampilan login:
  [split]     Split — Form kanan, branding kiri (default)
  [centered]  Centered — Card di tengah layar
  [minimal]   Minimal — Card di atas background gradient

Via command langsung:

php artisan login:variant split
php artisan login:variant centered
php artisan login:variant minimal

Setelah mengubah, build ulang frontend:

npm run build

Cara Kerja

Login variant disimpan di .env:

VITE_LOGIN_VARIANT=split

File Pages/Auth/Login.tsx membaca env ini dan menampilkan komponen yang sesuai:

• split → LoginSplit.tsx
• centered → LoginCentered.tsx
• minimal → LoginMinimal.tsx

Note: Perubahan .env yang prefix VITE_ memerlukan npm run build karena di-bundle saat compile.

Struktur Folder

resources/js/
├── Layouts/
│   └── DashboardLayout.tsx       # Sidebar + Header + Content
├── Pages/
│   ├── Dashboard.tsx             # Dashboard (cards, hero, stats)
│   ├── Products/                 # CRUD Products (Opsi D)
│   │   ├── Index.tsx
│   │   ├── Form.tsx
│   │   ├── Create.tsx
│   │   ├── Edit.tsx
│   │   ├── Show.tsx
│   │   ├── Caption.tsx
│   │   └── Interface.tsx
│   ├── Users/                    # CRUD Users (sama pola)
│   ├── Roles/                    # CRUD Roles (sama pola)
│   ├── Profile/Edit.tsx          # Profile settings
│   └── Auth/                     # Login, Register, Forgot
├── components/
│   ├── ui/                       # shadcn/ui (46 components)
│   ├── crud/                     # CRUD shared components
│   │   ├── CrudDataTable.tsx     # DataTable reusable
│   │   ├── CrudLayout.tsx        # Breadcrumb, FormFooter
│   │   ├── CrudIndexLayout.tsx   # Layout halaman list
│   │   ├── CrudFormLayout.tsx    # Layout halaman form
│   │   ├── CrudShowLayout.tsx    # Layout halaman detail
│   │   ├── FormComponents.tsx    # Input, Select, Radio, Checkbox
│   │   ├── DeleteConfirmDialog.tsx
│   │   ├── PageSkeleton.tsx
│   │   └── TableSkeleton.tsx
│   └── dashboard/
│       └── Cards.tsx             # WelcomeHero, StatCard, QuickAction, PendingAction
├── hooks/
│   └── usePermission.ts         # Permission helper
└── types/
    └── index.d.ts               # Global types

Customization

Menambah Menu Sidebar

Edit resources/js/Layouts/DashboardLayout.tsx → getNavSections():

{ icon: SomeIcon, label: "Menu Baru", href: "/menu-baru", visible: can("view-menu") }

Mengubah Warna Brand

Edit resources/css/app.css dan komponen yang pakai BRAND_BG:

/* app.css — design tokens oklch */
:root { --primary: oklch(...); }

// Komponen
const BRAND_BG = { backgroundColor: "rgb(14, 94, 157)" };

Menambah CRUD Baru

1. Buat Model + Migration + Controller (Laravel)
2. Copy folder Pages/Products/ sebagai template
3. Edit Interface.tsx — types, columns, filters
4. Edit Form.tsx — form fields sesuai entity
5. Tambah route di routes/web.php
6. Tambah menu di sidebar (getNavSections)

Toast Position

Edit resources/js/components/ui/sonner.tsx:

<Sonner position="top-right" ... />

Log Viewer

• URL: /log-viewer (open new tab)
• Akses: Hanya super-admin
• Package: opcodesio/log-viewer

License

MIT