super admin-ALL DONE
This commit is contained in:
E31232303evimr
parent
36514e9123
commit
35d58fc4a3
|
|
@ -0,0 +1,188 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" x-data="{ sidebarOpen: true }" x-cloak>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||||
|
|
||||||
|
<title>{{ config('app.name', 'Laravel') }} - Super Admin</title>
|
||||||
|
|
||||||
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||||
|
<link href="https://fonts.bunny.net/css?family=plus-jakarta-sans:400,500,600,700,800&display=swap" rel="stylesheet" />
|
||||||
|
|
||||||
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||||
|
|
||||||
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
[x-cloak] { display: none !important; }
|
||||||
|
* { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||||||
|
|
||||||
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||||
|
::-webkit-scrollbar-track { background: #0f1f0f; }
|
||||||
|
::-webkit-scrollbar-thumb { background: #16a34a; border-radius: 4px; }
|
||||||
|
::-webkit-scrollbar-thumb:hover { background: #15803d; }
|
||||||
|
|
||||||
|
.sidebar-transition {
|
||||||
|
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-5px); }
|
||||||
|
}
|
||||||
|
.logo-float { animation: float 3s ease-in-out infinite; }
|
||||||
|
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from { opacity: 0; transform: translateY(20px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
.page-content { animation: fadeInUp 0.5s ease-out; }
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.5; }
|
||||||
|
}
|
||||||
|
.badge-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
|
||||||
|
|
||||||
|
.sidebar-bg {
|
||||||
|
background: linear-gradient(160deg, #0f2010 0%, #0a1a0b 50%, #0d1e0e 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.crown-glow {
|
||||||
|
filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
@stack('styles')
|
||||||
|
</head>
|
||||||
|
<body class="font-sans antialiased bg-gray-50">
|
||||||
|
<div class="min-h-screen flex">
|
||||||
|
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside
|
||||||
|
:class="sidebarOpen ? 'w-64' : 'w-20'"
|
||||||
|
class="sidebar-transition sidebar-bg text-white fixed h-full z-30 flex flex-col shadow-2xl"
|
||||||
|
>
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="p-6 border-b border-green-900/40">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div x-show="sidebarOpen" class="flex items-center space-x-3">
|
||||||
|
<div class="logo-float">
|
||||||
|
<div class="w-10 h-10 bg-gradient-to-br from-yellow-400 to-amber-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||||
|
<svg class="w-6 h-6 text-white crown-glow" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M2 19l2-8 4 4 4-8 4 8 4-4 2 8H2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 class="text-lg font-bold bg-gradient-to-r from-yellow-400 to-amber-200 bg-clip-text text-transparent">Coffee Expert</h1>
|
||||||
|
<p class="text-xs text-purple-300/70">Super Admin Panel</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Collapsed logo (when sidebar is closed) -->
|
||||||
|
<div x-show="!sidebarOpen" class="mx-auto logo-float">
|
||||||
|
<div class="w-10 h-10 bg-gradient-to-br from-yellow-400 to-amber-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||||
|
<svg class="w-6 h-6 text-white crown-glow" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M2 19l2-8 4 4 4-8 4 8 4-4 2 8H2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button x-show="sidebarOpen" @click="sidebarOpen = !sidebarOpen" class="p-2 rounded-lg hover:bg-green-800/30 transition-colors">
|
||||||
|
<svg class="w-5 h-5 text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button x-show="!sidebarOpen" @click="sidebarOpen = !sidebarOpen" class="absolute bottom-0 left-0 right-0 mx-auto w-full flex justify-center py-2 hover:bg-green-800/20 transition-colors">
|
||||||
|
<svg class="w-5 h-5 text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="flex-1 px-4 py-6 space-y-2 overflow-y-auto">
|
||||||
|
|
||||||
|
<!-- Dashboard -->
|
||||||
|
<a href="{{ route('super-admin.dashboard') }}"
|
||||||
|
class="flex items-center px-4 py-3 rounded-xl hover:bg-green-800/30 {{ request()->routeIs('super-admin.dashboard') ? 'bg-green-800/40 ring-1 ring-green-500/30' : '' }} group">
|
||||||
|
<div class="flex items-center flex-1">
|
||||||
|
<div class="w-10 h-10 flex items-center justify-center rounded-lg bg-blue-500/20 group-hover:bg-blue-500/30 transition-colors">
|
||||||
|
<svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span x-show="sidebarOpen" class="ml-3 font-semibold text-gray-200">Dashboard</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Logout -->
|
||||||
|
<div class="p-4 border-t border-green-900/40">
|
||||||
|
<form method="POST" action="{{ route('logout') }}">
|
||||||
|
@csrf
|
||||||
|
<button type="submit" class="w-full flex items-center px-4 py-3 rounded-xl hover:bg-red-600/20 group">
|
||||||
|
<div class="flex items-center flex-1">
|
||||||
|
<div class="w-10 h-10 flex items-center justify-center rounded-lg bg-red-500/20 group-hover:bg-red-500/30 transition-colors">
|
||||||
|
<svg class="w-5 h-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span x-show="sidebarOpen" class="ml-3 font-semibold text-red-400">Logout</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div :class="sidebarOpen ? 'ml-64' : 'ml-20'" class="flex-1 sidebar-transition">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="bg-white border-b border-gray-200 fixed top-0 right-0 z-20 shadow-sm" :class="sidebarOpen ? 'left-64' : 'left-20'" style="transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);">
|
||||||
|
<div class="px-8 py-4">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-2xl font-bold text-gray-800">@yield('page-title', 'Dashboard')</h2>
|
||||||
|
<p class="text-sm text-gray-500 mt-1">@yield('page-subtitle', 'Sistem Pakar Diagnosa Penyakit Tanaman Kopi')</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<!-- Super Admin Badge -->
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-bold bg-gradient-to-r from-yellow-400 to-amber-500 text-white shadow badge-pulse">
|
||||||
|
★ SUPER ADMIN
|
||||||
|
</span>
|
||||||
|
<!-- Profile -->
|
||||||
|
<a href="{{ route('profile.edit') }}" class="flex items-center space-x-3 px-3 py-2 rounded-xl bg-gradient-to-r from-green-50 to-green-100 hover:from-green-100 hover:to-green-200 transition-all">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-500 to-green-700 flex items-center justify-center text-white font-bold shadow-lg">
|
||||||
|
{{ substr(Auth::user()->nama, 0, 1) }}
|
||||||
|
</div>
|
||||||
|
<div class="text-left">
|
||||||
|
<p class="text-sm font-bold text-gray-800">{{ Auth::user()->nama }}</p>
|
||||||
|
<p class="text-xs text-green-600 font-semibold uppercase">Super Admin</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Page Content -->
|
||||||
|
<main class="pt-28">
|
||||||
|
<div class="p-8 page-content">
|
||||||
|
@yield('content')
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="px-8 py-6 bg-white border-t border-gray-200">
|
||||||
|
<div class="text-center text-sm text-gray-600">
|
||||||
|
© {{ date('Y') }} Coffee Expert System. All rights reserved.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@stack('scripts')
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
@extends(auth()->user()->role === 'admin' || auth()->user()->role === 'super_admin' ? 'layouts.admin-app' : 'layouts.user-app')
|
@extends(auth()->user()->role === 'admin' || auth()->user()->role === 'super_admin' ? 'layouts.superadmin-app' : 'layouts.user-app')
|
||||||
|
|
||||||
@section('page-title', '👤 Profile Settings')
|
@section('page-title', 'Profile Settings')
|
||||||
@section('page-subtitle', 'Kelola informasi profil Anda')
|
@section('page-subtitle', 'Kelola informasi profil Anda')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
|
||||||
|
|
@ -1,318 +1,242 @@
|
||||||
<x-app-layout>
|
@extends('layouts.superadmin-app')
|
||||||
<x-slot name="header">
|
|
||||||
<div class="flex items-center justify-between">
|
@section('page-title', 'Dashboard')
|
||||||
<h2 class="font-semibold text-2xl text-gray-800 leading-tight">
|
@section('page-subtitle', 'Selamat datang kembali, ' . Auth::user()->nama)
|
||||||
☕ {{ __('Super Admin Dashboard') }}
|
|
||||||
</h2>
|
@section('content')
|
||||||
<span class="px-4 py-2 bg-gradient-to-r from-red-500 to-red-600 text-white text-sm font-bold rounded-full shadow-lg">
|
<div class="max-w-7xl mx-auto space-y-6">
|
||||||
SUPER ADMIN
|
|
||||||
</span>
|
<!-- Welcome Card with Gradient -->
|
||||||
|
<div class="bg-gradient-to-r from-green-600 via-green-700 to-green-800 overflow-hidden shadow-xl sm:rounded-2xl transform hover:scale-[1.01] transition duration-300">
|
||||||
|
<div class="p-8 text-white relative overflow-hidden">
|
||||||
|
<!-- Decorative circles -->
|
||||||
|
<div class="absolute -right-10 -top-10 w-40 h-40 bg-white opacity-10 rounded-full"></div>
|
||||||
|
<div class="absolute -right-5 -bottom-5 w-32 h-32 bg-white opacity-10 rounded-full"></div>
|
||||||
|
|
||||||
|
<div class="relative z-10">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<div class="bg-white bg-opacity-20 rounded-full p-3 mr-4">
|
||||||
|
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-3xl font-bold">Selamat Datang Kembali!</h3>
|
||||||
|
<p class="text-green-100 text-lg mt-1">{{ Auth::user()->nama }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-green-50 text-base">Sistem Pakar Diagnosa Tanaman Kopi</p>
|
||||||
|
<div class="mt-4 flex items-center space-x-4">
|
||||||
|
<div class="flex items-center bg-white bg-opacity-20 rounded-full px-4 py-2">
|
||||||
|
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm" id="realtime-clock"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</x-slot>
|
|
||||||
|
|
||||||
<div class="py-8">
|
<!-- Statistics Cards -->
|
||||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<!-- Total Users -->
|
||||||
<!-- Welcome Card with Gradient -->
|
<div class="bg-white overflow-hidden shadow-lg sm:rounded-2xl transform hover:scale-105 transition duration-300 hover:shadow-2xl">
|
||||||
<div class="bg-gradient-to-r from-green-600 via-green-700 to-green-800 overflow-hidden shadow-xl sm:rounded-2xl transform hover:scale-[1.01] transition duration-300">
|
<div class="p-6">
|
||||||
<div class="p-8 text-white relative overflow-hidden">
|
<div class="flex items-center justify-between">
|
||||||
<!-- Decorative circles -->
|
<div class="flex-1">
|
||||||
<div class="absolute -right-10 -top-10 w-40 h-40 bg-white opacity-10 rounded-full"></div>
|
<p class="text-sm font-semibold text-gray-500 uppercase tracking-wide">Total Users</p>
|
||||||
<div class="absolute -right-5 -bottom-5 w-32 h-32 bg-white opacity-10 rounded-full"></div>
|
<h3 class="text-4xl font-bold text-gray-800 mt-2">{{ \App\Models\User::count() }}</h3>
|
||||||
|
<p class="text-xs text-gray-500 mt-2">Semua pengguna terdaftar</p>
|
||||||
<div class="relative z-10">
|
|
||||||
<div class="flex items-center mb-4">
|
|
||||||
<div class="bg-white bg-opacity-20 rounded-full p-3 mr-4">
|
|
||||||
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="text-3xl font-bold">Selamat Datang Kembali! 👋</h3>
|
|
||||||
<p class="text-green-100 text-lg mt-1">{{ Auth::user()->nama }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="text-green-50 text-base">Sistem Pakar Diagnosa Tanaman Kopi</p>
|
<div class="bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl p-4 shadow-lg">
|
||||||
<div class="mt-4 flex items-center space-x-4">
|
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<div class="flex items-center bg-white bg-opacity-20 rounded-full px-4 py-2">
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
|
||||||
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
</svg>
|
||||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
|
|
||||||
</svg>
|
|
||||||
<span class="text-sm">{{ now()->translatedFormat('l, d F Y') }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mt-4 flex items-center text-green-600">
|
||||||
|
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs font-semibold">Aktif</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Statistics Cards with Hover Effects -->
|
<!-- Super Admins -->
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
<div class="bg-white overflow-hidden shadow-lg sm:rounded-2xl transform hover:scale-105 transition duration-300 hover:shadow-2xl">
|
||||||
<!-- Total Users Card -->
|
<div class="p-6">
|
||||||
<div class="bg-white overflow-hidden shadow-lg sm:rounded-2xl transform hover:scale-105 transition duration-300 hover:shadow-2xl">
|
<div class="flex items-center justify-between">
|
||||||
<div class="p-6">
|
<div class="flex-1">
|
||||||
<div class="flex items-center justify-between">
|
<p class="text-sm font-semibold text-gray-500 uppercase tracking-wide">Super Admins</p>
|
||||||
<div class="flex-1">
|
<h3 class="text-4xl font-bold text-gray-800 mt-2">{{ \App\Models\User::where('role', 'super_admin')->count() }}</h3>
|
||||||
<p class="text-sm font-semibold text-gray-500 uppercase tracking-wide">Total Users</p>
|
<p class="text-xs text-gray-500 mt-2">Administrator tertinggi</p>
|
||||||
<h3 class="text-4xl font-bold text-gray-800 mt-2">{{ \App\Models\User::count() }}</h3>
|
|
||||||
<p class="text-xs text-gray-500 mt-2">Semua pengguna terdaftar</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl p-4 shadow-lg">
|
|
||||||
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4">
|
<div class="bg-gradient-to-br from-red-400 to-red-600 rounded-2xl p-4 shadow-lg">
|
||||||
<div class="flex items-center text-green-600">
|
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
||||||
<path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd"/>
|
</svg>
|
||||||
</svg>
|
|
||||||
<span class="text-xs font-semibold">Aktif</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="mt-4 flex items-center text-red-600">
|
||||||
|
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
||||||
<!-- Super Admins Card -->
|
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
|
||||||
<div class="bg-white overflow-hidden shadow-lg sm:rounded-2xl transform hover:scale-105 transition duration-300 hover:shadow-2xl">
|
</svg>
|
||||||
<div class="p-6">
|
<span class="text-xs font-semibold">Full Access</span>
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="flex-1">
|
|
||||||
<p class="text-sm font-semibold text-gray-500 uppercase tracking-wide">Super Admins</p>
|
|
||||||
<h3 class="text-4xl font-bold text-gray-800 mt-2">{{ \App\Models\User::where('role', 'super_admin')->count() }}</h3>
|
|
||||||
<p class="text-xs text-gray-500 mt-2">Administrator tertinggi</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-gradient-to-br from-red-400 to-red-600 rounded-2xl p-4 shadow-lg">
|
|
||||||
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-4">
|
|
||||||
<div class="flex items-center text-red-600">
|
|
||||||
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
|
|
||||||
</svg>
|
|
||||||
<span class="text-xs font-semibold">Full Access</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Regular Admins Card -->
|
|
||||||
<div class="bg-white overflow-hidden shadow-lg sm:rounded-2xl transform hover:scale-105 transition duration-300 hover:shadow-2xl">
|
|
||||||
<div class="p-6">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="flex-1">
|
|
||||||
<p class="text-sm font-semibold text-gray-500 uppercase tracking-wide">Admins</p>
|
|
||||||
<h3 class="text-4xl font-bold text-gray-800 mt-2">{{ \App\Models\User::where('role', 'admin')->count() }}</h3>
|
|
||||||
<p class="text-xs text-gray-500 mt-2">Administrator biasa</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-gradient-to-br from-green-400 to-green-600 rounded-2xl p-4 shadow-lg">
|
|
||||||
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-4">
|
|
||||||
<div class="flex items-center text-green-600">
|
|
||||||
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
|
||||||
</svg>
|
|
||||||
<span class="text-xs font-semibold">Verified</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Regular Users Card -->
|
|
||||||
<div class="bg-white overflow-hidden shadow-lg sm:rounded-2xl transform hover:scale-105 transition duration-300 hover:shadow-2xl">
|
|
||||||
<div class="p-6">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="flex-1">
|
|
||||||
<p class="text-sm font-semibold text-gray-500 uppercase tracking-wide">Regular Users</p>
|
|
||||||
<h3 class="text-4xl font-bold text-gray-800 mt-2">{{ \App\Models\User::where('role', 'user')->count() }}</h3>
|
|
||||||
<p class="text-xs text-gray-500 mt-2">Pengguna biasa</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-gradient-to-br from-purple-400 to-purple-600 rounded-2xl p-4 shadow-lg">
|
|
||||||
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-4">
|
|
||||||
<div class="flex items-center text-purple-600">
|
|
||||||
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"/>
|
|
||||||
</svg>
|
|
||||||
<span class="text-xs font-semibold">Community</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Quick Actions with Modern Design -->
|
<!-- Admins -->
|
||||||
<div class="bg-white overflow-hidden shadow-xl sm:rounded-2xl">
|
<div class="bg-white overflow-hidden shadow-lg sm:rounded-2xl transform hover:scale-105 transition duration-300 hover:shadow-2xl">
|
||||||
<div class="p-8">
|
<div class="p-6">
|
||||||
<div class="flex items-center mb-6">
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-sm font-semibold text-gray-500 uppercase tracking-wide">Admins</p>
|
||||||
|
<h3 class="text-4xl font-bold text-gray-800 mt-2">{{ \App\Models\User::where('role', 'admin')->count() }}</h3>
|
||||||
|
<p class="text-xs text-gray-500 mt-2">Administrator biasa</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gradient-to-br from-green-400 to-green-600 rounded-2xl p-4 shadow-lg">
|
||||||
|
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 flex items-center text-green-600">
|
||||||
|
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs font-semibold">Verified</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Regular Users -->
|
||||||
|
<div class="bg-white overflow-hidden shadow-lg sm:rounded-2xl transform hover:scale-105 transition duration-300 hover:shadow-2xl">
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-sm font-semibold text-gray-500 uppercase tracking-wide">Regular Users</p>
|
||||||
|
<h3 class="text-4xl font-bold text-gray-800 mt-2">{{ \App\Models\User::where('role', 'user')->count() }}</h3>
|
||||||
|
<p class="text-xs text-gray-500 mt-2">Pengguna biasa</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gradient-to-br from-purple-400 to-purple-600 rounded-2xl p-4 shadow-lg">
|
||||||
|
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 flex items-center text-purple-600">
|
||||||
|
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs font-semibold">Community</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Recent Users Table -->
|
||||||
|
<div class="bg-white overflow-hidden shadow-xl sm:rounded-2xl">
|
||||||
|
<div class="p-8">
|
||||||
|
<div class="flex justify-between items-center mb-6">
|
||||||
|
<div class="flex items-center">
|
||||||
<div class="bg-gradient-to-r from-green-500 to-green-600 rounded-xl p-3 mr-4">
|
<div class="bg-gradient-to-r from-green-500 to-green-600 rounded-xl p-3 mr-4">
|
||||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-2xl font-bold text-gray-800">Quick Actions</h3>
|
<h3 class="text-2xl font-bold text-gray-800">Recent Users</h3>
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
||||||
<!-- Manage Users -->
|
|
||||||
<a href="{{ route('super-admin.users.index') }}" class="group relative overflow-hidden bg-gradient-to-br from-blue-50 to-blue-100 hover:from-blue-100 hover:to-blue-200 rounded-2xl p-6 transition-all duration-300 transform hover:scale-105 hover:shadow-xl">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div class="bg-blue-500 text-white rounded-xl p-4 mr-4 group-hover:bg-blue-600 transition-colors">
|
|
||||||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<p class="font-bold text-gray-800 text-lg">Manage Users</p>
|
|
||||||
<p class="text-sm text-gray-600 mt-1">Kelola semua pengguna</p>
|
|
||||||
</div>
|
|
||||||
<svg class="w-5 h-5 text-blue-500 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Add New User -->
|
|
||||||
<a href="{{ route('super-admin.users.create') }}" class="group relative overflow-hidden bg-gradient-to-br from-green-50 to-green-100 hover:from-green-100 hover:to-green-200 rounded-2xl p-6 transition-all duration-300 transform hover:scale-105 hover:shadow-xl">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div class="bg-green-500 text-white rounded-xl p-4 mr-4 group-hover:bg-green-600 transition-colors">
|
|
||||||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<p class="font-bold text-gray-800 text-lg">Add New User</p>
|
|
||||||
<p class="text-sm text-gray-600 mt-1">Tambah pengguna baru</p>
|
|
||||||
</div>
|
|
||||||
<svg class="w-5 h-5 text-green-500 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Settings -->
|
|
||||||
<a href="{{ route('profile.edit') }}" class="group relative overflow-hidden bg-gradient-to-br from-purple-50 to-purple-100 hover:from-purple-100 hover:to-purple-200 rounded-2xl p-6 transition-all duration-300 transform hover:scale-105 hover:shadow-xl">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div class="bg-purple-500 text-white rounded-xl p-4 mr-4 group-hover:bg-purple-600 transition-colors">
|
|
||||||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<p class="font-bold text-gray-800 text-lg">Settings</p>
|
|
||||||
<p class="text-sm text-gray-600 mt-1">Edit profil Anda</p>
|
|
||||||
</div>
|
|
||||||
<svg class="w-5 h-5 text-purple-500 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
<a href="{{ route('super-admin.users.index') }}" class="flex items-center px-4 py-2 bg-gradient-to-r from-green-500 to-green-600 text-white text-sm font-semibold rounded-xl hover:from-green-600 hover:to-green-700 transition-all shadow-lg hover:shadow-xl">
|
||||||
|
View All
|
||||||
|
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="overflow-x-auto rounded-xl border border-green-100">
|
||||||
|
<table class="min-w-full divide-y divide-green-100">
|
||||||
|
<thead class="bg-green-50">
|
||||||
|
<tr>
|
||||||
|
<th class="px-6 py-4 text-left text-xs font-bold text-green-600 uppercase tracking-wider">Username</th>
|
||||||
|
<th class="px-6 py-4 text-left text-xs font-bold text-green-600 uppercase tracking-wider">Nama</th>
|
||||||
|
<th class="px-6 py-4 text-left text-xs font-bold text-green-600 uppercase tracking-wider">Email</th>
|
||||||
|
<th class="px-6 py-4 text-left text-xs font-bold text-green-600 uppercase tracking-wider">Role</th>
|
||||||
|
<th class="px-6 py-4 text-left text-xs font-bold text-green-600 uppercase tracking-wider">Registered</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="bg-white divide-y divide-green-50">
|
||||||
|
@forelse(\App\Models\User::latest()->take(5)->get() as $user)
|
||||||
|
<tr class="hover:bg-green-50 transition-colors">
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0 h-10 w-10 bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center text-white font-bold">
|
||||||
|
{{ strtoupper(substr($user->username, 0, 1)) }}
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<div class="text-sm font-semibold text-gray-900">{{ $user->username }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="text-sm text-gray-900 font-medium">{{ $user->nama }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="text-sm text-gray-600">{{ $user->email }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
@if($user->role === 'super_admin')
|
||||||
|
<span class="px-3 py-1 inline-flex text-xs leading-5 font-bold rounded-full bg-gradient-to-r from-yellow-500 to-yellow-600 text-white shadow-md">
|
||||||
|
⭐ Super Admin
|
||||||
|
</span>
|
||||||
|
@elseif($user->role === 'admin')
|
||||||
|
<span class="px-3 py-1 inline-flex text-xs leading-5 font-bold rounded-full bg-gradient-to-r from-green-500 to-green-600 text-white shadow-md">
|
||||||
|
👤 Admin
|
||||||
|
</span>
|
||||||
|
@else
|
||||||
|
<span class="px-3 py-1 inline-flex text-xs leading-5 font-bold rounded-full bg-gradient-to-r from-blue-400 to-blue-500 text-white shadow-md">
|
||||||
|
👥 User
|
||||||
|
</span>
|
||||||
|
@endif
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<svg class="w-4 h-4 mr-2 text-green-400" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
{{ $user->created_at->diffForHumans() }}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
@empty
|
||||||
|
<tr>
|
||||||
|
<td colspan="5" class="px-6 py-8 text-center">
|
||||||
|
<div class="text-green-300">
|
||||||
|
<svg class="w-12 h-12 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
|
||||||
|
</svg>
|
||||||
|
<p class="text-lg font-semibold">Belum ada data user</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
@endforelse
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Recent Users Table -->
|
|
||||||
<div class="bg-white overflow-hidden shadow-xl sm:rounded-2xl">
|
|
||||||
<div class="p-8">
|
|
||||||
<div class="flex justify-between items-center mb-6">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl p-3 mr-4">
|
|
||||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold text-gray-800">Recent Users</h3>
|
|
||||||
</div>
|
|
||||||
<a href="{{ route('super-admin.users.index') }}" class="flex items-center px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white text-sm font-semibold rounded-xl hover:from-blue-600 hover:to-blue-700 transition-all shadow-lg hover:shadow-xl">
|
|
||||||
View All
|
|
||||||
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="overflow-x-auto rounded-xl border border-gray-200">
|
|
||||||
<table class="min-w-full divide-y divide-gray-200">
|
|
||||||
<thead class="bg-gray-50">
|
|
||||||
<tr>
|
|
||||||
<th class="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Username</th>
|
|
||||||
<th class="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Nama</th>
|
|
||||||
<th class="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Email</th>
|
|
||||||
<th class="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Role</th>
|
|
||||||
<th class="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Registered</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="bg-white divide-y divide-gray-200">
|
|
||||||
@forelse(\App\Models\User::latest()->take(5)->get() as $user)
|
|
||||||
<tr class="hover:bg-gray-50 transition-colors">
|
|
||||||
<td class="px-6 py-4 whitespace-nowrap">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div class="flex-shrink-0 h-10 w-10 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center text-white font-bold">
|
|
||||||
{{ strtoupper(substr($user->username, 0, 1)) }}
|
|
||||||
</div>
|
|
||||||
<div class="ml-4">
|
|
||||||
<div class="text-sm font-semibold text-gray-900">{{ $user->username }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 whitespace-nowrap">
|
|
||||||
<div class="text-sm text-gray-900 font-medium">{{ $user->nama }}</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 whitespace-nowrap">
|
|
||||||
<div class="text-sm text-gray-600">{{ $user->email }}</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 whitespace-nowrap">
|
|
||||||
@if($user->role === 'super_admin')
|
|
||||||
<span class="px-3 py-1 inline-flex text-xs leading-5 font-bold rounded-full bg-gradient-to-r from-red-500 to-red-600 text-white shadow-md">
|
|
||||||
⭐ Super Admin
|
|
||||||
</span>
|
|
||||||
@elseif($user->role === 'admin')
|
|
||||||
<span class="px-3 py-1 inline-flex text-xs leading-5 font-bold rounded-full bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-md">
|
|
||||||
👤 Admin
|
|
||||||
</span>
|
|
||||||
@else
|
|
||||||
<span class="px-3 py-1 inline-flex text-xs leading-5 font-bold rounded-full bg-gradient-to-r from-gray-400 to-gray-500 text-white shadow-md">
|
|
||||||
👥 User
|
|
||||||
</span>
|
|
||||||
@endif
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<svg class="w-4 h-4 mr-2 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
|
|
||||||
</svg>
|
|
||||||
{{ $user->created_at->diffForHumans() }}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
@empty
|
|
||||||
<tr>
|
|
||||||
<td colspan="5" class="px-6 py-8 text-center">
|
|
||||||
<div class="text-gray-400">
|
|
||||||
<svg class="w-12 h-12 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
|
|
||||||
</svg>
|
|
||||||
<p class="text-lg font-semibold">Belum ada data user</p>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
@endforelse
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</x-app-layout>
|
<script>
|
||||||
|
function updateClock() {
|
||||||
|
const now = new Date();
|
||||||
|
const options = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' };
|
||||||
|
document.getElementById('realtime-clock').textContent = now.toLocaleDateString('id-ID', options);
|
||||||
|
}
|
||||||
|
updateClock();
|
||||||
|
setInterval(updateClock, 1000);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
@endsection
|
||||||
|
|
@ -1,79 +1,245 @@
|
||||||
<x-app-layout>
|
@extends('layouts.superadmin-app')
|
||||||
<x-slot name="header">
|
|
||||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
|
||||||
{{ __('Tambah User Baru') }}
|
|
||||||
</h2>
|
|
||||||
</x-slot>
|
|
||||||
|
|
||||||
<div class="py-12">
|
@section('page-title', 'Tambah Pengguna')
|
||||||
<div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
|
@section('page-subtitle', 'Buat akun pengguna baru')
|
||||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
|
||||||
<div class="p-6 text-gray-900">
|
|
||||||
|
|
||||||
<form method="POST" action="{{ route('super-admin.users.store') }}" class="space-y-6">
|
|
||||||
@csrf
|
|
||||||
|
|
||||||
<!-- Username -->
|
@section('content')
|
||||||
<div>
|
|
||||||
<x-input-label for="username" :value="__('Username')" />
|
|
||||||
<x-text-input id="username" name="username" type="text" class="mt-1 block w-full" :value="old('username')" required autofocus />
|
|
||||||
<x-input-error class="mt-2" :messages="$errors->get('username')" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nama -->
|
<style>
|
||||||
<div>
|
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
|
||||||
<x-input-label for="nama" :value="__('Nama Lengkap')" />
|
|
||||||
<x-text-input id="nama" name="nama" type="text" class="mt-1 block w-full" :value="old('nama')" required />
|
|
||||||
<x-input-error class="mt-2" :messages="$errors->get('nama')" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Email -->
|
.create-page * { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||||||
<div>
|
|
||||||
<x-input-label for="email" :value="__('Email')" />
|
|
||||||
<x-text-input id="email" name="email" type="email" class="mt-1 block w-full" :value="old('email')" required />
|
|
||||||
<x-input-error class="mt-2" :messages="$errors->get('email')" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Password -->
|
.form-wrapper { max-width: 680px; margin: 0 auto; }
|
||||||
<div>
|
|
||||||
<x-input-label for="password" :value="__('Password')" />
|
|
||||||
<x-text-input id="password" name="password" type="password" class="mt-1 block w-full" required />
|
|
||||||
<x-input-error class="mt-2" :messages="$errors->get('password')" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Confirm Password -->
|
.form-card {
|
||||||
<div>
|
background: white; border-radius: 28px;
|
||||||
<x-input-label for="password_confirmation" :value="__('Konfirmasi Password')" />
|
border: 1px solid #dcfce7;
|
||||||
<x-text-input id="password_confirmation" name="password_confirmation" type="password" class="mt-1 block w-full" required />
|
box-shadow: 0 8px 40px rgba(22, 163, 74, 0.1);
|
||||||
</div>
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
<!-- No HP -->
|
.form-hero {
|
||||||
<div>
|
padding: 32px 36px 28px;
|
||||||
<x-input-label for="no_hp" :value="__('Nomor HP')" />
|
background: linear-gradient(135deg, #14532d 0%, #166534 50%, #16a34a 100%);
|
||||||
<x-text-input id="no_hp" name="no_hp" type="text" class="mt-1 block w-full" :value="old('no_hp')" />
|
position: relative; overflow: hidden;
|
||||||
<x-input-error class="mt-2" :messages="$errors->get('no_hp')" />
|
}
|
||||||
</div>
|
.form-hero::before {
|
||||||
|
content: ''; position: absolute; top: -40px; right: -40px;
|
||||||
|
width: 160px; height: 160px;
|
||||||
|
background: rgba(255,255,255,0.07); border-radius: 50%;
|
||||||
|
}
|
||||||
|
.form-hero::after {
|
||||||
|
content: ''; position: absolute; bottom: -30px; right: 80px;
|
||||||
|
width: 100px; height: 100px;
|
||||||
|
background: rgba(255,255,255,0.05); border-radius: 50%;
|
||||||
|
}
|
||||||
|
.hero-icon {
|
||||||
|
width: 52px; height: 52px; border-radius: 16px;
|
||||||
|
background: rgba(255,255,255,0.18);
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
margin-bottom: 16px; backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
.hero-icon svg { width: 26px; height: 26px; color: white; }
|
||||||
|
.form-hero h2 { font-size: 1.4rem; font-weight: 800; color: white; letter-spacing: -0.3px; }
|
||||||
|
.form-hero p { color: rgba(255,255,255,0.65); font-size: 0.85rem; margin-top: 4px; }
|
||||||
|
|
||||||
<!-- Role -->
|
.form-body { padding: 32px 36px; }
|
||||||
<div>
|
|
||||||
<x-input-label for="role" :value="__('Role')" />
|
|
||||||
<select id="role" name="role" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" required>
|
|
||||||
<option value="">Pilih Role</option>
|
|
||||||
<option value="super_admin" {{ old('role') == 'super_admin' ? 'selected' : '' }}>Super Admin</option>
|
|
||||||
<option value="admin" {{ old('role') == 'admin' ? 'selected' : '' }}>Admin</option>
|
|
||||||
<option value="user" {{ old('role') == 'user' ? 'selected' : '' }}>User</option>
|
|
||||||
</select>
|
|
||||||
<x-input-error class="mt-2" :messages="$errors->get('role')" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-4">
|
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||||||
<x-primary-button>{{ __('Simpan') }}</x-primary-button>
|
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||||
<a href="{{ route('super-admin.users.index') }}" class="text-gray-600 hover:text-gray-900">Batal</a>
|
.form-group.full { grid-column: 1 / -1; }
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
font-size: 0.78rem; font-weight: 700; color: #374151;
|
||||||
|
text-transform: uppercase; letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
.label-optional { font-size: 0.72rem; font-weight: 500; color: #9ca3af; text-transform: none; letter-spacing: 0; }
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
width: 100%; padding: 12px 16px;
|
||||||
|
border: 1.5px solid #e5e7eb; border-radius: 14px;
|
||||||
|
font-size: 0.88rem; color: #1a1a2e; background: #fafafa;
|
||||||
|
transition: all 0.2s ease; outline: none;
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
}
|
||||||
|
.form-input:focus {
|
||||||
|
border-color: #16a34a; background: white;
|
||||||
|
box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.08);
|
||||||
|
}
|
||||||
|
.form-input.error { border-color: #ef4444; background: #fff5f5; }
|
||||||
|
.form-input::placeholder { color: #c4c4cc; }
|
||||||
|
|
||||||
|
.form-select {
|
||||||
|
width: 100%; padding: 12px 16px;
|
||||||
|
border: 1.5px solid #e5e7eb; border-radius: 14px;
|
||||||
|
font-size: 0.88rem; color: #1a1a2e; background: #fafafa;
|
||||||
|
transition: all 0.2s ease; outline: none; cursor: pointer;
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif; appearance: none;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2316a34a'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat; background-position: right 14px center;
|
||||||
|
background-size: 16px; padding-right: 44px;
|
||||||
|
}
|
||||||
|
.form-select:focus {
|
||||||
|
border-color: #16a34a; background-color: white;
|
||||||
|
box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-msg { font-size: 0.75rem; color: #ef4444; font-weight: 500; }
|
||||||
|
|
||||||
|
.password-box {
|
||||||
|
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
|
||||||
|
border: 1.5px solid #fde68a; border-radius: 18px;
|
||||||
|
padding: 20px; margin: 4px 0;
|
||||||
|
}
|
||||||
|
.password-box-label {
|
||||||
|
display: flex; align-items: center; gap: 7px;
|
||||||
|
font-size: 0.78rem; font-weight: 700; color: #92400e;
|
||||||
|
margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
.password-box-label svg { width: 14px; height: 14px; }
|
||||||
|
.password-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||||
|
.password-input {
|
||||||
|
width: 100%; padding: 12px 16px;
|
||||||
|
border: 1.5px solid #fde68a; border-radius: 12px;
|
||||||
|
font-size: 0.88rem; color: #1a1a2e; background: white;
|
||||||
|
transition: all 0.2s ease; outline: none;
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
}
|
||||||
|
.password-input:focus {
|
||||||
|
border-color: #16a34a;
|
||||||
|
box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.08);
|
||||||
|
}
|
||||||
|
.password-input.error { border-color: #ef4444; }
|
||||||
|
.password-input::placeholder { color: #c4c4cc; }
|
||||||
|
|
||||||
|
.divider { height: 1px; background: linear-gradient(to right, transparent, #dcfce7, transparent); margin: 8px 0; }
|
||||||
|
|
||||||
|
.form-actions { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; margin-top: 8px; }
|
||||||
|
.btn-cancel {
|
||||||
|
display: inline-flex; align-items: center; gap: 8px;
|
||||||
|
padding: 11px 20px; color: #6b7280; font-weight: 600; font-size: 0.85rem;
|
||||||
|
border-radius: 14px; text-decoration: none;
|
||||||
|
background: #f9fafb; border: 1.5px solid #e5e7eb; transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
.btn-cancel:hover { background: #f3f4f6; color: #374151; }
|
||||||
|
.btn-cancel svg { width: 15px; height: 15px; }
|
||||||
|
.btn-submit {
|
||||||
|
display: inline-flex; align-items: center; gap: 8px;
|
||||||
|
padding: 13px 28px;
|
||||||
|
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
|
||||||
|
color: white; font-weight: 700; font-size: 0.88rem;
|
||||||
|
border-radius: 14px; border: none; cursor: pointer;
|
||||||
|
box-shadow: 0 4px 15px rgba(22, 163, 74, 0.35);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.2px;
|
||||||
|
}
|
||||||
|
.btn-submit:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 25px rgba(22, 163, 74, 0.45);
|
||||||
|
}
|
||||||
|
.btn-submit svg { width: 16px; height: 16px; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="create-page">
|
||||||
|
<div class="form-wrapper">
|
||||||
|
<div class="form-card">
|
||||||
|
|
||||||
|
<div class="form-hero">
|
||||||
|
<div class="hero-icon">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
|
||||||
|
</div>
|
||||||
|
<h2>Form Pengguna Baru</h2>
|
||||||
|
<p>Lengkapi semua informasi untuk membuat akun baru</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form method="POST" action="{{ route('super-admin.users.store') }}" class="form-body">
|
||||||
|
@csrf
|
||||||
|
|
||||||
|
<div class="form-grid">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="username" class="form-label">Username</label>
|
||||||
|
<input id="username" name="username" type="text"
|
||||||
|
value="{{ old('username') }}" placeholder="contoh: johndoe"
|
||||||
|
class="form-input @error('username') error @enderror"
|
||||||
|
required autofocus />
|
||||||
|
@error('username')<p class="error-msg">{{ $message }}</p>@enderror
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="nama" class="form-label">Nama Lengkap</label>
|
||||||
|
<input id="nama" name="nama" type="text"
|
||||||
|
value="{{ old('nama') }}" placeholder="Nama lengkap"
|
||||||
|
class="form-input @error('nama') error @enderror" required />
|
||||||
|
@error('nama')<p class="error-msg">{{ $message }}</p>@enderror
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group full">
|
||||||
|
<label for="email" class="form-label">Email</label>
|
||||||
|
<input id="email" name="email" type="email"
|
||||||
|
value="{{ old('email') }}" placeholder="contoh@email.com"
|
||||||
|
class="form-input @error('email') error @enderror" required />
|
||||||
|
@error('email')<p class="error-msg">{{ $message }}</p>@enderror
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="password-box" style="margin-top:20px;">
|
||||||
|
<div class="password-box-label">
|
||||||
|
<svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/></svg>
|
||||||
|
Keamanan Akun
|
||||||
|
</div>
|
||||||
|
<div class="password-grid">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password" class="form-label" style="color:#92400e;">Password</label>
|
||||||
|
<input id="password" name="password" type="password"
|
||||||
|
placeholder="Min. 8 karakter"
|
||||||
|
class="password-input @error('password') error @enderror" required />
|
||||||
|
@error('password')<p class="error-msg">{{ $message }}</p>@enderror
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password_confirmation" class="form-label" style="color:#92400e;">Konfirmasi</label>
|
||||||
|
<input id="password_confirmation" name="password_confirmation" type="password"
|
||||||
|
placeholder="Ulangi password" class="password-input" required />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</x-app-layout>
|
<div class="form-grid" style="margin-top:20px;">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="no_hp" class="form-label">No HP <span class="label-optional">(opsional)</span></label>
|
||||||
|
<input id="no_hp" name="no_hp" type="text"
|
||||||
|
value="{{ old('no_hp') }}" placeholder="08xxxxxxxxxx"
|
||||||
|
class="form-input @error('no_hp') error @enderror" />
|
||||||
|
@error('no_hp')<p class="error-msg">{{ $message }}</p>@enderror
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="role" class="form-label">Role</label>
|
||||||
|
<select id="role" name="role" class="form-select @error('role') error @enderror" required>
|
||||||
|
<option value="">Pilih Role</option>
|
||||||
|
<option value="super_admin" {{ old('role') == 'super_admin' ? 'selected' : '' }}>Super Admin</option>
|
||||||
|
<option value="admin" {{ old('role') == 'admin' ? 'selected' : '' }}>Admin</option>
|
||||||
|
<option value="user" {{ old('role') == 'user' ? 'selected' : '' }}>User</option>
|
||||||
|
</select>
|
||||||
|
@error('role')<p class="error-msg">{{ $message }}</p>@enderror
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="divider" style="margin-top:28px;"></div>
|
||||||
|
|
||||||
|
<div class="form-actions">
|
||||||
|
<a href="{{ route('super-admin.users.index') }}" class="btn-cancel">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
|
||||||
|
Batal
|
||||||
|
</a>
|
||||||
|
<button type="submit" class="btn-submit">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
|
||||||
|
Simpan Pengguna
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endsection
|
||||||
|
|
@ -1,79 +1,279 @@
|
||||||
<x-app-layout>
|
@extends('layouts.superadmin-app')
|
||||||
<x-slot name="header">
|
|
||||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
|
||||||
{{ __('Edit User') }}
|
|
||||||
</h2>
|
|
||||||
</x-slot>
|
|
||||||
|
|
||||||
<div class="py-12">
|
@section('page-title', 'Edit Pengguna')
|
||||||
<div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
|
@section('page-subtitle', 'Ubah data akun: ' . $user->nama)
|
||||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
|
||||||
<div class="p-6 text-gray-900">
|
|
||||||
|
|
||||||
<form method="POST" action="{{ route('super-admin.users.update', $user) }}" class="space-y-6">
|
|
||||||
@csrf
|
|
||||||
@method('PUT')
|
|
||||||
|
|
||||||
<!-- Username -->
|
@section('content')
|
||||||
<div>
|
|
||||||
<x-input-label for="username" :value="__('Username')" />
|
|
||||||
<x-text-input id="username" name="username" type="text" class="mt-1 block w-full" :value="old('username', $user->username)" required autofocus />
|
|
||||||
<x-input-error class="mt-2" :messages="$errors->get('username')" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nama -->
|
<style>
|
||||||
<div>
|
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
|
||||||
<x-input-label for="nama" :value="__('Nama Lengkap')" />
|
|
||||||
<x-text-input id="nama" name="nama" type="text" class="mt-1 block w-full" :value="old('nama', $user->nama)" required />
|
|
||||||
<x-input-error class="mt-2" :messages="$errors->get('nama')" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Email -->
|
.edit-page * { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||||||
<div>
|
|
||||||
<x-input-label for="email" :value="__('Email')" />
|
|
||||||
<x-text-input id="email" name="email" type="email" class="mt-1 block w-full" :value="old('email', $user->email)" required />
|
|
||||||
<x-input-error class="mt-2" :messages="$errors->get('email')" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Password (Optional) -->
|
.form-wrapper { max-width: 720px; margin: 0 auto; }
|
||||||
<div>
|
|
||||||
<x-input-label for="password" :value="__('Password Baru (kosongkan jika tidak ingin mengubah)')" />
|
|
||||||
<x-text-input id="password" name="password" type="password" class="mt-1 block w-full" />
|
|
||||||
<x-input-error class="mt-2" :messages="$errors->get('password')" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Confirm Password -->
|
.form-card {
|
||||||
<div>
|
background: white; border-radius: 28px;
|
||||||
<x-input-label for="password_confirmation" :value="__('Konfirmasi Password Baru')" />
|
border: 1px solid #dcfce7;
|
||||||
<x-text-input id="password_confirmation" name="password_confirmation" type="password" class="mt-1 block w-full" />
|
box-shadow: 0 8px 40px rgba(22, 163, 74, 0.1);
|
||||||
</div>
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
<!-- No HP -->
|
.form-hero {
|
||||||
<div>
|
padding: 28px 36px;
|
||||||
<x-input-label for="no_hp" :value="__('Nomor HP')" />
|
background: linear-gradient(135deg, #14532d 0%, #166534 40%, #22c55e 100%);
|
||||||
<x-text-input id="no_hp" name="no_hp" type="text" class="mt-1 block w-full" :value="old('no_hp', $user->no_hp)" />
|
position: relative; overflow: hidden;
|
||||||
<x-input-error class="mt-2" :messages="$errors->get('no_hp')" />
|
}
|
||||||
</div>
|
.form-hero::before {
|
||||||
|
content: ''; position: absolute; top: -50px; right: -30px;
|
||||||
|
width: 180px; height: 180px;
|
||||||
|
background: rgba(255,255,255,0.07); border-radius: 50%;
|
||||||
|
}
|
||||||
|
.form-hero::after {
|
||||||
|
content: ''; position: absolute; bottom: -20px; left: 200px;
|
||||||
|
width: 80px; height: 80px;
|
||||||
|
background: rgba(255,255,255,0.05); border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
<!-- Role -->
|
.hero-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
|
||||||
<div>
|
.hero-left { display: flex; align-items: center; gap: 14px; }
|
||||||
<x-input-label for="role" :value="__('Role')" />
|
.hero-icon {
|
||||||
<select id="role" name="role" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" required>
|
width: 48px; height: 48px; border-radius: 14px;
|
||||||
<option value="super_admin" {{ old('role', $user->role) == 'super_admin' ? 'selected' : '' }}>Super Admin</option>
|
background: rgba(255,255,255,0.18);
|
||||||
<option value="admin" {{ old('role', $user->role) == 'admin' ? 'selected' : '' }}>Admin</option>
|
display: flex; align-items: center; justify-content: center;
|
||||||
<option value="user" {{ old('role', $user->role) == 'user' ? 'selected' : '' }}>User</option>
|
backdrop-filter: blur(10px);
|
||||||
</select>
|
}
|
||||||
<x-input-error class="mt-2" :messages="$errors->get('role')" />
|
.hero-icon svg { width: 24px; height: 24px; color: white; }
|
||||||
</div>
|
.hero-title { font-size: 1.3rem; font-weight: 800; color: white; letter-spacing: -0.3px; }
|
||||||
|
.hero-id { color: rgba(255,255,255,0.6); font-size: 0.8rem; margin-top: 2px; }
|
||||||
|
|
||||||
<div class="flex items-center gap-4">
|
.user-badge {
|
||||||
<x-primary-button>{{ __('Update') }}</x-primary-button>
|
display: flex; align-items: center; gap: 10px;
|
||||||
<a href="{{ route('super-admin.users.index') }}" class="text-gray-600 hover:text-gray-900">Batal</a>
|
background: rgba(255,255,255,0.15);
|
||||||
</div>
|
backdrop-filter: blur(10px);
|
||||||
</form>
|
border: 1px solid rgba(255,255,255,0.2);
|
||||||
|
border-radius: 14px; padding: 10px 16px;
|
||||||
|
}
|
||||||
|
.badge-avatar {
|
||||||
|
width: 36px; height: 36px; border-radius: 10px;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
font-size: 0.85rem; font-weight: 800; color: white;
|
||||||
|
}
|
||||||
|
.badge-avatar.super { background: linear-gradient(135deg, #f59e0b, #d97706); }
|
||||||
|
.badge-avatar.admin { background: linear-gradient(135deg, #22c55e, #15803d); }
|
||||||
|
.badge-avatar.user { background: linear-gradient(135deg, #4ade80, #16a34a); }
|
||||||
|
.badge-name { font-size: 0.85rem; font-weight: 700; color: white; }
|
||||||
|
.badge-uname { font-size: 0.72rem; color: rgba(255,255,255,0.6); margin-top: 1px; }
|
||||||
|
|
||||||
|
.form-body { padding: 32px 36px; }
|
||||||
|
|
||||||
|
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||||||
|
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||||
|
.form-group.full { grid-column: 1 / -1; }
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
font-size: 0.78rem; font-weight: 700; color: #374151;
|
||||||
|
text-transform: uppercase; letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
.label-optional { font-size: 0.72rem; font-weight: 500; color: #9ca3af; text-transform: none; letter-spacing: 0; }
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
width: 100%; padding: 12px 16px;
|
||||||
|
border: 1.5px solid #e5e7eb; border-radius: 14px;
|
||||||
|
font-size: 0.88rem; color: #1a1a2e; background: #fafafa;
|
||||||
|
transition: all 0.2s ease; outline: none;
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
}
|
||||||
|
.form-input:focus {
|
||||||
|
border-color: #16a34a; background: white;
|
||||||
|
box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.08);
|
||||||
|
}
|
||||||
|
.form-input.error { border-color: #ef4444; background: #fff5f5; }
|
||||||
|
.form-input::placeholder { color: #c4c4cc; }
|
||||||
|
|
||||||
|
.form-select {
|
||||||
|
width: 100%; padding: 12px 16px;
|
||||||
|
border: 1.5px solid #e5e7eb; border-radius: 14px;
|
||||||
|
font-size: 0.88rem; color: #1a1a2e; background: #fafafa;
|
||||||
|
transition: all 0.2s ease; outline: none; cursor: pointer;
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif; appearance: none;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2316a34a'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat; background-position: right 14px center;
|
||||||
|
background-size: 16px; padding-right: 44px;
|
||||||
|
}
|
||||||
|
.form-select:focus {
|
||||||
|
border-color: #16a34a; background-color: white;
|
||||||
|
box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-msg { font-size: 0.75rem; color: #ef4444; font-weight: 500; }
|
||||||
|
|
||||||
|
.password-box {
|
||||||
|
background: linear-gradient(135deg, #fffbeb 0%, #fef9c3 100%);
|
||||||
|
border: 1.5px solid #fde68a; border-radius: 18px;
|
||||||
|
padding: 20px; margin: 4px 0;
|
||||||
|
}
|
||||||
|
.password-box-label {
|
||||||
|
display: flex; align-items: center; gap: 7px;
|
||||||
|
font-size: 0.78rem; font-weight: 700; color: #92400e;
|
||||||
|
margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
.password-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||||
|
.password-input {
|
||||||
|
width: 100%; padding: 12px 16px;
|
||||||
|
border: 1.5px solid #fde68a; border-radius: 12px;
|
||||||
|
font-size: 0.88rem; color: #1a1a2e; background: white;
|
||||||
|
transition: all 0.2s ease; outline: none;
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
}
|
||||||
|
.password-input:focus {
|
||||||
|
border-color: #16a34a;
|
||||||
|
box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.08);
|
||||||
|
}
|
||||||
|
.password-input.error { border-color: #ef4444; }
|
||||||
|
.password-input::placeholder { color: #c4c4cc; }
|
||||||
|
|
||||||
|
.divider { height: 1px; background: linear-gradient(to right, transparent, #dcfce7, transparent); margin: 8px 0; }
|
||||||
|
|
||||||
|
.form-actions { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; margin-top: 8px; }
|
||||||
|
.btn-cancel {
|
||||||
|
display: inline-flex; align-items: center; gap: 8px;
|
||||||
|
padding: 11px 20px; color: #6b7280; font-weight: 600; font-size: 0.85rem;
|
||||||
|
border-radius: 14px; text-decoration: none;
|
||||||
|
background: #f9fafb; border: 1.5px solid #e5e7eb; transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
.btn-cancel:hover { background: #f3f4f6; color: #374151; }
|
||||||
|
.btn-cancel svg { width: 15px; height: 15px; }
|
||||||
|
.btn-submit {
|
||||||
|
display: inline-flex; align-items: center; gap: 8px;
|
||||||
|
padding: 13px 28px;
|
||||||
|
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
|
||||||
|
color: white; font-weight: 700; font-size: 0.88rem;
|
||||||
|
border-radius: 14px; border: none; cursor: pointer;
|
||||||
|
box-shadow: 0 4px 15px rgba(22, 163, 74, 0.35);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.2px;
|
||||||
|
}
|
||||||
|
.btn-submit:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 25px rgba(22, 163, 74, 0.45);
|
||||||
|
}
|
||||||
|
.btn-submit svg { width: 16px; height: 16px; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="edit-page">
|
||||||
|
<div class="form-wrapper">
|
||||||
|
<div class="form-card">
|
||||||
|
|
||||||
|
<div class="form-hero">
|
||||||
|
<div class="hero-top">
|
||||||
|
<div class="hero-left">
|
||||||
|
<div class="hero-icon">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="hero-title">Edit Pengguna</div>
|
||||||
|
<div class="hero-id">ID #{{ $user->id }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="user-badge">
|
||||||
|
<div class="badge-avatar {{ $user->role === 'super_admin' ? 'super' : ($user->role === 'admin' ? 'admin' : 'user') }}">
|
||||||
|
{{ strtoupper(substr($user->nama, 0, 1)) }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="badge-name">{{ $user->nama }}</div>
|
||||||
|
<div class="badge-uname">{{ $user->username }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</x-app-layout>
|
|
||||||
|
<form method="POST" action="{{ route('super-admin.users.update', $user) }}" class="form-body">
|
||||||
|
@csrf @method('PUT')
|
||||||
|
|
||||||
|
<div class="form-grid">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="username" class="form-label">Username</label>
|
||||||
|
<input id="username" name="username" type="text"
|
||||||
|
value="{{ old('username', $user->username) }}"
|
||||||
|
class="form-input @error('username') error @enderror"
|
||||||
|
required autofocus />
|
||||||
|
@error('username')<p class="error-msg">{{ $message }}</p>@enderror
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="nama" class="form-label">Nama Lengkap</label>
|
||||||
|
<input id="nama" name="nama" type="text"
|
||||||
|
value="{{ old('nama', $user->nama) }}"
|
||||||
|
class="form-input @error('nama') error @enderror" required />
|
||||||
|
@error('nama')<p class="error-msg">{{ $message }}</p>@enderror
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group full">
|
||||||
|
<label for="email" class="form-label">Email</label>
|
||||||
|
<input id="email" name="email" type="email"
|
||||||
|
value="{{ old('email', $user->email) }}"
|
||||||
|
class="form-input @error('email') error @enderror" required />
|
||||||
|
@error('email')<p class="error-msg">{{ $message }}</p>@enderror
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="password-box" style="margin-top:20px;">
|
||||||
|
<div class="password-box-label">
|
||||||
|
<svg width="14" height="14" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/></svg>
|
||||||
|
Kosongkan jika tidak ingin mengubah password
|
||||||
|
</div>
|
||||||
|
<div class="password-grid">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password" class="form-label" style="color:#92400e;">Password Baru</label>
|
||||||
|
<input id="password" name="password" type="password"
|
||||||
|
placeholder="Min. 8 karakter"
|
||||||
|
class="password-input @error('password') error @enderror" />
|
||||||
|
@error('password')<p class="error-msg">{{ $message }}</p>@enderror
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password_confirmation" class="form-label" style="color:#92400e;">Konfirmasi</label>
|
||||||
|
<input id="password_confirmation" name="password_confirmation" type="password"
|
||||||
|
placeholder="Ulangi password baru" class="password-input" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-grid" style="margin-top:20px;">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="no_hp" class="form-label">No HP <span class="label-optional">(opsional)</span></label>
|
||||||
|
<input id="no_hp" name="no_hp" type="text"
|
||||||
|
value="{{ old('no_hp', $user->no_hp) }}" placeholder="08xxxxxxxxxx"
|
||||||
|
class="form-input @error('no_hp') error @enderror" />
|
||||||
|
@error('no_hp')<p class="error-msg">{{ $message }}</p>@enderror
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="role" class="form-label">Role</label>
|
||||||
|
<select id="role" name="role" class="form-select @error('role') error @enderror" required>
|
||||||
|
<option value="super_admin" {{ old('role', $user->role) == 'super_admin' ? 'selected' : '' }}>Super Admin</option>
|
||||||
|
<option value="admin" {{ old('role', $user->role) == 'admin' ? 'selected' : '' }}>Admin</option>
|
||||||
|
<option value="user" {{ old('role', $user->role) == 'user' ? 'selected' : '' }}>User</option>
|
||||||
|
</select>
|
||||||
|
@error('role')<p class="error-msg">{{ $message }}</p>@enderror
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="divider" style="margin-top:28px;"></div>
|
||||||
|
|
||||||
|
<div class="form-actions">
|
||||||
|
<a href="{{ route('super-admin.users.index') }}" class="btn-cancel">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
|
||||||
|
Batal
|
||||||
|
</a>
|
||||||
|
<button type="submit" class="btn-submit">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
|
||||||
|
Update Pengguna
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endsection
|
||||||
|
|
@ -1,95 +1,252 @@
|
||||||
<x-app-layout>
|
@extends('layouts.superadmin-app')
|
||||||
<x-slot name="header">
|
|
||||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
|
||||||
{{ __('User Management') }}
|
|
||||||
</h2>
|
|
||||||
</x-slot>
|
|
||||||
|
|
||||||
<div class="py-12">
|
@section('page-title', 'Management Account')
|
||||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
@section('page-subtitle', 'Kelola semua akun pengguna sistem')
|
||||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
|
||||||
<div class="p-6 text-gray-900">
|
|
||||||
|
|
||||||
@if (session('success'))
|
|
||||||
<div class="mb-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
|
|
||||||
{{ session('success') }}
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
@if (session('error'))
|
@section('content')
|
||||||
<div class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
|
|
||||||
{{ session('error') }}
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
<div class="flex justify-between items-center mb-6">
|
<style>
|
||||||
<h3 class="text-lg font-semibold">Daftar User</h3>
|
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
|
||||||
<a href="{{ route('super-admin.users.create') }}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
|
|
||||||
+ Tambah User
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="overflow-x-auto">
|
.users-page * { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||||||
<table class="min-w-full bg-white border">
|
|
||||||
<thead class="bg-gray-100">
|
|
||||||
<tr>
|
|
||||||
<th class="px-6 py-3 border-b text-left text-xs font-medium text-gray-500 uppercase">ID</th>
|
|
||||||
<th class="px-6 py-3 border-b text-left text-xs font-medium text-gray-500 uppercase">Username</th>
|
|
||||||
<th class="px-6 py-3 border-b text-left text-xs font-medium text-gray-500 uppercase">Nama</th>
|
|
||||||
<th class="px-6 py-3 border-b text-left text-xs font-medium text-gray-500 uppercase">Email</th>
|
|
||||||
<th class="px-6 py-3 border-b text-left text-xs font-medium text-gray-500 uppercase">No HP</th>
|
|
||||||
<th class="px-6 py-3 border-b text-left text-xs font-medium text-gray-500 uppercase">Role</th>
|
|
||||||
<th class="px-6 py-3 border-b text-left text-xs font-medium text-gray-500 uppercase">Aksi</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
@forelse ($users as $user)
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-6 py-4 border-b">{{ $user->id }}</td>
|
|
||||||
<td class="px-6 py-4 border-b">{{ $user->username }}</td>
|
|
||||||
<td class="px-6 py-4 border-b">{{ $user->nama }}</td>
|
|
||||||
<td class="px-6 py-4 border-b">{{ $user->email }}</td>
|
|
||||||
<td class="px-6 py-4 border-b">{{ $user->no_hp ?? '-' }}</td>
|
|
||||||
<td class="px-6 py-4 border-b">
|
|
||||||
@if($user->role === 'super_admin')
|
|
||||||
<span class="px-2 py-1 text-xs bg-red-100 text-red-800 rounded-full">Super Admin</span>
|
|
||||||
@elseif($user->role === 'admin')
|
|
||||||
<span class="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">Admin</span>
|
|
||||||
@else
|
|
||||||
<span class="px-2 py-1 text-xs bg-gray-100 text-gray-800 rounded-full">User</span>
|
|
||||||
@endif
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 border-b">
|
|
||||||
<div class="flex space-x-2">
|
|
||||||
<a href="{{ route('super-admin.users.edit', $user) }}" class="text-blue-600 hover:text-blue-900">Edit</a>
|
|
||||||
|
|
||||||
@if($user->id !== auth()->id())
|
|
||||||
<form action="{{ route('super-admin.users.destroy', $user) }}" method="POST" class="inline" onsubmit="return confirm('Yakin ingin menghapus user ini?')">
|
|
||||||
@csrf
|
|
||||||
@method('DELETE')
|
|
||||||
<button type="submit" class="text-red-600 hover:text-red-900">Hapus</button>
|
|
||||||
</form>
|
|
||||||
@endif
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
@empty
|
|
||||||
<tr>
|
|
||||||
<td colspan="7" class="px-6 py-4 border-b text-center text-gray-500">
|
|
||||||
Belum ada data user.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
@endforelse
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-4">
|
.alert-success {
|
||||||
{{ $users->links() }}
|
display: flex; align-items: center; gap: 12px;
|
||||||
</div>
|
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
|
||||||
|
border: 1px solid #6ee7b7; color: #065f46;
|
||||||
|
padding: 14px 20px; border-radius: 16px; margin-bottom: 20px;
|
||||||
|
animation: slideDown 0.4s ease;
|
||||||
|
}
|
||||||
|
.alert-error {
|
||||||
|
display: flex; align-items: center; gap: 12px;
|
||||||
|
background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
|
||||||
|
border: 1px solid #f87171; color: #7f1d1d;
|
||||||
|
padding: 14px 20px; border-radius: 16px; margin-bottom: 20px;
|
||||||
|
animation: slideDown 0.4s ease;
|
||||||
|
}
|
||||||
|
@keyframes slideDown {
|
||||||
|
from { opacity: 0; transform: translateY(-10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
</div>
|
.btn-add {
|
||||||
</div>
|
display: inline-flex; align-items: center; gap: 8px;
|
||||||
</div>
|
padding: 12px 22px;
|
||||||
|
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
|
||||||
|
color: white; font-weight: 700; font-size: 0.85rem;
|
||||||
|
border-radius: 14px; text-decoration: none;
|
||||||
|
box-shadow: 0 4px 15px rgba(22, 163, 74, 0.35);
|
||||||
|
transition: all 0.3s ease; letter-spacing: 0.2px;
|
||||||
|
}
|
||||||
|
.btn-add:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 25px rgba(22, 163, 74, 0.45);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.btn-add svg { width: 16px; height: 16px; }
|
||||||
|
|
||||||
|
.table-card {
|
||||||
|
background: white; border-radius: 24px;
|
||||||
|
border: 1px solid #dcfce7;
|
||||||
|
box-shadow: 0 4px 24px rgba(22, 163, 74, 0.08);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.table-card-header {
|
||||||
|
padding: 22px 28px; border-bottom: 1px solid #f0fdf4;
|
||||||
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
|
}
|
||||||
|
.table-card-header-left { display: flex; align-items: center; gap: 12px; }
|
||||||
|
.table-card-header h3 { font-size: 1rem; font-weight: 700; color: #14532d; }
|
||||||
|
.header-dot {
|
||||||
|
width: 8px; height: 8px; border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, #22c55e, #16a34a);
|
||||||
|
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
|
||||||
|
}
|
||||||
|
.count-badge {
|
||||||
|
background: #dcfce7; color: #15803d;
|
||||||
|
font-size: 0.72rem; font-weight: 700;
|
||||||
|
padding: 3px 10px; border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table { width: 100%; border-collapse: collapse; }
|
||||||
|
thead tr { background: #f0fdf4; }
|
||||||
|
thead th {
|
||||||
|
padding: 12px 20px; text-align: left;
|
||||||
|
font-size: 0.72rem; font-weight: 700; color: #4ade80;
|
||||||
|
text-transform: uppercase; letter-spacing: 0.8px;
|
||||||
|
border-bottom: 1px solid #dcfce7;
|
||||||
|
}
|
||||||
|
tbody tr { border-bottom: 1px solid #f7fef9; transition: background 0.15s ease; }
|
||||||
|
tbody tr:last-child { border-bottom: none; }
|
||||||
|
tbody tr:hover { background: #f0fdf4; }
|
||||||
|
td { padding: 16px 20px; }
|
||||||
|
|
||||||
|
.user-cell { display: flex; align-items: center; gap: 12px; }
|
||||||
|
.avatar {
|
||||||
|
width: 40px; height: 40px; border-radius: 12px;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
font-size: 0.9rem; font-weight: 800; color: white; flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.avatar.super { background: linear-gradient(135deg, #fbbf24, #d97706); }
|
||||||
|
.avatar.admin { background: linear-gradient(135deg, #22c55e, #15803d); }
|
||||||
|
.avatar.user { background: linear-gradient(135deg, #60a5fa, #2563eb); }
|
||||||
|
.user-name { font-size: 0.88rem; font-weight: 700; color: #14532d; }
|
||||||
|
.user-uname { font-size: 0.75rem; color: #86efac; margin-top: 1px; }
|
||||||
|
|
||||||
|
.cell-text { font-size: 0.85rem; color: #4b5563; }
|
||||||
|
.cell-muted { color: #9ca3af; }
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-flex; align-items: center; gap: 6px;
|
||||||
|
padding: 5px 12px; border-radius: 20px;
|
||||||
|
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px;
|
||||||
|
}
|
||||||
|
.badge-super { background: #fef9c3; color: #854d0e; }
|
||||||
|
.badge-super .dot { background: #ca8a04; }
|
||||||
|
.badge-admin { background: #dcfce7; color: #15803d; }
|
||||||
|
.badge-admin .dot { background: #16a34a; }
|
||||||
|
.badge-user { background: #eff6ff; color: #1d4ed8; }
|
||||||
|
.badge-user .dot { background: #3b82f6; }
|
||||||
|
.badge .dot { width: 6px; height: 6px; border-radius: 50%; }
|
||||||
|
|
||||||
|
.actions { display: flex; align-items: center; gap: 8px; }
|
||||||
|
.btn-edit {
|
||||||
|
display: inline-flex; align-items: center; gap: 5px;
|
||||||
|
padding: 7px 14px; border-radius: 10px;
|
||||||
|
font-size: 0.78rem; font-weight: 600;
|
||||||
|
background: #dcfce7; color: #15803d;
|
||||||
|
text-decoration: none; transition: all 0.2s ease;
|
||||||
|
border: none; cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn-edit:hover { background: #16a34a; color: white; }
|
||||||
|
.btn-delete {
|
||||||
|
display: inline-flex; align-items: center; gap: 5px;
|
||||||
|
padding: 7px 14px; border-radius: 10px;
|
||||||
|
font-size: 0.78rem; font-weight: 600;
|
||||||
|
background: #fef2f2; color: #dc2626;
|
||||||
|
text-decoration: none; transition: all 0.2s ease;
|
||||||
|
border: none; cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn-delete:hover { background: #dc2626; color: white; }
|
||||||
|
.btn-edit svg, .btn-delete svg { width: 13px; height: 13px; }
|
||||||
|
|
||||||
|
.empty-state { padding: 60px 20px; text-align: center; }
|
||||||
|
.empty-state svg { width: 56px; height: 56px; color: #bbf7d0; margin: 0 auto 12px; display: block; }
|
||||||
|
.empty-state p { color: #86efac; font-weight: 600; }
|
||||||
|
|
||||||
|
.row-num { font-size: 0.8rem; font-weight: 600; color: #bbf7d0; }
|
||||||
|
|
||||||
|
.pagination-wrap { padding: 16px 28px; border-top: 1px solid #dcfce7; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="users-page">
|
||||||
|
|
||||||
|
@if (session('success'))
|
||||||
|
<div class="alert-success">
|
||||||
|
<svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
|
||||||
|
<span style="font-weight:600; font-size:0.9rem;">{{ session('success') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</x-app-layout>
|
@endif
|
||||||
|
@if (session('error'))
|
||||||
|
<div class="alert-error">
|
||||||
|
<svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
|
||||||
|
<span style="font-weight:600; font-size:0.9rem;">{{ session('error') }}</span>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
<div class="table-card">
|
||||||
|
<div class="table-card-header">
|
||||||
|
<div class="table-card-header-left">
|
||||||
|
<div class="header-dot"></div>
|
||||||
|
<h3>Daftar Pengguna</h3>
|
||||||
|
<span class="count-badge">{{ $users->total() }} total</span>
|
||||||
|
</div>
|
||||||
|
<a href="{{ route('super-admin.users.create') }}" class="btn-add">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/></svg>
|
||||||
|
Tambah Pengguna
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="overflow-x:auto;">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>#</th>
|
||||||
|
<th>Pengguna</th>
|
||||||
|
<th>Email</th>
|
||||||
|
<th>No HP</th>
|
||||||
|
<th>Role</th>
|
||||||
|
<th>Aksi</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
@forelse ($users as $user)
|
||||||
|
<tr>
|
||||||
|
<td><span class="row-num">{{ $loop->iteration }}</span></td>
|
||||||
|
<td>
|
||||||
|
<div class="user-cell">
|
||||||
|
<div class="avatar {{ $user->role === 'super_admin' ? 'super' : ($user->role === 'admin' ? 'admin' : 'user') }}">
|
||||||
|
{{ strtoupper(substr($user->nama, 0, 1)) }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="user-name">{{ $user->nama }}</div>
|
||||||
|
<div class="user-uname">{{ $user->username }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td><span class="cell-text">{{ $user->email }}</span></td>
|
||||||
|
<td><span class="cell-text {{ !$user->no_hp ? 'cell-muted' : '' }}">{{ $user->no_hp ?? '—' }}</span></td>
|
||||||
|
<td>
|
||||||
|
@if($user->role === 'super_admin')
|
||||||
|
<span class="px-3 py-1 inline-flex text-xs leading-5 font-bold rounded-full bg-gradient-to-r from-yellow-500 to-yellow-600 text-white shadow-md">
|
||||||
|
⭐ Super Admin
|
||||||
|
</span>
|
||||||
|
@elseif($user->role === 'admin')
|
||||||
|
<span class="px-3 py-1 inline-flex text-xs leading-5 font-bold rounded-full bg-gradient-to-r from-green-500 to-green-600 text-white shadow-md">
|
||||||
|
👤 Admin
|
||||||
|
</span>
|
||||||
|
@else
|
||||||
|
<span class="px-3 py-1 inline-flex text-xs leading-5 font-bold rounded-full bg-gradient-to-r from-blue-400 to-blue-500 text-white shadow-md">
|
||||||
|
👥 User
|
||||||
|
</span>
|
||||||
|
@endif
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="actions">
|
||||||
|
<a href="{{ route('super-admin.users.edit', $user) }}" class="btn-edit">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
|
||||||
|
Edit
|
||||||
|
</a>
|
||||||
|
@if($user->id !== auth()->id())
|
||||||
|
<form action="{{ route('super-admin.users.destroy', $user) }}" method="POST" style="display:inline;" onsubmit="return confirm('Yakin ingin menghapus {{ $user->nama }}?')">
|
||||||
|
@csrf @method('DELETE')
|
||||||
|
<button type="submit" class="btn-delete">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||||
|
Hapus
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
@empty
|
||||||
|
<tr>
|
||||||
|
<td colspan="6">
|
||||||
|
<div class="empty-state">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||||
|
<p>Belum ada data pengguna</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
@endforelse
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if($users->hasPages())
|
||||||
|
<div class="pagination-wrap">{{ $users->links() }}</div>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
@endsection
|
||||||
|
|
@ -49,7 +49,7 @@
|
||||||
// Super Admin Routes
|
// Super Admin Routes
|
||||||
Route::middleware(['auth', App\Http\Middleware\IsSuperAdmin::class])->prefix('super-admin')->name('super-admin.')->group(function () {
|
Route::middleware(['auth', App\Http\Middleware\IsSuperAdmin::class])->prefix('super-admin')->name('super-admin.')->group(function () {
|
||||||
Route::get('/dashboard', function () {
|
Route::get('/dashboard', function () {
|
||||||
return view('super-admin.dashboard');
|
return view('super-admin.dashboard');
|
||||||
})->name('dashboard');
|
})->name('dashboard');
|
||||||
|
|
||||||
Route::resource('users', App\Http\Controllers\SuperAdmin\UserManagementController::class);
|
Route::resource('users', App\Http\Controllers\SuperAdmin\UserManagementController::class);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue