Initial commit - CMS Gov Bapenda Garut dengan EditorJS
This commit is contained in:
224
app/Views/admin/users/form.php
Normal file
224
app/Views/admin/users/form.php
Normal file
@@ -0,0 +1,224 @@
|
||||
<?= $this->extend('admin/layout') ?>
|
||||
|
||||
<?= $this->section('content') ?>
|
||||
<div class="space-y-5 sm:space-y-6">
|
||||
<!-- Page Header -->
|
||||
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white/90">
|
||||
<?= $user ? 'Edit Pengguna' : 'Tambah Pengguna' ?>
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<?= $user ? 'Ubah informasi pengguna' : 'Tambahkan pengguna baru' ?>
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href="<?= base_url('admin/users') ?>"
|
||||
class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
|
||||
>
|
||||
<i class="fe fe-arrow-left"></i>
|
||||
Kembali
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Flash Messages -->
|
||||
<?php if (session()->getFlashdata('error')): ?>
|
||||
<div class="rounded-lg border border-error-200 bg-error-50 p-4 dark:border-error-800 dark:bg-error-900/20">
|
||||
<p class="text-sm text-error-800 dark:text-error-400">
|
||||
<?= esc(session()->getFlashdata('error')) ?>
|
||||
</p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Form -->
|
||||
<div class="rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div class="p-5 sm:p-6">
|
||||
<form
|
||||
action="<?= $user ? base_url('admin/users/update/' . $user['id']) : base_url('admin/users/store') ?>"
|
||||
method="post"
|
||||
class="space-y-6"
|
||||
>
|
||||
<?= csrf_field() ?>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<!-- Username -->
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Username <span class="text-error-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
value="<?= old('username', $user['username'] ?? '') ?>"
|
||||
placeholder="Masukkan username"
|
||||
class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
|
||||
required
|
||||
/>
|
||||
<?php if (isset($validation) && $validation->hasError('username')): ?>
|
||||
<p class="mt-1 text-sm text-error-600"><?= esc($validation->getError('username')) ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Email <span class="text-error-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value="<?= old('email', $user['email'] ?? '') ?>"
|
||||
placeholder="Masukkan email"
|
||||
class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
|
||||
required
|
||||
/>
|
||||
<?php if (isset($validation) && $validation->hasError('email')): ?>
|
||||
<p class="mt-1 text-sm text-error-600"><?= esc($validation->getError('email')) ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Password (only for create) -->
|
||||
<?php if (!$user): ?>
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Password <span class="text-error-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder="Masukkan password (min 6 karakter)"
|
||||
class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
|
||||
required
|
||||
minlength="6"
|
||||
/>
|
||||
<?php if (isset($validation) && $validation->hasError('password')): ?>
|
||||
<p class="mt-1 text-sm text-error-600"><?= esc($validation->getError('password')) ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Role -->
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Role <span class="text-error-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
name="role_id"
|
||||
class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-brand-800"
|
||||
required
|
||||
>
|
||||
<option value="">Pilih Role</option>
|
||||
<?php foreach ($roles as $role): ?>
|
||||
<option value="<?= $role['id'] ?>" <?= old('role_id', $user['role_id'] ?? '') == $role['id'] ? 'selected' : '' ?>>
|
||||
<?= esc(ucfirst($role['name'])) ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<?php if (isset($validation) && $validation->hasError('role_id')): ?>
|
||||
<p class="mt-1 text-sm text-error-600"><?= esc($validation->getError('role_id')) ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Phone Number -->
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Nomor Telepon
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="phone_number"
|
||||
value="<?= old('phone_number', $user['phone_number'] ?? '') ?>"
|
||||
placeholder="Masukkan nomor telepon"
|
||||
class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
|
||||
/>
|
||||
<?php if (isset($validation) && $validation->hasError('phone_number')): ?>
|
||||
<p class="mt-1 text-sm text-error-600"><?= esc($validation->getError('phone_number')) ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Telegram ID -->
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Telegram ID
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="telegram_id"
|
||||
value="<?= old('telegram_id', $user['telegram_id'] ?? '') ?>"
|
||||
placeholder="Masukkan Telegram ID"
|
||||
class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
|
||||
/>
|
||||
<?php if (isset($validation) && $validation->hasError('telegram_id')): ?>
|
||||
<p class="mt-1 text-sm text-error-600"><?= esc($validation->getError('telegram_id')) ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Active Status -->
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Status
|
||||
</label>
|
||||
<div class="flex items-center gap-4">
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="is_active"
|
||||
value="1"
|
||||
<?= old('is_active', $user['is_active'] ?? 1) ? 'checked' : '' ?>
|
||||
class="sr-only"
|
||||
/>
|
||||
<div class="relative">
|
||||
<div class="block h-8 w-14 rounded-full <?= old('is_active', $user['is_active'] ?? 1) ? 'bg-brand-500' : 'bg-gray-300 dark:bg-gray-700' ?> transition-colors"></div>
|
||||
<div class="absolute left-1 top-1 h-6 w-6 rounded-full bg-white transition-transform <?= old('is_active', $user['is_active'] ?? 1) ? 'translate-x-6' : '' ?>"></div>
|
||||
</div>
|
||||
<span class="ml-3 text-sm text-gray-700 dark:text-gray-400">
|
||||
<?= old('is_active', $user['is_active'] ?? 1) ? 'Aktif' : 'Tidak Aktif' ?>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div class="flex items-center gap-3 border-t border-gray-100 pt-6 dark:border-gray-800">
|
||||
<button
|
||||
type="submit"
|
||||
class="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600"
|
||||
>
|
||||
<i class="fe fe-save"></i>
|
||||
<?= $user ? 'Simpan Perubahan' : 'Simpan Pengguna' ?>
|
||||
</button>
|
||||
<a
|
||||
href="<?= base_url('admin/users') ?>"
|
||||
class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
|
||||
>
|
||||
Batal
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Toggle switch functionality
|
||||
document.querySelector('input[name="is_active"]')?.addEventListener('change', function() {
|
||||
const toggle = this.closest('label').querySelector('.block');
|
||||
const circle = this.closest('label').querySelector('.absolute');
|
||||
const text = this.closest('label').querySelector('span');
|
||||
|
||||
if (this.checked) {
|
||||
toggle.classList.add('bg-brand-500');
|
||||
toggle.classList.remove('bg-gray-300', 'dark:bg-gray-700');
|
||||
circle.classList.add('translate-x-6');
|
||||
text.textContent = 'Aktif';
|
||||
} else {
|
||||
toggle.classList.remove('bg-brand-500');
|
||||
toggle.classList.add('bg-gray-300', 'dark:bg-gray-700');
|
||||
circle.classList.remove('translate-x-6');
|
||||
text.textContent = 'Tidak Aktif';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<?= $this->endSection() ?>
|
||||
|
||||
Reference in New Issue
Block a user