Merge branch 'main' of https://git.probindo.com/Probindo/database-pertani-web

app/Http/Controllers/Web/Program/KelompokBelajarTaniController.php

@@ -0,0 +1,148 @@
+<?php
+
+namespace App\Http\Controllers\Web\Program;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Models\Program\KelompokBelajarTani;
+
+class KelompokBelajarTaniController extends Controller
+{
+    public function index(Request $request)
+    {
+        $title = 'Kelompok Belajar Tani';
+
+        // SUMMARY CARD
+        $summary = ([
+            'total_kelompok' => KelompokBelajarTani::count(),
+            'aktif'          => KelompokBelajarTani::where('status', 'aktif')->count(),
+            'nonaktif'       => KelompokBelajarTani::where('status', 'nonaktif')->count(),
+        ]);
+
+        // QUERY
+        $query = KelompokBelajarTani::query();
+
+        // SEARCH
+        if ($request->filled('search')) {
+            $search = $request->search;
+
+            $query->where(function ($q) use ($search) {
+                $q->where('nama_kelompok', 'ilike', "%{$search}%")
+                  ->orWhere('deskripsi', 'ilike', "%{$search}%");
+            });
+        }
+
+        // FILTER STATUS
+        if ($request->filled('status')) {
+            $query->where('status', $request->status);
+        }
+
+        // PAGINATION
+        $perPage = $request->input('per_page', 10);
+
+        $kelompok = $query->latest()->paginate($perPage);
+
+        return view('program.kelompokbelajar.index', compact(
+            'title',
+            'summary',
+            'kelompok'
+        ));
+
+    }
+
+    public function create()
+    {
+        return view('program.kelompokbelajar.add');
+    }
+
+    public function store(Request $request)
+    {
+        $validated = $request->validate([
+            'nama_kelompok' => 'required|string|max:255',
+            'status'        => 'required|string',
+            'deskripsi'     => 'nullable|string',
+        ], [
+            'nama_kelompok.required' => 'Nama kelompok wajib diisi.',
+            'nama_kelompok.string'   => 'Nama kelompok harus berupa teks.',
+            'nama_kelompok.max'      => 'Nama kelompok maksimal 255 karakter.',
+
+            'status.required'        => 'Status wajib diisi.',
+            'status.string'          => 'Status harus berupa teks.',
+
+            'deskripsi.string'       => 'Deskripsi harus berupa teks.',
+        ]);
+
+        KelompokBelajarTani::create([
+            'nama_kelompok' => $request->nama_kelompok,
+            'status'        => $request->status,
+            'deskripsi'     => $request->deskripsi,
+
+            'created_by'    => auth()->user()->id,
+            'updated_by'    => auth()->user()->id,
+        ]);
+
+        return response()->json([
+            'status'  => 'success',
+            'message' => 'Kelompok Belajar Tani berhasil disimpan.'
+        ]);
+    }
+
+    public function edit($id)
+    {
+        $kelompok = KelompokBelajarTani::findOrFail($id);
+
+        return view('program.kelompokbelajar.edit', compact(
+            'kelompok'
+        ));
+    }
+
+    public function update(Request $request, $id)
+    {
+        $validated = $request->validate([
+            'nama_kelompok' => 'required|string|max:255',
+            'status'        => 'required|string',
+            'deskripsi'     => 'nullable|string',
+        ]);
+
+        $kelompok = KelompokBelajarTani::findOrFail($id);
+
+        $kelompok->update([
+            'nama_kelompok' => $request->nama_kelompok,
+            'status'        => $request->status,
+            'deskripsi'     => $request->deskripsi,
+
+            'updated_by'    => auth()->user()->id,
+        ]);
+
+        return response()->json([
+            'status'  => 'success',
+            'message' => 'Data Kelompok Belajar Tani berhasil diperbarui.'
+        ]);
+    }
+
+    public function destroy($id)
+    {
+        $kelompok = KelompokBelajarTani::findOrFail($id);
+
+        $kelompok->update([
+            'deleted_by' => auth()->user()->id
+        ]);
+
+        $kelompok->delete();
+
+        return response()->json([
+            'status'  => 'success',
+            'message' => 'Data Kelompok Belajar Tani berhasil dihapus.'
+        ]);
+    }
+
+    public function show($id)
+    {
+        $kelompok = KelompokBelajarTani::findOrFail($id);
+
+        return response()->json([
+            'status' => 'success',
+            'data'   => $kelompok
+        ]);
+    }
+}

app/Models/Program/KelompokBelajarTani.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Models\Program;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class KelompokBelajarTani extends Model
+{
+    use SoftDeletes;
+
+    protected $table = 'kelompok_belajar_tani';
+
+    protected $fillable = [
+        'nama_kelompok',
+        'deskripsi',
+        'status',
+        'created_by',
+        'updated_by',
+        'deleted_by',
+    ];
+}

database/migrations/2026_05_11_161421_create_kelompok_belajar_tani_table.php

@@ -0,0 +1,46 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('kelompok_belajar_tani', function (Blueprint $table) {
+
+            $table->id();
+
+            $table->string('nama_kelompok');
+            $table->text('deskripsi')->nullable();
+            $table->string('status')->default('aktif');
+
+            $table->foreignId('created_by')->nullable()
+                ->constrained('users')
+                ->nullOnDelete();
+
+            $table->foreignId('updated_by')->nullable()
+                ->constrained('users')
+                ->nullOnDelete();
+
+            $table->foreignId('deleted_by')->nullable()
+                ->constrained('users')
+                ->nullOnDelete();
+
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('kelompok_belajar_tani');
+    }
+};

resources/views/layout/sidebar.blade.php

@@ -150,8 +150,8 @@
             <div data-i18n="Program & Komunitas">Program & Komunitas</div>
         </a>
         <ul class="menu-sub">
-            <li class="menu-item">
+            <li class="menu-item {{ request()->routeIs('kelompok-belajar-tani.*') ? 'active' : '' }}">
-                <a href="#" class="menu-link">
+                <a href="{{ route('kelompok-belajar-tani.index') }}" class="menu-link">
                 <div data-i18n="Kelompok Belajar Petani">Kelompok Belajar Petani</div>
                 </a>
             </li>

resources/views/program/kelompokbelajar/add.blade.php

@@ -0,0 +1,266 @@
+@extends('layout.main')
+
+@section('content')
+<div class="container-xxl flex-grow-1 container-p-y">
+
+    <div class="card mb-4">
+
+        {{-- HEADER --}}
+        <div class="card-header border-bottom d-flex justify-content-between align-items-center pt-4 pb-3">
+            <h5 class="mb-0">Tambah Kelompok Belajar Petani</h5>
+
+            <span class="badge bg-label-primary">
+                Data Baru
+            </span>
+        </div>
+
+        {{-- FORM --}}
+        <form action="{{ route('kelompok-belajar-tani.store') }}"
+            method="POST"
+            id="formAddKelompok">
+
+            @csrf
+
+            <div class="card-body pt-4">
+
+                {{-- INFORMASI DASAR --}}
+                <div class="mb-4">
+
+                    <div class="d-flex align-items-center mb-3">
+                        <i class="ti tabler-users-group me-2 text-primary"></i>
+
+                        <h6 class="fw-medium mb-0 text-uppercase">
+                            Informasi Kelompok
+                        </h6>
+                    </div>
+
+                    <div class="row g-4">
+
+                        {{-- NAMA KELOMPOK --}}
+                        <div class="col-md-6">
+                            <label class="form-label" for="nama_kelompok">
+                                Nama Kelompok <span class="text-danger">*</span>
+                            </label>
+
+                            <input type="text"
+                                class="form-control"
+                                id="nama_kelompok"
+                                name="nama_kelompok"
+                                placeholder="Masukkan nama kelompok..."
+                                value="{{ old('nama_kelompok') }}"
+                                required>
+                        </div>
+
+                        {{-- STATUS --}}
+                        <div class="col-md-6">
+                            <label class="form-label" for="status">
+                                Status <span class="text-danger">*</span>
+                            </label>
+
+                            <select class="form-select"
+                                id="status"
+                                name="status"
+                                required>
+
+                                <option value="" disabled selected>
+                                    -- Pilih Status --
+                                </option>
+
+                                <option value="aktif">
+                                    Aktif
+                                </option>
+
+                                <option value="nonaktif">
+                                    Nonaktif
+                                </option>
+
+                            </select>
+                        </div>
+
+                        {{-- DESKRIPSI --}}
+                        <div class="col-12">
+                            <label class="form-label" for="deskripsi">
+                                Deskripsi
+                            </label>
+
+                            <textarea class="form-control"
+                                id="deskripsi"
+                                name="deskripsi"
+                                rows="4"
+                                placeholder="Masukkan deskripsi kelompok...">{{ old('deskripsi') }}</textarea>
+                        </div>
+
+                    </div>
+
+                    {{-- ALERT --}}
+                    <div class="col-12 mt-4">
+
+                        <div class="alert alert-label-info d-flex align-items-center border-0 mb-0"
+                            role="alert">
+
+                            <span class="alert-icon me-2">
+                                <i class="ti ti-info-circle ti-xs"></i>
+                            </span>
+
+                            <div>
+                                Pastikan data kelompok belajar tani yang dimasukkan sudah benar sebelum disimpan.
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+            </div>
+
+            {{-- FOOTER --}}
+            <div class="card-footer border-top pt-4 pb-4 d-flex justify-content-end gap-3 bg-lighter">
+
+                <a href="{{ route('kelompok-belajar-tani.index') }}"
+                    class="btn btn-label-secondary">
+
+                    Kembali
+                </a>
+
+                <button type="submit"
+                    class="btn btn-primary px-4">
+
+                    <i class="ti tabler-device-floppy me-1"></i>
+                    Simpan Kelompok
+                </button>
+
+            </div>
+
+        </form>
+
+    </div>
+
+</div>
+@endsection
+
+@push('scripts')
+<script>
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+
+    const formAddKelompok = document.getElementById('formAddKelompok');
+
+    if(formAddKelompok) {
+
+        formAddKelompok.addEventListener('submit', function(e) {
+
+            e.preventDefault();
+
+            let form = this;
+            let formData = new FormData(form);
+
+            let submitBtn = form.querySelector('button[type="submit"]');
+            let originalBtnText = submitBtn.innerHTML;
+
+            // Disable tombol
+            submitBtn.disabled = true;
+            submitBtn.innerHTML =
+                '<span class="spinner-border spinner-border-sm me-2"></span> Menyimpan...';
+
+            fetch(form.action, {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'Accept': 'application/json'
+                }
+            })
+            .then(async response => {
+
+                const isJson = response.headers.get('content-type')
+                    ?.includes('application/json');
+
+                const data = isJson ? await response.json() : null;
+
+                if (!response.ok) {
+
+                    const error =
+                        (data && data.message)
+                        || response.statusText;
+
+                    return Promise.reject({
+                        status: response.status,
+                        data: data,
+                        message: error
+                    });
+                }
+
+                return data;
+            })
+            .then(data => {
+
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = originalBtnText;
+
+                if (data.status === 'success') {
+
+                    Swal.fire({
+                        icon: 'success',
+                        title: 'Berhasil!',
+                        text: data.message,
+                        showConfirmButton: false,
+                        timer: 2000,
+                        customClass: {
+                            confirmButton: 'btn btn-primary'
+                        },
+                        buttonsStyling: false
+                    }).then(() => {
+
+                        window.location.href =
+                            "{{ route('kelompok-belajar-tani.index') }}";
+                    });
+                }
+
+            })
+            .catch(error => {
+
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = originalBtnText;
+
+                let errorMsg =
+                    'Terjadi kesalahan saat menyimpan data.';
+
+                if (
+                    error.status === 422
+                    && error.data
+                    && error.data.errors
+                ) {
+
+                    errorMsg = Object.values(error.data.errors)
+                        .map(err => err.join(', '))
+                        .join('<br>');
+
+                } else if (
+                    error.data
+                    && error.data.message
+                ) {
+
+                    errorMsg = error.data.message;
+                }
+
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Data Tidak Valid',
+                    html: errorMsg,
+                    customClass: {
+                        confirmButton: 'btn btn-primary'
+                    },
+                    buttonsStyling: false
+                });
+
+            });
+
+        });
+
+    }
+
+});
+</script>
+@endpush

resources/views/program/kelompokbelajar/edit.blade.php

@@ -0,0 +1,253 @@
+@extends('layout.main')
+
+@section('content')
+<div class="container-xxl flex-grow-1 container-p-y">
+    
+    <div class="card mb-4">
+        <div class="card-header border-bottom d-flex justify-content-between align-items-center pt-4 pb-3">
+            <h5 class="mb-0">Edit Kelompok Belajar Tani</h5>
+
+            @php
+                $badgeColor = $kelompok->status == 'aktif'
+                    ? 'bg-label-success'
+                    : 'bg-label-danger';
+            @endphp
+
+            <span class="badge {{ $badgeColor }}">
+                Status: {{ ucfirst($kelompok->status) }}
+            </span>
+        </div>
+        
+        <form action="{{ route('kelompok-belajar-tani.update', $kelompok->id) }}"
+              method="POST"
+              id="formEditKelompok">
+
+            @csrf
+            @method('PUT')
+
+            <div class="card-body pt-4">
+
+                {{-- INFORMASI DASAR --}}
+                <div class="mb-4">
+
+                    <div class="d-flex align-items-center mb-3">
+                        <i class="ti tabler-users-group me-2 text-primary"></i>
+                        <h6 class="fw-medium mb-0 text-uppercase">
+                            Informasi Kelompok
+                        </h6>
+                    </div>
+
+                    <div class="row g-4">
+
+                        {{-- NAMA KELOMPOK --}}
+                        <div class="col-md-8">
+                            <label class="form-label" for="nama_kelompok">
+                                Nama Kelompok <span class="text-danger">*</span>
+                            </label>
+
+                            <input type="text"
+                                   class="form-control @error('nama_kelompok') is-invalid @enderror"
+                                   id="nama_kelompok"
+                                   name="nama_kelompok"
+                                   placeholder="Masukkan nama kelompok..."
+                                   value="{{ old('nama_kelompok', $kelompok->nama_kelompok) }}"
+                                   required>
+
+                            @error('nama_kelompok')
+                                <div class="invalid-feedback">
+                                    {{ $message }}
+                                </div>
+                            @enderror
+                        </div>
+
+                        {{-- STATUS --}}
+                        <div class="col-md-4">
+                            <label class="form-label" for="status">
+                                Status <span class="text-danger">*</span>
+                            </label>
+
+                            <select class="form-select @error('status') is-invalid @enderror"
+                                    id="status"
+                                    name="status"
+                                    required>
+
+                                <option value="aktif"
+                                    {{ old('status', $kelompok->status) == 'aktif' ? 'selected' : '' }}>
+                                    Aktif
+                                </option>
+
+                                <option value="nonaktif"
+                                    {{ old('status', $kelompok->status) == 'nonaktif' ? 'selected' : '' }}>
+                                    Nonaktif
+                                </option>
+
+                            </select>
+
+                            @error('status')
+                                <div class="invalid-feedback">
+                                    {{ $message }}
+                                </div>
+                            @enderror
+                        </div>
+
+                        {{-- DESKRIPSI --}}
+                        <div class="col-12">
+                            <label class="form-label" for="deskripsi">
+                                Deskripsi
+                            </label>
+
+                            <textarea class="form-control @error('deskripsi') is-invalid @enderror"
+                                      id="deskripsi"
+                                      name="deskripsi"
+                                      rows="4"
+                                      placeholder="Masukkan deskripsi kelompok...">{{ old('deskripsi', $kelompok->deskripsi) }}</textarea>
+
+                            @error('deskripsi')
+                                <div class="invalid-feedback">
+                                    {{ $message }}
+                                </div>
+                            @enderror
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+            
+            {{-- FOOTER --}}
+            <div class="card-footer border-top pt-4 pb-4 d-flex justify-content-end gap-3 bg-lighter">
+
+                <a href="{{ route('kelompok-belajar-tani.index') }}"
+                   class="btn btn-label-secondary">
+
+                    Batal
+                </a>
+
+                <button type="submit"
+                        class="btn btn-primary px-4">
+
+                    <i class="ti tabler-device-floppy me-1"></i>
+                    Simpan Perubahan
+                </button>
+            </div>
+            
+        </form>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script>
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+
+    const formEditKelompok = document.getElementById('formEditKelompok');
+
+    if(formEditKelompok) {
+
+        formEditKelompok.addEventListener('submit', function(e) {
+
+            e.preventDefault();
+
+            let form = this;
+            let formData = new FormData(form);
+
+            let submitBtn = form.querySelector('button[type="submit"]');
+            let originalBtnText = submitBtn.innerHTML;
+
+            // Disable tombol
+            submitBtn.disabled = true;
+            submitBtn.innerHTML =
+                '<span class="spinner-border spinner-border-sm me-2"></span> Menyimpan...';
+
+            fetch(form.action, {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'Accept': 'application/json'
+                }
+            })
+            .then(async response => {
+
+                const isJson = response.headers.get('content-type')
+                    ?.includes('application/json');
+
+                const data = isJson ? await response.json() : null;
+
+                if (!response.ok) {
+
+                    const error =
+                        (data && data.message) || response.statusText;
+
+                    return Promise.reject({
+                        status: response.status,
+                        data: data,
+                        message: error
+                    });
+                }
+
+                return data;
+            })
+            .then(data => {
+
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = originalBtnText;
+
+                if (data.status === 'success') {
+
+                    Swal.fire({
+                        icon: 'success',
+                        title: 'Berhasil!',
+                        text: data.message,
+                        showConfirmButton: false,
+                        timer: 2000,
+                        customClass: {
+                            confirmButton: 'btn btn-primary'
+                        },
+                        buttonsStyling: false
+                    }).then(() => {
+
+                        window.location.href =
+                            "{{ route('kelompok-belajar-tani.index') }}";
+                    });
+                }
+            })
+            .catch(error => {
+
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = originalBtnText;
+
+                let errorMsg =
+                    'Terjadi kesalahan saat menyimpan data.';
+
+                if (error.status === 422 &&
+                    error.data &&
+                    error.data.errors) {
+
+                    errorMsg = Object.values(error.data.errors)
+                        .map(err => err.join(', '))
+                        .join('<br>');
+
+                } else if (error.data && error.data.message) {
+
+                    errorMsg = error.data.message;
+                }
+
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Data Tidak Valid',
+                    html: errorMsg,
+                    customClass: {
+                        confirmButton: 'btn btn-primary'
+                    },
+                    buttonsStyling: false
+                });
+            });
+
+        });
+    }
+
+});
+</script>
+@endpush

resources/views/program/kelompokbelajar/index.blade.php

@@ -0,0 +1,848 @@
+@extends('layout.main')
+
+@section('content')
+<div class="container-xxl flex-grow-1 container-p-y">
+    
+    {{-- SUMMARY --}}
+    <div class="row g-6 mb-6">
+        
+        <div class="col-sm-6 col-xl-4">
+            <div class="card">
+                <div class="card-body">
+                    <div class="d-flex align-items-start justify-content-between">
+                        <div class="content-left">
+                            <span class="text-heading">Total Kelompok</span>
+                            <div class="d-flex align-items-center my-1">
+                                <h4 class="mb-0 me-2">
+                                    {{ number_format($summary['total_kelompok'] ?? 0) }}
+                                </h4>
+                            </div>
+                            <small class="mb-0">Kelompok</small>
+                        </div>
+
+                        <div class="avatar">
+                            <span class="avatar-initial rounded bg-label-primary">
+                                <i class="icon-base ti tabler-users-group icon-26px"></i>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-sm-6 col-xl-4">
+            <div class="card">
+                <div class="card-body">
+                    <div class="d-flex align-items-start justify-content-between">
+                        <div class="content-left">
+                            <span class="text-heading">Kelompok Aktif</span>
+                            <div class="d-flex align-items-center my-1">
+                                <h4 class="mb-0 me-2">
+                                    {{ number_format($summary['aktif'] ?? 0) }}
+                                </h4>
+                            </div>
+                            <small class="mb-0">Aktif</small>
+                        </div>
+
+                        <div class="avatar">
+                            <span class="avatar-initial rounded bg-label-success">
+                                <i class="icon-base ti tabler-check icon-26px"></i>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-sm-6 col-xl-4">
+            <div class="card">
+                <div class="card-body">
+                    <div class="d-flex align-items-start justify-content-between">
+                        <div class="content-left">
+                            <span class="text-heading">Kelompok Nonaktif</span>
+                            <div class="d-flex align-items-center my-1">
+                                <h4 class="mb-0 me-2">
+                                    {{ number_format($summary['nonaktif'] ?? 0) }}
+                                </h4>
+                            </div>
+                            <small class="mb-0">Nonaktif</small>
+                        </div>
+
+                        <div class="avatar">
+                            <span class="avatar-initial rounded bg-label-danger">
+                                <i class="icon-base ti tabler-x icon-26px"></i>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <form method="GET" action="{{ route('kelompok-belajar-tani.index') }}" id="formFilterData"></form>
+
+    <div class="card mb-4">
+
+        {{-- HEADER --}}
+        <div class="card-header border-bottom d-flex flex-column flex-md-row justify-content-between align-items-center pt-4 pb-3">
+            <h5 class="card-title mb-2 mb-md-0">
+                Data Kelompok Belajar Petani
+            </h5>
+
+            <div class="d-flex gap-2">
+                <button type="button"
+                    class="btn btn-label-secondary"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#collapseFilter">
+
+                    <i class="ti tabler-filter me-1"></i> Filter
+                </button>
+
+                <button type="button"
+                    class="btn btn-primary"
+                    data-bs-toggle="offcanvas"
+                    data-bs-target="#offcanvasAddKelompok">
+
+                    <i class="ti tabler-plus me-1"></i>
+                    Tambah Kelompok
+                </button>
+            </div>
+        </div>
+
+        {{-- FILTER --}}
+        <div class="collapse {{ request()->filled('status') ? 'show' : '' }}"
+            id="collapseFilter">
+
+            <div class="card-body border-bottom bg-lighter pt-4 pb-4">
+
+                <div class="row g-3 align-items-end">
+
+                    <div class="col-md-4">
+                        <label class="form-label">Status</label>
+
+                        <select name="status"
+                            form="formFilterData"
+                            class="form-select form-select-sm">
+
+                            <option value="">Semua Status</option>
+
+                            <option value="aktif"
+                                {{ request('status') == 'aktif' ? 'selected' : '' }}>
+                                Aktif
+                            </option>
+
+                            <option value="nonaktif"
+                                {{ request('status') == 'nonaktif' ? 'selected' : '' }}>
+                                Nonaktif
+                            </option>
+                        </select>
+                    </div>
+
+                    <div class="col-md-3 d-flex gap-2">
+                        <button type="submit"
+                            form="formFilterData"
+                            class="btn btn-sm btn-primary w-100">
+
+                            Terapkan
+                        </button>
+
+                        @if(request()->filled('status') || request()->filled('search'))
+                            <a href="{{ route('kelompok-belajar-tani.index') }}"
+                                class="btn btn-sm btn-label-danger">
+
+                                <i class="ti tabler-refresh"></i>
+                            </a>
+                        @endif
+                    </div>
+
+                </div>
+
+            </div>
+        </div>
+
+        {{-- SEARCH --}}
+        <div class="card-body border-bottom pt-3 pb-3">
+
+            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-3">
+
+                <div class="d-flex align-items-center">
+                    <label class="me-2 text-nowrap text-muted">
+                        Show
+                    </label>
+
+                    <select name="per_page"
+                        form="formFilterData"
+                        class="form-select form-select-sm w-auto"
+                        onchange="document.getElementById('formFilterData').submit()">
+
+                        <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>
+                            10
+                        </option>
+
+                        <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>
+                            25
+                        </option>
+
+                        <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>
+                            50
+                        </option>
+                    </select>
+
+                    <label class="ms-2 text-nowrap text-muted">
+                        entries
+                    </label>
+                </div>
+
+                <div class="input-group input-group-sm w-auto"
+                    style="min-width: 250px;">
+
+                    <input type="text"
+                        name="search"
+                        form="formFilterData"
+                        class="form-control"
+                        placeholder="Cari kelompok..."
+                        value="{{ request('search') }}">
+
+                    <button type="submit"
+                        form="formFilterData"
+                        class="btn btn-primary">
+
+                        <i class="ti tabler-search"></i>
+                    </button>
+                </div>
+
+            </div>
+        </div>
+
+        {{-- TABLE --}}
+        <div class="table-responsive text-nowrap">
+
+            <table class="table table-hover">
+
+                <thead class="border-top">
+                    <tr>
+                        <th>No</th>
+                        <th>Informasi Kelompok Belajar</th>
+                        <th>Status</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+
+                <tbody>
+
+                    @forelse($kelompok as $index => $item)
+
+                    <tr>
+
+                        <td>
+                            {{ $kelompok->firstItem() + $index }}
+                        </td>
+
+                        <td>
+                            <div class="d-flex justify-content-start align-items-center">
+
+                                <div class="avatar-wrapper me-3">
+                                    <div class="avatar avatar-sm">
+                                        <span class="avatar-initial rounded-circle bg-label-primary">
+                                            {{ strtoupper(substr($item->nama_kelompok, 0, 2)) }}
+                                        </span>
+                                    </div>
+                                </div>
+
+                                <div class="d-flex flex-column">
+
+                                    <span class="fw-medium text-heading">
+                                        {{ $item->nama_kelompok }}
+                                    </span>
+
+                                    <small class="text-muted text-truncate"
+                                        style="max-width: 250px;">
+
+                                        {{ $item->deskripsi ?? 'Tidak ada deskripsi' }}
+                                    </small>
+
+                                </div>
+
+                            </div>
+                        </td>
+
+                        <td>
+
+                            @php
+                                $color = $item->status == 'aktif'
+                                    ? 'bg-label-success'
+                                    : 'bg-label-danger';
+                            @endphp
+
+                            <span class="badge {{ $color }}">
+                                {{ ucfirst($item->status) }}
+                            </span>
+
+                        </td>
+
+                        <td>
+
+                            <div class="d-flex align-items-center">
+
+                                <a href="javascript:;"
+                                    class="btn btn-icon btn-text-secondary rounded-pill edit-record"
+                                    data-id="{{ $item->id }}"
+                                    title="Edit">
+
+                                    <i class="ti tabler-edit ti-md"></i>
+                                </a>
+
+                                <form action="{{ route('kelompok-belajar-tani.destroy', $item->id) }}"
+                                    method="POST"
+                                    class="d-inline form-delete"
+                                    data-name="{{ $item->nama_kelompok }}">
+
+                                    @csrf
+                                    @method('DELETE')
+
+                                    <button type="button"
+                                        class="btn btn-icon btn-text-secondary rounded-pill btn-delete"
+                                        title="Delete">
+
+                                        <i class="ti tabler-trash ti-md"></i>
+                                    </button>
+
+                                </form>
+
+                            </div>
+
+                        </td>
+
+                    </tr>
+
+                    @empty
+
+                    <tr>
+                        <td colspan="4" class="text-center py-4">
+                            Data tidak ditemukan.
+                        </td>
+                    </tr>
+
+                    @endforelse
+
+                </tbody>
+
+            </table>
+
+        </div>
+
+        {{-- PAGINATION --}}
+        <div class="card-footer d-flex justify-content-center justify-content-md-end border-top pt-4 pb-4">
+            {{ $kelompok->appends(request()->query())->links('pagination::bootstrap-5') }}
+        </div>
+
+    </div>
+</div>
+
+
+{{-- OFFCANVAS ADD --}}
+<div
+    class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasAddKelompok"
+    aria-labelledby="offcanvasAddKelompokLabel">
+
+    <div class="offcanvas-header border-bottom">
+
+        <h5 id="offcanvasAddKelompokLabel"
+            class="offcanvas-title">
+
+            Tambah Kelompok Belajar Petani
+        </h5>
+
+        <button type="button"
+            class="btn-close text-reset"
+            data-bs-dismiss="offcanvas"
+            aria-label="Close"></button>
+    </div>
+
+    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
+
+        <form id="formAddKelompok"
+            action="{{ route('kelompok-belajar-tani.store') }}"
+            method="POST">
+
+            @csrf
+
+            {{-- NAMA KELOMPOK --}}
+            <div class="mb-4 form-control-validation">
+
+                <label class="form-label">
+                    Nama Kelompok
+                    <span class="text-danger">*</span>
+                </label>
+
+                <input type="text"
+                    name="nama_kelompok"
+                    class="form-control"
+                    placeholder="Masukkan nama kelompok...">
+            </div>
+
+            {{-- STATUS --}}
+            <div class="mb-4 form-control-validation">
+
+                <label class="form-label">
+                    Status
+                    <span class="text-danger">*</span>
+                </label>
+
+                <select name="status"
+                    class="form-select">
+
+                    <option value="">
+                        -- Pilih Status --
+                    </option>
+
+                    <option value="aktif">
+                        Aktif
+                    </option>
+
+                    <option value="nonaktif">
+                        Nonaktif
+                    </option>
+
+                </select>
+            </div>
+
+            {{-- DESKRIPSI --}}
+            <div class="mb-4 form-control-validation">
+
+                <label class="form-label">
+                    Deskripsi
+                </label>
+
+                <textarea name="deskripsi"
+                    class="form-control"
+                    rows="4"
+                    placeholder="Masukkan deskripsi kelompok..."></textarea>
+            </div>
+
+            <button type="submit"
+                class="btn btn-primary me-3">
+
+                Simpan
+            </button>
+
+            <button type="reset"
+                class="btn btn-label-danger"
+                data-bs-dismiss="offcanvas">
+
+                Batal
+            </button>
+
+        </form>
+    </div>
+</div>
+
+{{-- OFFCANVAS EDIT --}}
+<div
+    class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasEditKelompok"
+    aria-labelledby="offcanvasEditKelompokLabel">
+
+    <div class="offcanvas-header border-bottom">
+
+        <h5 id="offcanvasEditKelompokLabel"
+            class="offcanvas-title">
+
+            Edit Kelompok Belajar Petani
+        </h5>
+
+        <button type="button"
+            class="btn-close text-reset"
+            data-bs-dismiss="offcanvas"
+            aria-label="Close"></button>
+    </div>
+
+    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
+
+        <form id="formEditKelompok"
+            method="POST">
+
+            @csrf
+            @method('PUT')
+
+            <input type="hidden"
+                id="edit-id">
+
+            {{-- NAMA KELOMPOK --}}
+            <div class="mb-4 form-control-validation">
+
+                <label class="form-label">
+                    Nama Kelompok
+                    <span class="text-danger">*</span>
+                </label>
+
+                <input type="text"
+                    name="nama_kelompok"
+                    id="edit-nama_kelompok"
+                    class="form-control"
+                    placeholder="Masukkan nama kelompok...">
+            </div>
+
+            {{-- STATUS --}}
+            <div class="mb-4 form-control-validation">
+
+                <label class="form-label">
+                    Status
+                    <span class="text-danger">*</span>
+                </label>
+
+                <select name="status"
+                    id="edit-status"
+                    class="form-select">
+
+                    <option value="">
+                        -- Pilih Status --
+                    </option>
+
+                    <option value="aktif">
+                        Aktif
+                    </option>
+
+                    <option value="nonaktif">
+                        Nonaktif
+                    </option>
+
+                </select>
+            </div>
+
+            {{-- DESKRIPSI --}}
+            <div class="mb-4 form-control-validation">
+
+                <label class="form-label">
+                    Deskripsi
+                </label>
+
+                <textarea name="deskripsi"
+                    id="edit-deskripsi"
+                    class="form-control"
+                    rows="4"
+                    placeholder="Masukkan deskripsi kelompok..."></textarea>
+            </div>
+
+            <button type="submit"
+                class="btn btn-primary me-3">
+
+                Simpan Perubahan
+            </button>
+
+            <button type="button"
+                class="btn btn-label-danger"
+                data-bs-dismiss="offcanvas">
+
+                Batal
+            </button>
+
+        </form>
+
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script>
+'use strict';
+
+$(document).ready(function () {
+
+    @if(session('success'))
+        Swal.fire({
+            icon: 'success',
+            title: 'Berhasil',
+            text: "{{ session('success') }}",
+            timer: 2000,
+            showConfirmButton: false
+        });
+    @endif
+
+    $(document).on('click', '.btn-delete', function (e) {
+
+        e.preventDefault();
+
+        const form = $(this).closest('.form-delete');
+        const name = form.data('name');
+        const url = form.attr('action');
+        const formData = new FormData(form[0]);
+
+        Swal.fire({
+            title: 'Hapus Data?',
+            text: `Yakin ingin menghapus "${name}" ?`,
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonText: 'Ya, hapus!',
+            cancelButtonText: 'Batal',
+            customClass: {
+                confirmButton: 'btn btn-danger me-3',
+                cancelButton: 'btn btn-label-secondary'
+            },
+            buttonsStyling: false
+        }).then(function (result) {
+
+            if (result.value) {
+
+                fetch(url, {
+                    method: 'POST',
+                    body: formData,
+                    headers: {
+                        'X-Requested-With': 'XMLHttpRequest',
+                        'Accept': 'application/json'
+                    }
+                })
+                .then(response => response.json())
+                .then(data => {
+
+                    if (data.status === 'success') {
+
+                        Swal.fire({
+                            icon: 'success',
+                            title: 'Berhasil',
+                            text: data.message,
+                            timer: 2000,
+                            showConfirmButton: false
+                        }).then(() => {
+                            window.location.reload();
+                        });
+                    }
+                })
+                .catch(error => {
+
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Gagal',
+                        text: 'Terjadi kesalahan saat menghapus data.'
+                    });
+
+                });
+
+            }
+
+        });
+
+    });
+
+});
+</script>
+
+<script>
+'use strict';
+
+$(document).ready(function () {
+
+    // VALIDATION STYLE
+    $.validator.setDefaults({
+        errorElement: 'div',
+
+        errorPlacement: function (error, element) {
+
+            error.addClass('invalid-feedback');
+
+            element.closest('.form-control-validation')
+                .append(error);
+        },
+
+        highlight: function (element) {
+            $(element).addClass('is-invalid');
+        },
+
+        unhighlight: function (element) {
+            $(element).removeClass('is-invalid');
+        }
+    });
+
+    // OFFCANVAS
+    const offcanvasAddKelompok =
+        new bootstrap.Offcanvas(
+            document.getElementById('offcanvasAddKelompok')
+        );
+
+    // VALIDATE FORM
+    $('#formAddKelompok').validate({
+
+        rules: {
+            nama_kelompok: {
+                required: true
+            },
+
+            status: {
+                required: true
+            }
+        },
+
+        messages: {
+            nama_kelompok: {
+                required: 'Nama kelompok wajib diisi'
+            },
+
+            status: {
+                required: 'Status wajib dipilih'
+            }
+        },
+
+        submitHandler: function (form) {
+
+            $.ajax({
+
+                url: $(form).attr('action'),
+
+                type: 'POST',
+
+                data: $(form).serialize(),
+
+                success: function (response) {
+
+                    offcanvasAddKelompok.hide();
+
+                    form.reset();
+
+                    Swal.fire({
+                        icon: 'success',
+                        title: 'Berhasil!',
+                        text: response.message,
+                        showConfirmButton: false,
+                        timer: 1500
+                    }).then(() => {
+
+                        window.location.reload();
+                    });
+                },
+
+                error: function (xhr) {
+
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Gagal!',
+                        text: xhr.responseJSON?.message
+                            || 'Terjadi kesalahan'
+                    });
+                }
+            });
+        }
+    });
+
+});
+</script>
+
+<script>
+'use strict';
+
+$(document).ready(function () {
+
+    // OFFCANVAS EDIT
+    const offcanvasEditKelompok =
+        new bootstrap.Offcanvas(
+            document.getElementById('offcanvasEditKelompok')
+        );
+
+    // OPEN EDIT
+    $(document).on('click', '.edit-record', function () {
+
+        const id = $(this).data('id');
+
+        // reset validation
+        const editForm = $('#formEditKelompok');
+
+        editForm.validate().resetForm();
+
+        editForm.find('.is-invalid')
+            .removeClass('is-invalid');
+
+        $.get(`/kelompok-belajar-tani/${id}`, function (response) {
+
+            const data = response.data;
+
+            $('#edit-id').val(data.id);
+
+            $('#edit-nama_kelompok')
+                .val(data.nama_kelompok);
+
+            $('#edit-status')
+                .val(data.status);
+
+            $('#edit-deskripsi')
+                .val(data.deskripsi);
+
+            offcanvasEditKelompok.show();
+        });
+
+    });
+
+    // VALIDATE EDIT FORM
+    $('#formEditKelompok').validate({
+
+        rules: {
+            nama_kelompok: {
+                required: true
+            },
+
+            status: {
+                required: true
+            }
+        },
+
+        messages: {
+            nama_kelompok: {
+                required: 'Nama kelompok wajib diisi'
+            },
+
+            status: {
+                required: 'Status wajib dipilih'
+            }
+        },
+
+        submitHandler: function (form) {
+
+            const id = $('#edit-id').val();
+
+            $.ajax({
+
+                url: `/kelompok-belajar-tani/${id}`,
+
+                type: 'POST',
+
+                data: $(form).serialize(),
+
+                success: function (response) {
+
+                    offcanvasEditKelompok.hide();
+
+                    Swal.fire({
+                        icon: 'success',
+                        title: 'Berhasil!',
+                        text: response.message,
+                        showConfirmButton: false,
+                        timer: 1500
+                    }).then(() => {
+
+                        window.location.reload();
+                    });
+
+                },
+
+                error: function (xhr) {
+
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Gagal!',
+                        text: xhr.responseJSON?.message
+                            || 'Terjadi kesalahan'
+                    });
+
+                }
+
+            });
+
+        }
+
+    });
+
+});
+</script>
+@endpush

routes/web.php

@@ -107,6 +107,7 @@ Route::middleware('auth')
     Route::resource('program.komoditas', App\Http\Controllers\Web\ProgramKomoditasController::class)->only(['store', 'update', 'destroy']);
     Route::resource('program.lokasi', App\Http\Controllers\Web\ProgramLokasiController::class)->only(['store', 'update', 'destroy']);
     Route::resource('workshop', App\Http\Controllers\Web\Program\WorkshopController::class);
+    Route::resource('kelompok-belajar-tani', App\Http\Controllers\Web\Program\KelompokBelajarTaniController::class);
 
     // Basis Data Ekosistem
     Route::resource('group', App\Http\Controllers\Web\Ekosistem\GroupBasisDataController::class);