README

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

Layer	Teknologi
Backend	Laravel 13, PHP 8.3
Frontend	React 19, TypeScript, Inertia.js v2
Styling	Tailwind CSS 3, oklch color system, shadcn/ui
DataTable	@tanstack/react-table + CrudDataTable global
Form	Inertia useForm + FormComponents (custom)
Icons	Lucide React
Auth & Permission	Laravel Sanctum + Spatie Laravel Permission
Theme	Terang / Gelap / Sistem
Toast	Sonner (top-right)

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

Email	Password	Role
superadmin@app.com	password	Super Admin
testuser@example.com	password	User

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

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

Buat Model + Migration + Controller (Laravel)
Copy folder Pages/Products/ sebagai template
Edit Interface.tsx — types, columns, filters
Edit Form.tsx — form fields sesuai entity
Tambah route di routes/web.php
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

ahmadsayadi / kalebun-panel

Maintainers

Package info

Statistics

Security