From 0ece259138a20e044c541b46feddf3b7939fef64 Mon Sep 17 00:00:00 2001
From: Bro <bro@local>
Date: Fri, 24 Jul 2026 19:25:43 +0700
Subject: [PATCH] feat: custom halaman error 403 & 404 premium

- 403: icon shield, merah soft, pesan dinamis
- 404: icon map, amber soft
- Tombol Kembali + Dashboard
- Dekorasi dots
- Menggunakan layout app (navbar + sidebar tetap)
---
 resources/views/errors/403.blade.php | 50 ++++++++++++++++++++++++++++
 resources/views/errors/404.blade.php | 36 ++++++++++++++++++++
 2 files changed, 86 insertions(+)
 create mode 100644 resources/views/errors/403.blade.php
 create mode 100644 resources/views/errors/404.blade.php

diff --git a/resources/views/errors/403.blade.php b/resources/views/errors/403.blade.php
new file mode 100644
index 0000000..1fb0d6a
--- /dev/null
+++ b/resources/views/errors/403.blade.php
@@ -0,0 +1,50 @@
+@extends('layouts.app')
+
+@section('title', 'Akses Ditolak')
+
+@section('content')
+<div class="min-h-[70vh] flex items-center justify-center">
+    <div class="text-center max-w-md mx-auto px-4">
+        {{-- Icon --}}
+        <div class="mx-auto w-20 h-20 rounded-2xl bg-gradient-to-br from-red-50 to-red-100 border border-red-200 flex items-center justify-center shadow-sm mb-6">
+            <i class="fa-solid fa-shield-halved text-3xl text-red-400"></i>
+        </div>
+
+        {{-- Code --}}
+        <div class="text-7xl font-black text-red-200 tracking-tight mb-2">403</div>
+
+        {{-- Title --}}
+        <h1 class="text-xl font-bold text-gray-900 mb-2">Akses Ditolak</h1>
+
+        {{-- Message --}}
+        <p class="text-sm text-gray-500 leading-relaxed mb-8">
+            @if($exception->getMessage() && $exception->getMessage() !== '')
+                {{ $exception->getMessage() }}
+            @else
+                Anda tidak memiliki izin untuk mengakses halaman ini.
+            @endif
+        </p>
+
+        {{-- Actions --}}
+        <div class="flex items-center justify-center gap-3">
+            <a href="{{ url()->previous() !== url()->current() ? url()->previous() : route('dashboard') }}"
+                class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-gray-700 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition shadow-sm">
+                <i class="fa-solid fa-arrow-left text-xs"></i>
+                Kembali
+            </a>
+            <a href="{{ route('dashboard') }}"
+                class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-white bg-blue-600 rounded-xl hover:bg-blue-700 transition shadow-sm">
+                <i class="fa-solid fa-house text-xs"></i>
+                Dashboard
+            </a>
+        </div>
+
+        {{-- Decorative dots --}}
+        <div class="mt-12 flex items-center justify-center gap-1.5">
+            <span class="w-1.5 h-1.5 rounded-full bg-red-200"></span>
+            <span class="w-1.5 h-1.5 rounded-full bg-red-300"></span>
+            <span class="w-1.5 h-1.5 rounded-full bg-red-400"></span>
+        </div>
+    </div>
+</div>
+@endsection
diff --git a/resources/views/errors/404.blade.php b/resources/views/errors/404.blade.php
new file mode 100644
index 0000000..6535c66
--- /dev/null
+++ b/resources/views/errors/404.blade.php
@@ -0,0 +1,36 @@
+@extends('layouts.app')
+
+@section('title', 'Halaman Tidak Ditemukan')
+
+@section('content')
+<div class="min-h-[70vh] flex items-center justify-center">
+    <div class="text-center max-w-md mx-auto px-4">
+        <div class="mx-auto w-20 h-20 rounded-2xl bg-gradient-to-br from-amber-50 to-amber-100 border border-amber-200 flex items-center justify-center shadow-sm mb-6">
+            <i class="fa-solid fa-map text-3xl text-amber-400"></i>
+        </div>
+
+        <div class="text-7xl font-black text-amber-200 tracking-tight mb-2">404</div>
+        <h1 class="text-xl font-bold text-gray-900 mb-2">Halaman Tidak Ditemukan</h1>
+        <p class="text-sm text-gray-500 leading-relaxed mb-8">Halaman yang Anda cari mungkin telah dipindah atau tidak tersedia.</p>
+
+        <div class="flex items-center justify-center gap-3">
+            <a href="{{ url()->previous() !== url()->current() ? url()->previous() : route('dashboard') }}"
+                class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-gray-700 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition shadow-sm">
+                <i class="fa-solid fa-arrow-left text-xs"></i>
+                Kembali
+            </a>
+            <a href="{{ route('dashboard') }}"
+                class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-white bg-blue-600 rounded-xl hover:bg-blue-700 transition shadow-sm">
+                <i class="fa-solid fa-house text-xs"></i>
+                Dashboard
+            </a>
+        </div>
+
+        <div class="mt-12 flex items-center justify-center gap-1.5">
+            <span class="w-1.5 h-1.5 rounded-full bg-amber-200"></span>
+            <span class="w-1.5 h-1.5 rounded-full bg-amber-300"></span>
+            <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
+        </div>
+    </div>
+</div>
+@endsection