From 8e4d0ba53034232b101df66ed9cbfa17f34cd514 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Tue, 25 Aug 2026 00:34:32 +0700
Subject: [PATCH] feat: add tuition invoice and payment management

- Implemented StudentService to retrieve all students for selection.
- Created migration for tuition_invoices and tuition_payments tables.
- Added seeders for TuitionInvoice and TuitionPayment with sample data.
- Updated DatabaseSeeder to include new seeders.
- Developed UI components for managing tuition invoices and payments, including forms and data tables.
- Introduced RupiahInput component for formatted currency input.
- Added routes for tuition invoices and payments management.
- Defined TypeScript types for tuition invoices and payments.
---
 app/Enums/PaymentStatus.php                   |  19 +
 .../Admin/Manage/TuitionInvoiceController.php |  59 +++
 .../Admin/Manage/TuitionPaymentController.php |  50 +++
 .../Admin/Manage/TuitionInvoiceRequest.php    |  24 +
 .../Admin/Manage/TuitionPaymentRequest.php    |  27 ++
 app/Models/AcademicTerm.php                   |   6 +
 app/Models/Student.php                        |   5 +
 app/Models/TuitionInvoice.php                 |  38 ++
 app/Models/TuitionPayment.php                 |  58 +++
 .../Admin/Manage/TuitionInvoiceService.php    |  48 ++
 .../Admin/Manage/TuitionPaymentService.php    |  58 +++
 app/Services/Admin/Users/StudentService.php   |   7 +
 ...4_000005_create_tuition_invoices_table.php |  25 ++
 ...4_000006_create_tuition_payments_table.php |  29 ++
 database/seeders/DatabaseSeeder.php           |   2 +
 database/seeders/TuitionInvoiceSeeder.php     |  31 ++
 database/seeders/TuitionPaymentSeeder.php     |  37 ++
 resources/js/components/app-sidebar.tsx       |  12 +
 resources/js/components/rupiah-input.tsx      | 132 ++++++
 resources/js/lib/currency.ts                  |  12 +
 .../admin/manage/tuition-invoices/columns.tsx | 131 ++++++
 .../admin/manage/tuition-invoices/index.tsx   | 393 +++++++++++++++++
 .../manage/tuition-invoices/payments.tsx      | 415 ++++++++++++++++++
 resources/js/types/tuition-invoice.ts         |  20 +
 resources/js/types/tuition-payment.ts         |  25 ++
 routes/admin.php                              |  11 +
 26 files changed, 1674 insertions(+)
 create mode 100644 app/Enums/PaymentStatus.php
 create mode 100644 app/Http/Controllers/Admin/Manage/TuitionInvoiceController.php
 create mode 100644 app/Http/Controllers/Admin/Manage/TuitionPaymentController.php
 create mode 100644 app/Http/Requests/Admin/Manage/TuitionInvoiceRequest.php
 create mode 100644 app/Http/Requests/Admin/Manage/TuitionPaymentRequest.php
 create mode 100644 app/Models/TuitionInvoice.php
 create mode 100644 app/Models/TuitionPayment.php
 create mode 100644 app/Services/Admin/Manage/TuitionInvoiceService.php
 create mode 100644 app/Services/Admin/Manage/TuitionPaymentService.php
 create mode 100644 database/migrations/2026_08_24_000005_create_tuition_invoices_table.php
 create mode 100644 database/migrations/2026_08_24_000006_create_tuition_payments_table.php
 create mode 100644 database/seeders/TuitionInvoiceSeeder.php
 create mode 100644 database/seeders/TuitionPaymentSeeder.php
 create mode 100644 resources/js/components/rupiah-input.tsx
 create mode 100644 resources/js/lib/currency.ts
 create mode 100644 resources/js/pages/admin/manage/tuition-invoices/columns.tsx
 create mode 100644 resources/js/pages/admin/manage/tuition-invoices/index.tsx
 create mode 100644 resources/js/pages/admin/manage/tuition-invoices/payments.tsx
 create mode 100644 resources/js/types/tuition-invoice.ts
 create mode 100644 resources/js/types/tuition-payment.ts

diff --git a/app/Enums/PaymentStatus.php b/app/Enums/PaymentStatus.php
new file mode 100644
index 0000000..8527118
--- /dev/null
+++ b/app/Enums/PaymentStatus.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Enums;
+
+enum PaymentStatus: string
+{
+    case Unpaid = 'unpaid';
+    case Partial = 'partial';
+    case Paid = 'paid';
+
+    public function label(): string
+    {
+        return match ($this) {
+            self::Unpaid => 'Belum Bayar',
+            self::Partial => 'Sebagian',
+            self::Paid => 'Lunas',
+        };
+    }
+}
diff --git a/app/Http/Controllers/Admin/Manage/TuitionInvoiceController.php b/app/Http/Controllers/Admin/Manage/TuitionInvoiceController.php
new file mode 100644
index 0000000..d38d696
--- /dev/null
+++ b/app/Http/Controllers/Admin/Manage/TuitionInvoiceController.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace App\Http\Controllers\Admin\Manage;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\Admin\Manage\TuitionInvoiceRequest;
+use App\Http\Requests\PaginatedRequest;
+use App\Models\TuitionInvoice;
+use App\Services\Admin\Manage\TuitionInvoiceService;
+use App\Services\Admin\Master\AcademicTermService;
+use App\Services\Admin\Users\StudentService;
+use Illuminate\Http\RedirectResponse;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class TuitionInvoiceController extends Controller
+{
+    public function __construct(
+        private readonly TuitionInvoiceService $service,
+        private readonly StudentService $studentService,
+        private readonly AcademicTermService $academicTermService,
+    ) {}
+
+    public function index(PaginatedRequest $request): Response
+    {
+        return Inertia::render('admin/manage/tuition-invoices/index', [
+            'invoices' => $this->service->paginated(...$request->validatedWithDefaults()),
+            'students' => $this->studentService->getAllForSelect(),
+            'academicTerms' => $this->academicTermService->getAll(),
+        ]);
+    }
+
+    public function store(TuitionInvoiceRequest $request): RedirectResponse
+    {
+        $this->service->create($request->validated());
+
+        Inertia::flash('toast', ['type' => 'success', 'message' => 'Tagihan berhasil ditambahkan.']);
+
+        return to_route('admin.manage.tuition-invoices.index');
+    }
+
+    public function update(TuitionInvoiceRequest $request, TuitionInvoice $tuitionInvoice): RedirectResponse
+    {
+        $this->service->update($tuitionInvoice, $request->validated());
+
+        Inertia::flash('toast', ['type' => 'success', 'message' => 'Tagihan berhasil diperbarui.']);
+
+        return to_route('admin.manage.tuition-invoices.index');
+    }
+
+    public function destroy(TuitionInvoice $tuitionInvoice): RedirectResponse
+    {
+        $this->service->delete($tuitionInvoice);
+
+        Inertia::flash('toast', ['type' => 'success', 'message' => 'Tagihan berhasil dihapus.']);
+
+        return back();
+    }
+}
diff --git a/app/Http/Controllers/Admin/Manage/TuitionPaymentController.php b/app/Http/Controllers/Admin/Manage/TuitionPaymentController.php
new file mode 100644
index 0000000..f2ab4c5
--- /dev/null
+++ b/app/Http/Controllers/Admin/Manage/TuitionPaymentController.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Http\Controllers\Admin\Manage;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\Admin\Manage\TuitionPaymentRequest;
+use App\Models\TuitionInvoice;
+use App\Models\TuitionPayment;
+use App\Services\Admin\Manage\TuitionPaymentService;
+use Illuminate\Http\RedirectResponse;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class TuitionPaymentController extends Controller
+{
+    public function __construct(
+        private readonly TuitionPaymentService $service,
+    ) {}
+
+    public function index(TuitionInvoice $tuitionInvoice): Response
+    {
+        $tuitionInvoice->load(['student.user.profile', 'student.department', 'academicTerm']);
+
+        return Inertia::render('admin/manage/tuition-invoices/payments', [
+            'invoice' => $tuitionInvoice,
+            'payments' => $this->service->forInvoice($tuitionInvoice),
+        ]);
+    }
+
+    public function store(TuitionPaymentRequest $request, TuitionInvoice $tuitionInvoice): RedirectResponse
+    {
+        $this->service->create($tuitionInvoice, $request->validated(), $request->file('proof'));
+
+        return Inertia::flash('toast', ['type' => 'success', 'message' => 'Pembayaran berhasil ditambahkan.'])->back();
+    }
+
+    public function update(TuitionPaymentRequest $request, TuitionInvoice $tuitionInvoice, TuitionPayment $payment): RedirectResponse
+    {
+        $this->service->update($payment, $request->validated(), $request->file('proof'));
+
+        return Inertia::flash('toast', ['type' => 'success', 'message' => 'Pembayaran berhasil diperbarui.'])->back();
+    }
+
+    public function destroy(TuitionInvoice $tuitionInvoice, TuitionPayment $payment): RedirectResponse
+    {
+        $this->service->delete($payment);
+
+        return Inertia::flash('toast', ['type' => 'success', 'message' => 'Pembayaran berhasil dihapus.'])->back();
+    }
+}
diff --git a/app/Http/Requests/Admin/Manage/TuitionInvoiceRequest.php b/app/Http/Requests/Admin/Manage/TuitionInvoiceRequest.php
new file mode 100644
index 0000000..ea2a44c
--- /dev/null
+++ b/app/Http/Requests/Admin/Manage/TuitionInvoiceRequest.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Requests\Admin\Manage;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rule;
+
+class TuitionInvoiceRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    public function rules(): array
+    {
+        return [
+            'student_id' => ['required', 'integer', Rule::exists('students', 'id')],
+            'academic_term_id' => ['required', 'integer', Rule::exists('academic_terms', 'id')],
+            'amount_due' => ['required', 'numeric', 'min:0'],
+            'due_date' => ['nullable', 'date'],
+        ];
+    }
+}
diff --git a/app/Http/Requests/Admin/Manage/TuitionPaymentRequest.php b/app/Http/Requests/Admin/Manage/TuitionPaymentRequest.php
new file mode 100644
index 0000000..a818687
--- /dev/null
+++ b/app/Http/Requests/Admin/Manage/TuitionPaymentRequest.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Http\Requests\Admin\Manage;
+
+use App\Enums\PaymentStatus;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rule;
+
+class TuitionPaymentRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    public function rules(): array
+    {
+        return [
+            'amount_paid' => ['required', 'numeric', 'min:0'],
+            'paid_at' => ['required', 'date'],
+            'payment_method' => ['nullable', 'string', 'max:30'],
+            'status' => ['required', Rule::enum(PaymentStatus::class)],
+            'notes' => ['nullable', 'string'],
+            'proof' => ['nullable', 'file', 'max:10240', 'mimes:pdf,jpg,jpeg,png'],
+        ];
+    }
+}
diff --git a/app/Models/AcademicTerm.php b/app/Models/AcademicTerm.php
index b4dc745..692f3ae 100644
--- a/app/Models/AcademicTerm.php
+++ b/app/Models/AcademicTerm.php
@@ -8,6 +8,7 @@
 use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\HasMany;
 
 #[Guarded(['id'])]
 #[Appends(['formatted_start_date', 'formatted_end_date'])]
@@ -15,6 +16,11 @@ class AcademicTerm extends Model
 {
     use HasFactory;
 
+    public function tuitionInvoices(): HasMany
+    {
+        return $this->hasMany(TuitionInvoice::class);
+    }
+
     protected function casts(): array
     {
         return [
diff --git a/app/Models/Student.php b/app/Models/Student.php
index b2a5e2b..7e1d64f 100644
--- a/app/Models/Student.php
+++ b/app/Models/Student.php
@@ -51,4 +51,9 @@ public function attendances(): HasMany
     {
         return $this->hasMany(Attendance::class);
     }
+
+    public function tuitionInvoices(): HasMany
+    {
+        return $this->hasMany(TuitionInvoice::class);
+    }
 }
diff --git a/app/Models/TuitionInvoice.php b/app/Models/TuitionInvoice.php
new file mode 100644
index 0000000..67449e4
--- /dev/null
+++ b/app/Models/TuitionInvoice.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Attributes\Guarded;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+
+#[Guarded(['id'])]
+class TuitionInvoice extends Model
+{
+    use HasFactory;
+
+    protected function casts(): array
+    {
+        return [
+            'amount_due' => 'decimal:2',
+            'due_date' => 'date',
+        ];
+    }
+
+    public function student(): BelongsTo
+    {
+        return $this->belongsTo(Student::class);
+    }
+
+    public function academicTerm(): BelongsTo
+    {
+        return $this->belongsTo(AcademicTerm::class);
+    }
+
+    public function payments(): HasMany
+    {
+        return $this->hasMany(TuitionPayment::class, 'invoice_id');
+    }
+}
diff --git a/app/Models/TuitionPayment.php b/app/Models/TuitionPayment.php
new file mode 100644
index 0000000..9c9bd5a
--- /dev/null
+++ b/app/Models/TuitionPayment.php
@@ -0,0 +1,58 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\PaymentStatus;
+use Illuminate\Database\Eloquent\Attributes\Appends;
+use Illuminate\Database\Eloquent\Attributes\Guarded;
+use Illuminate\Database\Eloquent\Casts\Attribute;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Spatie\MediaLibrary\HasMedia;
+use Spatie\MediaLibrary\InteractsWithMedia;
+
+#[Guarded(['id'])]
+#[Appends(['proof_url', 'proof_name'])]
+class TuitionPayment extends Model implements HasMedia
+{
+    use HasFactory, InteractsWithMedia;
+
+    protected function casts(): array
+    {
+        return [
+            'amount_paid' => 'decimal:2',
+            'paid_at' => 'datetime',
+            'status' => PaymentStatus::class,
+        ];
+    }
+
+    public function registerMediaCollections(): void
+    {
+        $this->addMediaCollection('payment_proof')->singleFile();
+    }
+
+    public function invoice(): BelongsTo
+    {
+        return $this->belongsTo(TuitionInvoice::class, 'invoice_id');
+    }
+
+    public function recorder(): BelongsTo
+    {
+        return $this->belongsTo(User::class, 'recorded_by');
+    }
+
+    protected function proofUrl(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => $this->getFirstMediaUrl('payment_proof') ?: null,
+        );
+    }
+
+    protected function proofName(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => $this->getFirstMedia('payment_proof')?->file_name,
+        );
+    }
+}
diff --git a/app/Services/Admin/Manage/TuitionInvoiceService.php b/app/Services/Admin/Manage/TuitionInvoiceService.php
new file mode 100644
index 0000000..56289f1
--- /dev/null
+++ b/app/Services/Admin/Manage/TuitionInvoiceService.php
@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Services\Admin\Manage;
+
+use App\Models\TuitionInvoice;
+use Illuminate\Contracts\Pagination\LengthAwarePaginator;
+
+class TuitionInvoiceService
+{
+    public function paginated(int $perPage = 25, string $search = '', string $sort = 'created_at', string $direction = 'desc', array $filters = []): LengthAwarePaginator
+    {
+        return TuitionInvoice::query()
+            ->select(['id', 'student_id', 'academic_term_id', 'amount_due', 'due_date'])
+            ->withSum('payments as paid_total', 'amount_paid')
+            ->withCount('payments')
+            ->with(['student.user.profile', 'student.department', 'academicTerm:id,name,semester,start_date,end_date'])
+            ->when($search, fn ($q) => $q->whereHas('student', fn ($q) => $q->where('student_number', 'like', "%{$search}%")
+                ->orWhereHas('user.profile', fn ($q) => $q->where('full_name', 'like', "%{$search}%"))))
+            ->orderBy($sort, $direction)
+            ->paginate($perPage);
+    }
+
+    public function create(array $data): TuitionInvoice
+    {
+        return TuitionInvoice::create([
+            'student_id' => $data['student_id'],
+            'academic_term_id' => $data['academic_term_id'],
+            'amount_due' => $data['amount_due'],
+            'due_date' => $data['due_date'] ?? null,
+        ]);
+    }
+
+    public function update(TuitionInvoice $invoice, array $data): TuitionInvoice
+    {
+        $invoice->student_id = $data['student_id'];
+        $invoice->academic_term_id = $data['academic_term_id'];
+        $invoice->amount_due = $data['amount_due'];
+        $invoice->due_date = $data['due_date'] ?? null;
+        $invoice->update();
+
+        return $invoice;
+    }
+
+    public function delete(TuitionInvoice $invoice): bool
+    {
+        return $invoice->delete();
+    }
+}
diff --git a/app/Services/Admin/Manage/TuitionPaymentService.php b/app/Services/Admin/Manage/TuitionPaymentService.php
new file mode 100644
index 0000000..4997db0
--- /dev/null
+++ b/app/Services/Admin/Manage/TuitionPaymentService.php
@@ -0,0 +1,58 @@
+<?php
+
+namespace App\Services\Admin\Manage;
+
+use App\Models\TuitionInvoice;
+use App\Models\TuitionPayment;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Http\UploadedFile;
+
+class TuitionPaymentService
+{
+    public function forInvoice(TuitionInvoice $invoice): Collection
+    {
+        return $invoice->payments()
+            ->with('recorder.profile')
+            ->latest('paid_at')
+            ->get();
+    }
+
+    public function create(TuitionInvoice $invoice, array $data, ?UploadedFile $file): TuitionPayment
+    {
+        $payment = $invoice->payments()->create([
+            'amount_paid' => $data['amount_paid'],
+            'paid_at' => $data['paid_at'],
+            'payment_method' => $data['payment_method'] ?? null,
+            'status' => $data['status'],
+            'recorded_by' => auth()->id(),
+            'notes' => $data['notes'] ?? null,
+        ]);
+
+        if ($file) {
+            $payment->addMedia($file)->toMediaCollection('payment_proof');
+        }
+
+        return $payment;
+    }
+
+    public function update(TuitionPayment $payment, array $data, ?UploadedFile $file): TuitionPayment
+    {
+        $payment->amount_paid = $data['amount_paid'];
+        $payment->paid_at = $data['paid_at'];
+        $payment->payment_method = $data['payment_method'] ?? null;
+        $payment->status = $data['status'];
+        $payment->notes = $data['notes'] ?? null;
+        $payment->update();
+
+        if ($file) {
+            $payment->addMedia($file)->toMediaCollection('payment_proof');
+        }
+
+        return $payment;
+    }
+
+    public function delete(TuitionPayment $payment): bool
+    {
+        return $payment->delete();
+    }
+}
diff --git a/app/Services/Admin/Users/StudentService.php b/app/Services/Admin/Users/StudentService.php
index 2a9d869..cfa9466 100644
--- a/app/Services/Admin/Users/StudentService.php
+++ b/app/Services/Admin/Users/StudentService.php
@@ -2,13 +2,20 @@
 
 namespace App\Services\Admin\Users;
 
+use App\Models\Student;
 use App\Models\User;
 use Illuminate\Contracts\Pagination\LengthAwarePaginator;
+use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Hash;
 
 class StudentService
 {
+    public function getAllForSelect(): Collection
+    {
+        return Student::with(['user.profile', 'department'])->get();
+    }
+
     public function getPaginated(array $filters = []): LengthAwarePaginator
     {
         return User::with(['profile', 'student.department'])
diff --git a/database/migrations/2026_08_24_000005_create_tuition_invoices_table.php b/database/migrations/2026_08_24_000005_create_tuition_invoices_table.php
new file mode 100644
index 0000000..fb12464
--- /dev/null
+++ b/database/migrations/2026_08_24_000005_create_tuition_invoices_table.php
@@ -0,0 +1,25 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('tuition_invoices', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('student_id')->constrained()->cascadeOnDelete();
+            $table->foreignId('academic_term_id')->constrained()->cascadeOnDelete();
+            $table->decimal('amount_due', 15, 2);
+            $table->date('due_date')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('tuition_invoices');
+    }
+};
diff --git a/database/migrations/2026_08_24_000006_create_tuition_payments_table.php b/database/migrations/2026_08_24_000006_create_tuition_payments_table.php
new file mode 100644
index 0000000..b97ba87
--- /dev/null
+++ b/database/migrations/2026_08_24_000006_create_tuition_payments_table.php
@@ -0,0 +1,29 @@
+<?php
+
+use App\Enums\PaymentStatus;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('tuition_payments', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('invoice_id')->constrained('tuition_invoices')->cascadeOnDelete();
+            $table->decimal('amount_paid', 15, 2);
+            $table->timestamp('paid_at');
+            $table->string('payment_method', 30)->nullable();
+            $table->enum('status', array_values(PaymentStatus::cases()))->nullable()->default(PaymentStatus::Unpaid->value);
+            $table->foreignId('recorded_by')->nullable()->constrained('users')->nullOnDelete();
+            $table->text('notes')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('tuition_payments');
+    }
+};
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 6238346..cfb29eb 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -25,6 +25,8 @@ public function run(): void
             SubmissionSeeder::class,
             ScheduleSeeder::class,
             AttendanceSeeder::class,
+            TuitionInvoiceSeeder::class,
+            TuitionPaymentSeeder::class,
         ]);
     }
 }
diff --git a/database/seeders/TuitionInvoiceSeeder.php b/database/seeders/TuitionInvoiceSeeder.php
new file mode 100644
index 0000000..3865175
--- /dev/null
+++ b/database/seeders/TuitionInvoiceSeeder.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\TuitionInvoice;
+use Illuminate\Database\Seeder;
+
+class TuitionInvoiceSeeder extends Seeder
+{
+    public function run(): void
+    {
+        TuitionInvoice::insert([
+            [
+                'student_id' => 1,
+                'academic_term_id' => 2,
+                'amount_due' => 3000000,
+                'due_date' => '2026-08-10',
+                'created_at' => '2026-07-25 08:00:00',
+                'updated_at' => '2026-07-25 08:00:00',
+            ],
+            [
+                'student_id' => 2,
+                'academic_term_id' => 2,
+                'amount_due' => 3000000,
+                'due_date' => '2026-08-10',
+                'created_at' => '2026-07-25 08:00:00',
+                'updated_at' => '2026-07-25 08:00:00',
+            ],
+        ]);
+    }
+}
diff --git a/database/seeders/TuitionPaymentSeeder.php b/database/seeders/TuitionPaymentSeeder.php
new file mode 100644
index 0000000..4f5eab7
--- /dev/null
+++ b/database/seeders/TuitionPaymentSeeder.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\TuitionPayment;
+use Illuminate\Database\Seeder;
+
+class TuitionPaymentSeeder extends Seeder
+{
+    public function run(): void
+    {
+        TuitionPayment::insert([
+            [
+                'invoice_id' => 1,
+                'amount_paid' => 3000000,
+                'paid_at' => '2026-08-03 10:00:00',
+                'payment_method' => 'transfer',
+                'status' => 'paid',
+                'recorded_by' => 6,
+                'notes' => 'Lunas sekaligus',
+                'created_at' => '2026-08-03 10:00:00',
+                'updated_at' => '2026-08-03 10:00:00',
+            ],
+            [
+                'invoice_id' => 2,
+                'amount_paid' => 1500000,
+                'paid_at' => '2026-08-04 11:00:00',
+                'payment_method' => 'transfer',
+                'status' => 'partial',
+                'recorded_by' => 6,
+                'notes' => 'Cicilan tahap 1',
+                'created_at' => '2026-08-04 11:00:00',
+                'updated_at' => '2026-08-04 11:00:00',
+            ],
+        ]);
+    }
+}
diff --git a/resources/js/components/app-sidebar.tsx b/resources/js/components/app-sidebar.tsx
index 0d2adac..73e4a39 100644
--- a/resources/js/components/app-sidebar.tsx
+++ b/resources/js/components/app-sidebar.tsx
@@ -15,6 +15,7 @@ import {
     ClipboardList,
     FileText,
     GraduationCap,
+    Receipt,
     School,
     User,
     Users,
@@ -39,6 +40,7 @@ import { index as courseClassesRoute } from '@/routes/admin/manage/course-classe
 import { index as coursesRoute } from '@/routes/admin/manage/courses';
 import { index as materialsRoute } from '@/routes/admin/manage/materials';
 import { index as schedulesRoute } from '@/routes/admin/manage/schedules';
+import { index as tuitionInvoicesRoute } from '@/routes/admin/manage/tuition-invoices';
 import { index as academicTerm } from '@/routes/admin/master/academic-terms';
 import { index as departmentsRoute } from '@/routes/admin/master/departments';
 import { index as administratorsRoute } from '@/routes/admin/users/administrators';
@@ -110,6 +112,16 @@ const data: {
                 },
             ],
         },
+        {
+            label: 'Keuangan',
+            items: [
+                {
+                    name: 'Tagihan',
+                    url: tuitionInvoicesRoute.url(),
+                    icon: Receipt,
+                },
+            ],
+        },
         {
             label: 'Pengguna',
             items: [
diff --git a/resources/js/components/rupiah-input.tsx b/resources/js/components/rupiah-input.tsx
new file mode 100644
index 0000000..97a2254
--- /dev/null
+++ b/resources/js/components/rupiah-input.tsx
@@ -0,0 +1,132 @@
+import { useRef, useState } from 'react';
+import {
+    InputGroup,
+    InputGroupAddon,
+    InputGroupInput,
+    InputGroupText,
+} from '@/components/ui/input-group';
+
+type RupiahInputProps = {
+    name: string;
+    id?: string;
+    defaultValue?: string | number | null;
+    placeholder?: string;
+    disabled?: boolean;
+    ariaInvalid?: boolean;
+};
+
+// Strips everything but digits from a display value (e.g. "1.500.000" -> "1500000").
+function digitsOnly(value: string): string {
+    return value.replace(/\D/g, '').replace(/^0+(?=\d)/, '');
+}
+
+// Parses the initial value coming from the backend, which may be a decimal
+// string like "3000000.00" - only the integer part before the decimal point
+// is kept (unlike digitsOnly, which would wrongly treat "." as a thousands
+// separator here).
+function parseInitialDigits(value: string | number | null | undefined): string {
+    return digitsOnly(String(value ?? '').split('.')[0]);
+}
+
+function formatThousands(digits: string): string {
+    return digits.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+}
+
+// Counts digit characters (ignoring separators) before `caret` in `value`.
+function digitsBeforeCaret(value: string, caret: number): number {
+    let count = 0;
+
+    for (let i = 0; i < caret && i < value.length; i++) {
+        if (/\d/.test(value[i])) {
+            count++;
+        }
+    }
+
+    return count;
+}
+
+// Finds the position in `formatted` right after the `digitCount`-th digit.
+function caretForDigitCount(formatted: string, digitCount: number): number {
+    if (digitCount <= 0) {
+        return 0;
+    }
+
+    let seen = 0;
+
+    for (let i = 0; i < formatted.length; i++) {
+        if (/\d/.test(formatted[i])) {
+            seen++;
+
+            if (seen === digitCount) {
+                return i + 1;
+            }
+        }
+    }
+
+    return formatted.length;
+}
+
+/**
+ * The visible <input>'s value IS the formatted "1.000.000" text - there is
+ * no separate overlay, so the caret can never visually drift from the
+ * displayed digits. On every change, the caret's digit-position is measured
+ * first, the value is reformatted, and the caret is restored to the same
+ * digit-position - all synchronously inside the change handler (never via
+ * useLayoutEffect or requestAnimationFrame), so the DOM is already
+ * consistent by the time React commits and fast typing never drops
+ * keystrokes.
+ */
+export function RupiahInput({
+    name,
+    id,
+    defaultValue,
+    placeholder = '0',
+    disabled,
+    ariaInvalid,
+}: RupiahInputProps) {
+    const hiddenRef = useRef<HTMLInputElement>(null);
+    const initialDigits = parseInitialDigits(defaultValue);
+    const [value, setValue] = useState(formatThousands(initialDigits));
+
+    function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+        const input = e.target;
+        const caret = input.selectionStart ?? input.value.length;
+        const digitCount = digitsBeforeCaret(input.value, caret);
+
+        const digits = digitsOnly(input.value);
+        const formatted = formatThousands(digits);
+        const newCaret = caretForDigitCount(formatted, digitCount);
+
+        input.value = formatted;
+        input.setSelectionRange(newCaret, newCaret);
+
+        setValue(formatted);
+
+        if (hiddenRef.current) {
+            hiddenRef.current.value = digits;
+        }
+    }
+
+    return (
+        <InputGroup>
+            <InputGroupAddon>
+                <InputGroupText>Rp</InputGroupText>
+            </InputGroupAddon>
+            <InputGroupInput
+                id={id}
+                inputMode="numeric"
+                placeholder={placeholder}
+                value={value}
+                onChange={handleChange}
+                disabled={disabled}
+                aria-invalid={ariaInvalid}
+            />
+            <input
+                ref={hiddenRef}
+                type="hidden"
+                name={name}
+                defaultValue={initialDigits}
+            />
+        </InputGroup>
+    );
+}
diff --git a/resources/js/lib/currency.ts b/resources/js/lib/currency.ts
new file mode 100644
index 0000000..db60460
--- /dev/null
+++ b/resources/js/lib/currency.ts
@@ -0,0 +1,12 @@
+export function formatRupiah(
+    value: string | number | null | undefined,
+): string {
+    const amount = Number(value ?? 0);
+
+    return new Intl.NumberFormat('id-ID', {
+        style: 'currency',
+        currency: 'IDR',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0,
+    }).format(amount);
+}
diff --git a/resources/js/pages/admin/manage/tuition-invoices/columns.tsx b/resources/js/pages/admin/manage/tuition-invoices/columns.tsx
new file mode 100644
index 0000000..006cbd8
--- /dev/null
+++ b/resources/js/pages/admin/manage/tuition-invoices/columns.tsx
@@ -0,0 +1,131 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import { format } from 'date-fns';
+import { CreditCard, Pencil, Trash2 } from 'lucide-react';
+import { RowActions } from '@/components/row-actions';
+import { Badge } from '@/components/ui/badge';
+import { formatRupiah } from '@/lib/currency';
+import { index as paymentsIndex } from '@/routes/admin/manage/tuition-invoices/payments';
+import type { TuitionInvoice } from '@/types/tuition-invoice';
+
+export type { TuitionInvoice } from '@/types/tuition-invoice';
+
+type CreateColumnsParams = {
+    handleEdit: (invoice: TuitionInvoice) => void;
+    handleDeleteClick: (invoice: TuitionInvoice) => void;
+};
+
+export function createTuitionInvoiceColumns(
+    params: CreateColumnsParams,
+): ColumnDef<TuitionInvoice>[] {
+    const { handleEdit, handleDeleteClick } = params;
+
+    return [
+        {
+            accessorKey: 'student.student_number',
+            header: () => <span>Mahasiswa</span>,
+            cell: ({ row }) => {
+                const student = row.original.student;
+
+                return (
+                    <div>
+                        <p className="font-medium">
+                            {student?.user?.profile?.full_name ?? 'N/A'}
+                        </p>
+                        <p className="text-xs text-muted-foreground">
+                            {student?.student_number} &middot;{' '}
+                            {student?.department?.name ?? '-'}
+                        </p>
+                    </div>
+                );
+            },
+        },
+        {
+            accessorKey: 'academic_term.name',
+            header: () => <span>Periode</span>,
+            cell: ({ row }) => row.original.academic_term?.name ?? '-',
+        },
+        {
+            accessorKey: 'amount_due',
+            header: () => <span>Tagihan</span>,
+            cell: ({ row }) => formatRupiah(row.getValue('amount_due')),
+        },
+        {
+            accessorKey: 'paid_total',
+            header: () => <span>Status Bayar</span>,
+            cell: ({ row }) => {
+                const invoice = row.original;
+                const paidTotal = Number(invoice.paid_total ?? 0);
+                const amountDue = Number(invoice.amount_due);
+
+                const variant =
+                    paidTotal >= amountDue && amountDue > 0
+                        ? 'default'
+                        : paidTotal > 0
+                          ? 'secondary'
+                          : 'outline';
+                const label =
+                    paidTotal >= amountDue && amountDue > 0
+                        ? 'Lunas'
+                        : paidTotal > 0
+                          ? 'Sebagian'
+                          : 'Belum Bayar';
+
+                return (
+                    <div className="flex flex-col gap-1">
+                        <Badge variant={variant} className="w-fit">
+                            {label}
+                        </Badge>
+                        <span className="text-xs text-muted-foreground">
+                            {formatRupiah(paidTotal)} /{' '}
+                            {formatRupiah(amountDue)}
+                        </span>
+                    </div>
+                );
+            },
+        },
+        {
+            accessorKey: 'due_date',
+            header: () => <span>Jatuh Tempo</span>,
+            cell: ({ row }) => {
+                const dueDate = row.getValue('due_date') as string | null;
+
+                return dueDate ? format(new Date(dueDate), 'd MMM yyyy') : '-';
+            },
+        },
+        {
+            id: 'actions',
+            header: () => <span className="block text-center">Aksi</span>,
+            meta: {
+                className: 'w-[130px] text-center',
+                headerClassName: 'w-[130px] text-center',
+            },
+            cell: ({ row }) => {
+                const invoice = row.original;
+
+                return (
+                    <RowActions
+                        actions={[
+                            {
+                                label: 'Pembayaran',
+                                icon: <CreditCard className="h-4 w-4" />,
+                                href: paymentsIndex.url(invoice.id),
+                            },
+                            {
+                                label: 'Edit',
+                                icon: <Pencil className="h-4 w-4" />,
+                                onClick: () => handleEdit(invoice),
+                            },
+                            {
+                                label: 'Hapus',
+                                icon: (
+                                    <Trash2 className="h-4 w-4 text-destructive" />
+                                ),
+                                onClick: () => handleDeleteClick(invoice),
+                            },
+                        ]}
+                    />
+                );
+            },
+        },
+    ];
+}
diff --git a/resources/js/pages/admin/manage/tuition-invoices/index.tsx b/resources/js/pages/admin/manage/tuition-invoices/index.tsx
new file mode 100644
index 0000000..7a89802
--- /dev/null
+++ b/resources/js/pages/admin/manage/tuition-invoices/index.tsx
@@ -0,0 +1,393 @@
+import { Head, router } from '@inertiajs/react';
+import { format } from 'date-fns';
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
+import type { PaginationState } from '@/components/data-table';
+import { DataTable } from '@/components/data-table';
+import { DatePicker } from '@/components/date-picker';
+import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
+import { FormDialog } from '@/components/form-dialog';
+import InputError from '@/components/input-error';
+import { PageHeader } from '@/components/page-header';
+import { RupiahInput } from '@/components/rupiah-input';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+import { useServerTable } from '@/hooks/use-server-table';
+import {
+    index as tuitionInvoiceIndex,
+    destroy,
+    store,
+    update,
+} from '@/routes/admin/manage/tuition-invoices';
+import type {
+    TuitionInvoice,
+    TuitionInvoiceStudent,
+} from '@/types/tuition-invoice';
+import { createTuitionInvoiceColumns } from './columns';
+
+type AcademicTermOption = { id: number; name: string; semester: string };
+
+type Props = {
+    invoices: {
+        data: TuitionInvoice[];
+        current_page: number;
+        last_page: number;
+        per_page: number;
+        total: number;
+    };
+    students: TuitionInvoiceStudent[];
+    academicTerms: AcademicTermOption[];
+    highlight?: number;
+};
+
+function studentLabel(student: TuitionInvoiceStudent): string {
+    return `${student.user?.profile?.full_name ?? 'N/A'} - ${student.student_number}`;
+}
+
+export default function TuitionInvoiceIndex({
+    invoices,
+    students,
+    academicTerms,
+    highlight,
+}: Props) {
+    const [createOpen, setCreateOpen] = useState(false);
+    const [editing, setEditing] = useState<TuitionInvoice | null>(null);
+    const [deleting, setDeleting] = useState<TuitionInvoice | null>(null);
+
+    const pagination: PaginationState = {
+        current_page: invoices.current_page,
+        last_page: invoices.last_page,
+        per_page: invoices.per_page,
+        total: invoices.total,
+    };
+
+    const {
+        search,
+        handlePageChange,
+        handlePerPageChange,
+        handleSearchChange,
+    } = useServerTable({
+        route: () => tuitionInvoiceIndex.url(),
+        pagination,
+    });
+
+    function handleDelete() {
+        if (!deleting) {
+            return;
+        }
+
+        router.delete(destroy(deleting.id), {
+            onSuccess: () => setDeleting(null),
+        });
+    }
+
+    const columns = createTuitionInvoiceColumns({
+        handleEdit: (invoice) => setEditing(invoice),
+        handleDeleteClick: (invoice) => setDeleting(invoice),
+    });
+
+    return (
+        <>
+            <Head title="Tagihan" />
+
+            <div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
+                <PageHeader
+                    title="Tagihan"
+                    description={
+                        highlight && (
+                            <p className="mt-1 text-sm text-muted-foreground">
+                                Menampilkan tagihan dari notifikasi.
+                            </p>
+                        )
+                    }
+                    actions={
+                        <Button asChild>
+                            <button
+                                type="button"
+                                onClick={() => setCreateOpen(true)}
+                            >
+                                <Plus className="h-4 w-4" />
+                                Tambah
+                            </button>
+                        </Button>
+                    }
+                />
+
+                <CreateForm
+                    open={createOpen}
+                    onOpenChange={setCreateOpen}
+                    students={students}
+                    academicTerms={academicTerms}
+                />
+
+                <EditForm
+                    key={editing?.id}
+                    open={editing !== null}
+                    onOpenChange={(open) => {
+                        if (!open) {
+                            setEditing(null);
+                        }
+                    }}
+                    editing={editing}
+                    students={students}
+                    academicTerms={academicTerms}
+                />
+
+                <DataTable
+                    columns={columns}
+                    data={invoices.data}
+                    emptyText="Belum ada data tagihan."
+                    pagination={pagination}
+                    onPageChange={handlePageChange}
+                    onPerPageChange={handlePerPageChange}
+                    onSearchChange={handleSearchChange}
+                    searchValue={search}
+                    searchKey="student"
+                    searchPlaceholder="Cari nama atau NIM mahasiswa..."
+                />
+
+                <DeleteConfirmDialog
+                    target={deleting}
+                    onOpenChange={(open) => {
+                        if (!open) {
+                            setDeleting(null);
+                        }
+                    }}
+                    title="Hapus Tagihan"
+                    description={(invoice) =>
+                        `Apakah Anda yakin ingin menghapus tagihan untuk "${invoice.student?.user?.profile?.full_name ?? 'mahasiswa ini'}"? Tindakan ini tidak dapat dibatalkan.`
+                    }
+                    onConfirm={handleDelete}
+                />
+            </div>
+        </>
+    );
+}
+
+function CreateForm({
+    open,
+    onOpenChange,
+    students,
+    academicTerms,
+}: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    students: TuitionInvoiceStudent[];
+    academicTerms: AcademicTermOption[];
+}) {
+    const [dueDate, setDueDate] = useState<Date | undefined>();
+
+    return (
+        <FormDialog
+            open={open}
+            onOpenChange={onOpenChange}
+            title="Tambah Tagihan"
+            action={store()}
+            resetOnSuccess
+            onSuccess={() => {
+                onOpenChange(false);
+                setDueDate(undefined);
+            }}
+        >
+            {({ errors }) => (
+                <div className="grid gap-4">
+                    <div className="grid gap-2">
+                        <Label>
+                            Mahasiswa{' '}
+                            <span className="text-destructive">*</span>
+                        </Label>
+                        <input type="hidden" name="student_id" />
+                        <Select name="student_id">
+                            <SelectTrigger className="w-full">
+                                <SelectValue placeholder="Pilih mahasiswa" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {students.map((student) => (
+                                    <SelectItem
+                                        key={student.id}
+                                        value={String(student.id)}
+                                    >
+                                        {studentLabel(student)}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                        <InputError message={errors.student_id} />
+                    </div>
+                    <div className="grid gap-2">
+                        <Label>
+                            Periode Akademik{' '}
+                            <span className="text-destructive">*</span>
+                        </Label>
+                        <input type="hidden" name="academic_term_id" />
+                        <Select name="academic_term_id">
+                            <SelectTrigger className="w-full">
+                                <SelectValue placeholder="Pilih periode akademik" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {academicTerms.map((term) => (
+                                    <SelectItem
+                                        key={term.id}
+                                        value={String(term.id)}
+                                    >
+                                        {term.name}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                        <InputError message={errors.academic_term_id} />
+                    </div>
+                    <div className="grid gap-2">
+                        <Label htmlFor="amount_due">
+                            Jumlah Tagihan{' '}
+                            <span className="text-destructive">*</span>
+                        </Label>
+                        <RupiahInput
+                            id="amount_due"
+                            name="amount_due"
+                            placeholder="3.000.000"
+                            ariaInvalid={!!errors.amount_due}
+                        />
+                        <InputError message={errors.amount_due} />
+                    </div>
+                    <div className="grid gap-2">
+                        <Label>Jatuh Tempo</Label>
+                        <input
+                            type="hidden"
+                            name="due_date"
+                            value={dueDate ? format(dueDate, 'yyyy-MM-dd') : ''}
+                        />
+                        <DatePicker
+                            value={dueDate}
+                            onChange={setDueDate}
+                            placeholder="Pilih tanggal jatuh tempo"
+                        />
+                        <InputError message={errors.due_date} />
+                    </div>
+                </div>
+            )}
+        </FormDialog>
+    );
+}
+
+function EditForm({
+    open,
+    onOpenChange,
+    editing,
+    students,
+    academicTerms,
+}: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    editing: TuitionInvoice | null;
+    students: TuitionInvoiceStudent[];
+    academicTerms: AcademicTermOption[];
+}) {
+    const [dueDate, setDueDate] = useState<Date | undefined>(
+        editing?.due_date ? new Date(editing.due_date) : undefined,
+    );
+
+    return (
+        <FormDialog
+            open={open}
+            onOpenChange={onOpenChange}
+            title="Edit Tagihan"
+            action={editing ? update(editing.id) : ''}
+            resetOnSuccess
+            onSuccess={() => onOpenChange(false)}
+        >
+            {({ errors }) =>
+                editing && (
+                    <div className="grid gap-4">
+                        <div className="grid gap-2">
+                            <Label>
+                                Mahasiswa{' '}
+                                <span className="text-destructive">*</span>
+                            </Label>
+                            <Select
+                                name="student_id"
+                                defaultValue={String(editing.student_id)}
+                            >
+                                <SelectTrigger className="w-full">
+                                    <SelectValue placeholder="Pilih mahasiswa" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {students.map((student) => (
+                                        <SelectItem
+                                            key={student.id}
+                                            value={String(student.id)}
+                                        >
+                                            {studentLabel(student)}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                            <InputError message={errors.student_id} />
+                        </div>
+                        <div className="grid gap-2">
+                            <Label>
+                                Periode Akademik{' '}
+                                <span className="text-destructive">*</span>
+                            </Label>
+                            <Select
+                                name="academic_term_id"
+                                defaultValue={String(editing.academic_term_id)}
+                            >
+                                <SelectTrigger className="w-full">
+                                    <SelectValue placeholder="Pilih periode akademik" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {academicTerms.map((term) => (
+                                        <SelectItem
+                                            key={term.id}
+                                            value={String(term.id)}
+                                        >
+                                            {term.name}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                            <InputError message={errors.academic_term_id} />
+                        </div>
+                        <div className="grid gap-2">
+                            <Label htmlFor="edit-amount_due">
+                                Jumlah Tagihan{' '}
+                                <span className="text-destructive">*</span>
+                            </Label>
+                            <RupiahInput
+                                id="edit-amount_due"
+                                name="amount_due"
+                                defaultValue={editing.amount_due}
+                                ariaInvalid={!!errors.amount_due}
+                            />
+                            <InputError message={errors.amount_due} />
+                        </div>
+                        <div className="grid gap-2">
+                            <Label>Jatuh Tempo</Label>
+                            <input
+                                type="hidden"
+                                name="due_date"
+                                value={
+                                    dueDate ? format(dueDate, 'yyyy-MM-dd') : ''
+                                }
+                            />
+                            <DatePicker
+                                value={dueDate}
+                                onChange={setDueDate}
+                                placeholder="Pilih tanggal jatuh tempo"
+                            />
+                            <InputError message={errors.due_date} />
+                        </div>
+                    </div>
+                )
+            }
+        </FormDialog>
+    );
+}
diff --git a/resources/js/pages/admin/manage/tuition-invoices/payments.tsx b/resources/js/pages/admin/manage/tuition-invoices/payments.tsx
new file mode 100644
index 0000000..28b1fa8
--- /dev/null
+++ b/resources/js/pages/admin/manage/tuition-invoices/payments.tsx
@@ -0,0 +1,415 @@
+import { Head, router } from '@inertiajs/react';
+import type { ColumnDef } from '@tanstack/react-table';
+import { format } from 'date-fns';
+import { Paperclip, Pencil, Plus, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import { DataTable } from '@/components/data-table';
+import { DateTimeField } from '@/components/datetime-field';
+import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
+import { FileUploadField } from '@/components/file-upload-field';
+import { FormDialog } from '@/components/form-dialog';
+import InputError from '@/components/input-error';
+import { PageHeader } from '@/components/page-header';
+import { RowActions } from '@/components/row-actions';
+import { RupiahInput } from '@/components/rupiah-input';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import { formatRupiah } from '@/lib/currency';
+import { index as tuitionInvoiceIndex } from '@/routes/admin/manage/tuition-invoices';
+import {
+    destroy,
+    store,
+    update,
+} from '@/routes/admin/manage/tuition-invoices/payments';
+import type { TuitionInvoice } from '@/types/tuition-invoice';
+import type { TuitionPayment } from '@/types/tuition-payment';
+import { PaymentStatusLabels, PaymentStatuses } from '@/types/tuition-payment';
+
+type Props = {
+    invoice: TuitionInvoice;
+    payments: TuitionPayment[];
+};
+
+export default function TuitionPaymentIndex({ invoice, payments }: Props) {
+    const [createOpen, setCreateOpen] = useState(false);
+    const [editing, setEditing] = useState<TuitionPayment | null>(null);
+    const [deleting, setDeleting] = useState<TuitionPayment | null>(null);
+
+    function handleDelete() {
+        if (!deleting) {
+            return;
+        }
+
+        router.delete(destroy([invoice.id, deleting.id]), {
+            onSuccess: () => setDeleting(null),
+        });
+    }
+
+    const paidTotal = payments.reduce(
+        (sum, payment) => sum + Number(payment.amount_paid),
+        0,
+    );
+
+    const columns: ColumnDef<TuitionPayment>[] = [
+        {
+            accessorKey: 'paid_at',
+            header: () => <span>Tanggal Bayar</span>,
+            cell: ({ row }) =>
+                format(new Date(row.original.paid_at), 'd MMM yyyy, HH:mm'),
+        },
+        {
+            accessorKey: 'amount_paid',
+            header: () => <span>Jumlah</span>,
+            cell: ({ row }) => formatRupiah(row.getValue('amount_paid')),
+        },
+        {
+            accessorKey: 'payment_method',
+            header: () => <span>Metode</span>,
+            cell: ({ row }) =>
+                (row.getValue('payment_method') as string | null) ?? '-',
+        },
+        {
+            accessorKey: 'status',
+            header: () => <span className="block text-center">Status</span>,
+            meta: {
+                className: 'w-[120px] text-center',
+                headerClassName: 'w-[120px] text-center',
+            },
+            cell: ({ row }) => {
+                const status = row.getValue('status') as
+                    keyof typeof PaymentStatusLabels | null;
+
+                return (
+                    <div className="flex justify-center">
+                        {status ? (
+                            <Badge
+                                variant={
+                                    status === 'paid'
+                                        ? 'default'
+                                        : status === 'partial'
+                                          ? 'secondary'
+                                          : 'outline'
+                                }
+                            >
+                                {PaymentStatusLabels[status]}
+                            </Badge>
+                        ) : (
+                            <span className="text-muted-foreground">-</span>
+                        )}
+                    </div>
+                );
+            },
+        },
+        {
+            accessorKey: 'recorder.full_name',
+            header: () => <span>Dicatat Oleh</span>,
+            cell: ({ row }) => row.original.recorder?.full_name ?? '-',
+        },
+        {
+            accessorKey: 'proof_name',
+            header: () => <span>Bukti</span>,
+            cell: ({ row }) => {
+                const payment = row.original;
+
+                if (!payment.proof_url) {
+                    return <span className="text-muted-foreground">-</span>;
+                }
+
+                return (
+                    <a
+                        href={payment.proof_url}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="inline-flex items-center gap-1 text-primary underline underline-offset-4 hover:text-primary/80"
+                    >
+                        <Paperclip className="h-3.5 w-3.5" />
+                        {payment.proof_name}
+                    </a>
+                );
+            },
+        },
+        {
+            id: 'actions',
+            header: () => <span className="block text-center">Aksi</span>,
+            meta: {
+                className: 'w-[100px] text-center',
+                headerClassName: 'w-[100px] text-center',
+            },
+            cell: ({ row }) => (
+                <RowActions
+                    actions={[
+                        {
+                            label: 'Edit',
+                            icon: <Pencil className="h-4 w-4" />,
+                            onClick: () => setEditing(row.original),
+                        },
+                        {
+                            label: 'Hapus',
+                            icon: (
+                                <Trash2 className="h-4 w-4 text-destructive" />
+                            ),
+                            onClick: () => setDeleting(row.original),
+                        },
+                    ]}
+                />
+            ),
+        },
+    ];
+
+    return (
+        <>
+            <Head title="Pembayaran" />
+
+            <div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
+                <PageHeader
+                    title="Pembayaran"
+                    actions={
+                        <Button variant="outline" asChild>
+                            <a href={tuitionInvoiceIndex.url()}>Kembali</a>
+                        </Button>
+                    }
+                />
+
+                <Card>
+                    <CardHeader>
+                        <CardTitle>
+                            {invoice.student?.user?.profile?.full_name ?? 'N/A'}
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent className="grid gap-1 text-sm text-muted-foreground">
+                        <p>
+                            NIM: {invoice.student?.student_number} &middot;{' '}
+                            {invoice.student?.department?.name ?? '-'}
+                        </p>
+                        <p>Periode: {invoice.academic_term?.name}</p>
+                        <p>
+                            Jumlah Tagihan: {formatRupiah(invoice.amount_due)}
+                        </p>
+                        <p>
+                            Total Terbayar: {formatRupiah(paidTotal)}{' '}
+                            {paidTotal >= Number(invoice.amount_due) ? (
+                                <Badge variant="default" className="ml-1">
+                                    Lunas
+                                </Badge>
+                            ) : paidTotal > 0 ? (
+                                <Badge variant="secondary" className="ml-1">
+                                    Sebagian
+                                </Badge>
+                            ) : (
+                                <Badge variant="outline" className="ml-1">
+                                    Belum Bayar
+                                </Badge>
+                            )}
+                        </p>
+                    </CardContent>
+                </Card>
+
+                <div className="flex items-center justify-between">
+                    <h2 className="text-lg font-semibold">
+                        Riwayat Pembayaran
+                    </h2>
+                    <Button onClick={() => setCreateOpen(true)}>
+                        <Plus className="h-4 w-4" />
+                        Tambah Pembayaran
+                    </Button>
+                </div>
+
+                <DataTable
+                    columns={columns}
+                    data={payments}
+                    emptyText="Belum ada pembayaran untuk tagihan ini."
+                />
+
+                <CreateForm
+                    open={createOpen}
+                    onOpenChange={setCreateOpen}
+                    invoiceId={invoice.id}
+                />
+
+                <EditForm
+                    key={editing?.id}
+                    open={editing !== null}
+                    onOpenChange={(open) => {
+                        if (!open) {
+                            setEditing(null);
+                        }
+                    }}
+                    invoiceId={invoice.id}
+                    editing={editing}
+                />
+
+                <DeleteConfirmDialog
+                    target={deleting}
+                    onOpenChange={(open) => {
+                        if (!open) {
+                            setDeleting(null);
+                        }
+                    }}
+                    title="Hapus Pembayaran"
+                    description={() =>
+                        'Apakah Anda yakin ingin menghapus data pembayaran ini? Tindakan ini tidak dapat dibatalkan.'
+                    }
+                    onConfirm={handleDelete}
+                />
+            </div>
+        </>
+    );
+}
+
+function CreateForm({
+    open,
+    onOpenChange,
+    invoiceId,
+}: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    invoiceId: number;
+}) {
+    return (
+        <FormDialog
+            open={open}
+            onOpenChange={onOpenChange}
+            title="Tambah Pembayaran"
+            action={store(invoiceId)}
+            resetOnSuccess
+            onSuccess={() => onOpenChange(false)}
+        >
+            {({ errors }) => (
+                <div className="grid gap-4">
+                    <PaymentFields
+                        errors={errors}
+                        resetKey={open ? 'open' : 'closed'}
+                    />
+                </div>
+            )}
+        </FormDialog>
+    );
+}
+
+function EditForm({
+    open,
+    onOpenChange,
+    invoiceId,
+    editing,
+}: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    invoiceId: number;
+    editing: TuitionPayment | null;
+}) {
+    return (
+        <FormDialog
+            open={open}
+            onOpenChange={onOpenChange}
+            title="Edit Pembayaran"
+            action={editing ? update([invoiceId, editing.id]) : ''}
+            resetOnSuccess
+            onSuccess={() => onOpenChange(false)}
+        >
+            {({ errors }) =>
+                editing && (
+                    <div className="grid gap-4">
+                        <PaymentFields errors={errors} editing={editing} />
+                    </div>
+                )
+            }
+        </FormDialog>
+    );
+}
+
+function PaymentFields({
+    errors,
+    editing,
+    resetKey,
+}: {
+    errors: Record<string, string>;
+    editing?: TuitionPayment;
+    resetKey?: string;
+}) {
+    return (
+        <>
+            <div className="grid gap-2">
+                <Label htmlFor="amount_paid">
+                    Jumlah Dibayar <span className="text-destructive">*</span>
+                </Label>
+                <RupiahInput
+                    id="amount_paid"
+                    name="amount_paid"
+                    placeholder="1.500.000"
+                    defaultValue={editing?.amount_paid}
+                    ariaInvalid={!!errors.amount_paid}
+                />
+                <InputError message={errors.amount_paid} />
+            </div>
+            <DateTimeField
+                label="Tanggal & Waktu Bayar"
+                name="paid_at"
+                required
+                defaultValue={editing?.paid_at}
+                placeholder="Pilih tanggal bayar"
+                error={errors.paid_at}
+            />
+            <div className="grid gap-2">
+                <Label htmlFor="payment_method">Metode Pembayaran</Label>
+                <Input
+                    id="payment_method"
+                    name="payment_method"
+                    placeholder="Contoh: transfer"
+                    defaultValue={editing?.payment_method ?? ''}
+                />
+                <InputError message={errors.payment_method} />
+            </div>
+            <div className="grid gap-2">
+                <Label>
+                    Status <span className="text-destructive">*</span>
+                </Label>
+                <input type="hidden" name="status" />
+                <Select
+                    name="status"
+                    defaultValue={editing?.status ?? 'unpaid'}
+                >
+                    <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Pilih status" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {PaymentStatuses.map((status) => (
+                            <SelectItem key={status} value={status}>
+                                {PaymentStatusLabels[status]}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                <InputError message={errors.status} />
+            </div>
+            <div className="grid gap-2">
+                <Label htmlFor="notes">Catatan</Label>
+                <Textarea
+                    id="notes"
+                    name="notes"
+                    placeholder="Catatan tambahan"
+                    defaultValue={editing?.notes ?? ''}
+                />
+                <InputError message={errors.notes} />
+            </div>
+            <FileUploadField
+                key={resetKey}
+                name="proof"
+                label="Bukti Pembayaran"
+                existingFileName={editing?.proof_name}
+                existingFileUrl={editing?.proof_url}
+                error={errors.proof}
+            />
+        </>
+    );
+}
diff --git a/resources/js/types/tuition-invoice.ts b/resources/js/types/tuition-invoice.ts
new file mode 100644
index 0000000..eeff910
--- /dev/null
+++ b/resources/js/types/tuition-invoice.ts
@@ -0,0 +1,20 @@
+export type TuitionInvoiceStudent = {
+    id: number;
+    student_number: string;
+    department: { id: number; name: string } | null;
+    user: { profile: { full_name: string } | null } | null;
+};
+
+export type TuitionInvoice = {
+    id: number;
+    student_id: number;
+    student: TuitionInvoiceStudent | null;
+    academic_term_id: number;
+    academic_term: { id: number; name: string; semester: string } | null;
+    amount_due: string;
+    due_date: string | null;
+    paid_total: string | null;
+    payments_count: number;
+    created_at: string;
+    updated_at: string;
+};
diff --git a/resources/js/types/tuition-payment.ts b/resources/js/types/tuition-payment.ts
new file mode 100644
index 0000000..4ecd0a7
--- /dev/null
+++ b/resources/js/types/tuition-payment.ts
@@ -0,0 +1,25 @@
+export const PaymentStatuses = ['unpaid', 'partial', 'paid'] as const;
+
+export type PaymentStatus = (typeof PaymentStatuses)[number];
+
+export const PaymentStatusLabels: Record<PaymentStatus, string> = {
+    unpaid: 'Belum Bayar',
+    partial: 'Sebagian',
+    paid: 'Lunas',
+};
+
+export type TuitionPayment = {
+    id: number;
+    invoice_id: number;
+    amount_paid: string;
+    paid_at: string;
+    payment_method: string | null;
+    status: PaymentStatus | null;
+    recorded_by: number | null;
+    recorder: { id: number; full_name: string } | null;
+    notes: string | null;
+    proof_url: string | null;
+    proof_name: string | null;
+    created_at: string;
+    updated_at: string;
+};
diff --git a/routes/admin.php b/routes/admin.php
index 89759a6..d981550 100644
--- a/routes/admin.php
+++ b/routes/admin.php
@@ -8,6 +8,8 @@
 use App\Http\Controllers\Admin\Manage\MaterialController;
 use App\Http\Controllers\Admin\Manage\ScheduleController;
 use App\Http\Controllers\Admin\Manage\SubmissionController;
+use App\Http\Controllers\Admin\Manage\TuitionInvoiceController;
+use App\Http\Controllers\Admin\Manage\TuitionPaymentController;
 use App\Http\Controllers\Admin\Master\AcademicTermController;
 use App\Http\Controllers\Admin\Master\DepartmentController;
 use App\Http\Controllers\Admin\Users\AdministratorController;
@@ -56,6 +58,15 @@
                 ->whereNumber('meeting_number')
                 ->name('destroy');
         });
+
+        Route::resource('tuition-invoices', TuitionInvoiceController::class)->except(['create', 'edit', 'show']);
+
+        Route::prefix('tuition-invoices/{tuition_invoice}/payments')->name('tuition-invoices.payments.')->group(function () {
+            Route::get('/', [TuitionPaymentController::class, 'index'])->name('index');
+            Route::post('/', [TuitionPaymentController::class, 'store'])->name('store');
+            Route::put('{payment}', [TuitionPaymentController::class, 'update'])->name('update');
+            Route::delete('{payment}', [TuitionPaymentController::class, 'destroy'])->name('destroy');
+        });
     });
 
     Route::prefix('admin/users')->name('admin.users.')->group(function () {
-- 
2.45.2