289 lines
18 KiB
PHP
289 lines
18 KiB
PHP
<div class="mx-auto" x-data="{ tab: 'general' }">
|
|
<div class="mb-8">
|
|
<flux:heading size="xl" level="1">Pengaturan Sistem</flux:heading>
|
|
<flux:subheading>Konfigurasi identitas klinik, profil dinamis, daftar tim medis, dan tampilan visual dashboard.</flux:subheading>
|
|
</div>
|
|
|
|
{{-- Navigasi Tab --}}
|
|
<div class="flex flex-wrap gap-2 bg-zinc-50 dark:bg-white/5 p-1 border border-zinc-200 dark:border-white/10 rounded-lg w-fit">
|
|
<button type="button" x-on:click="tab = 'general'"
|
|
:class="tab === 'general' ? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-700'"
|
|
class="px-4 py-2 rounded-md font-medium text-sm transition-all">
|
|
Umum & SEO
|
|
</button>
|
|
<button type="button" x-on:click="tab = 'about_team'"
|
|
:class="tab === 'about_team' ? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-700'"
|
|
class="px-4 py-2 rounded-md font-medium text-sm transition-all text-emerald-600 dark:text-emerald-400">
|
|
Profil & Tim Klinik
|
|
</button>
|
|
<button type="button" x-on:click="tab = 'contact'"
|
|
:class="tab === 'contact' ? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-700'"
|
|
class="px-4 py-2 rounded-md font-medium text-sm transition-all">
|
|
Kontak Klinik
|
|
</button>
|
|
<button type="button" x-on:click="tab = 'status'"
|
|
:class="tab === 'status' ? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-700'"
|
|
class="px-4 py-2 rounded-md font-medium text-sm transition-all">
|
|
Status Operasional
|
|
</button>
|
|
<button type="button" x-on:click="tab = 'branding'"
|
|
:class="tab === 'branding' ? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-700'"
|
|
class="px-4 py-2 rounded-md font-medium text-sm transition-all">
|
|
Tema & Warna
|
|
</button>
|
|
<button type="button" x-on:click="tab = 'social'"
|
|
:class="tab === 'social' ? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-700'"
|
|
class="px-4 py-2 rounded-md font-medium text-sm transition-all">
|
|
Media Sosial
|
|
</button>
|
|
</div>
|
|
|
|
<form wire:submit="save" class="space-y-6 mt-8">
|
|
{{-- Tab 1: General & SEO --}}
|
|
<div x-show="tab === 'general'" class="space-y-6">
|
|
<flux:card>
|
|
<div class="space-y-6">
|
|
<flux:input wire:model="site_name" label="Nama Klinik / Aplikasi" />
|
|
<flux:textarea wire:model="site_description" label="Deskripsi Situs (SEO)" rows="3" />
|
|
<flux:input wire:model="meta_keywords" label="Keywords SEO" placeholder="klinik, kesehatan, dokter..." />
|
|
|
|
<div class="gap-6 grid grid-cols-1 md:grid-cols-2 pt-4">
|
|
<flux:field>
|
|
<flux:label>Logo Utama</flux:label>
|
|
<div class="flex items-center gap-4 mt-2">
|
|
@if ($logo)
|
|
<img src="{{ $logo->temporaryUrl() }}" class="bg-gray-50 p-1 border rounded w-auto h-12">
|
|
@elseif ($existing_logo)
|
|
<img src="{{ asset('storage/' . $existing_logo) }}" class="bg-gray-50 p-1 border rounded w-auto h-12">
|
|
@endif
|
|
<input type="file" wire:model="logo" class="text-sm" />
|
|
</div>
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:label>Favicon</flux:label>
|
|
<div class="flex items-center gap-4 mt-2">
|
|
@if ($favicon)
|
|
<img src="{{ $favicon->temporaryUrl() }}" class="border rounded w-8 h-8">
|
|
@elseif ($existing_favicon)
|
|
<img src="{{ asset('storage/' . $existing_favicon) }}" class="border rounded w-8 h-8">
|
|
@endif
|
|
<input type="file" wire:model="favicon" class="text-sm" />
|
|
</div>
|
|
</flux:field>
|
|
</div>
|
|
</div>
|
|
</flux:card>
|
|
</div>
|
|
|
|
{{-- Tab 2: Profil & Tim Klinik --}}
|
|
<div x-show="tab === 'about_team'" x-cloak class="space-y-6">
|
|
{{-- Section 1: Hero & Deskripsi --}}
|
|
<flux:card class="space-y-4">
|
|
<flux:heading size="lg">1. Banner Hero & Pembuka Landing Page</flux:heading>
|
|
<flux:separator class="my-2" />
|
|
<flux:input wire:model="site_about_short" label="Sub-heading Hero (Singkat)" placeholder="Contoh: Memberikan Pelayanan Medis Terbaik dan Terpercaya" />
|
|
<flux:textarea wire:model="site_about_long" label="Deskripsi Panjang Tentang Kami" rows="4" placeholder="Tulis cerita atau profil singkat mengenai latar belakang klinik..." />
|
|
</flux:card>
|
|
|
|
{{-- Section 2: Legalitas --}}
|
|
<flux:card class="space-y-4">
|
|
<flux:heading size="lg">2. Legalitas Instansi</flux:heading>
|
|
<flux:separator class="my-2" />
|
|
<div class="gap-4 grid grid-cols-1 md:grid-cols-2">
|
|
<flux:input wire:model="clinic_owner" label="Nama Pemilik Klinik" />
|
|
<flux:input wire:model="clinic_manager" label="Penanggung Jawab (Dokter)" />
|
|
<flux:input wire:model="clinic_established" label="Tahun Berdiri" placeholder="Contoh: 2020" />
|
|
<flux:input wire:model="clinic_type" label="Jenis Layanan Klinik" placeholder="Contoh: Klinik Pratama Rawat Jalan" />
|
|
</div>
|
|
</flux:card>
|
|
|
|
{{-- Section 3: Visi Misi --}}
|
|
<flux:card class="space-y-4">
|
|
<flux:heading size="lg">3. Visi & Misi Klinik</flux:heading>
|
|
<flux:separator class="my-2" />
|
|
<flux:textarea wire:model="clinic_visi" label="Visi Klinik" rows="2" />
|
|
|
|
<div class="space-y-2" wire:ignore>
|
|
<flux:label>Misi Klinik (Gunakan Fitur Bullet List di Editor)</flux:label>
|
|
<input id="clinic_misi" type="hidden" wire:model="clinic_misi">
|
|
<trix-editor input="clinic_misi" class="bg-white dark:bg-zinc-900 p-2 border border-zinc-200 dark:border-zinc-800 rounded-lg min-h-[150px] trix-content" x-data x-on:trix-change="$wire.set('clinic_misi', $event.target.value)"></trix-editor>
|
|
</div>
|
|
</flux:card>
|
|
|
|
{{-- Section 4: Tim Klinik --}}
|
|
<flux:card class="space-y-6">
|
|
<div>
|
|
<flux:heading size="lg">4. Manajemen Anggota & Tim Medis</flux:heading>
|
|
<flux:subheading>Gunakan fitur list/bullet poin untuk mendata nama staf secara dinamis.</flux:subheading>
|
|
</div>
|
|
<flux:separator class="my-2" />
|
|
|
|
<div class="gap-6 grid grid-cols-1 md:grid-cols-2">
|
|
<div class="space-y-2" wire:ignore>
|
|
<flux:label class="font-semibold">Daftar Dokter</flux:label>
|
|
<input id="team_doctors" type="hidden" wire:model="team_doctors">
|
|
<trix-editor input="team_doctors" class="bg-white dark:bg-zinc-900 p-2 border border-zinc-200 dark:border-zinc-800 rounded-lg min-h-[150px] trix-content" x-data x-on:trix-change="$wire.set('team_doctors', $event.target.value)"></trix-editor>
|
|
</div>
|
|
|
|
<div class="space-y-2" wire:ignore>
|
|
<flux:label class="font-semibold">Daftar Perawat</flux:label>
|
|
<input id="team_nurses" type="hidden" wire:model="team_nurses">
|
|
<trix-editor input="team_nurses" class="bg-white dark:bg-zinc-900 p-2 border border-zinc-200 dark:border-zinc-800 rounded-lg min-h-[150px] trix-content" x-data x-on:trix-change="$wire.set('team_nurses', $event.target.value)"></trix-editor>
|
|
</div>
|
|
|
|
<div class="space-y-2" wire:ignore>
|
|
<flux:label class="font-semibold">Daftar Bidan</flux:label>
|
|
<input id="team_midwives" type="hidden" wire:model="team_midwives">
|
|
<trix-editor input="team_midwives" class="bg-white dark:bg-zinc-900 p-2 border border-zinc-200 dark:border-zinc-800 rounded-lg min-h-[150px] trix-content" x-data x-on:trix-change="$wire.set('team_midwives', $event.target.value)"></trix-editor>
|
|
</div>
|
|
|
|
<div class="space-y-2" wire:ignore>
|
|
<flux:label class="font-semibold">Daftar Tim Farmasi</flux:label>
|
|
<input id="team_pharmacists" type="hidden" wire:model="team_pharmacists">
|
|
<trix-editor input="team_pharmacists" class="bg-white dark:bg-zinc-900 p-2 border border-zinc-200 dark:border-zinc-800 rounded-lg min-h-[150px] trix-content" x-data x-on:trix-change="$wire.set('team_pharmacists', $event.target.value)"></trix-editor>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2" wire:ignore>
|
|
<flux:label class="font-semibold">Daftar Tim Pendukung (Admin, CS, Driver, Satpam)</flux:label>
|
|
<input id="team_supports" type="hidden" wire:model="team_supports">
|
|
<trix-editor input="team_supports" class="bg-white dark:bg-zinc-900 p-2 border border-zinc-200 dark:border-zinc-800 rounded-lg min-h-[150px] trix-content" x-data x-on:trix-change="$wire.set('team_supports', $event.target.value)"></trix-editor>
|
|
</div>
|
|
</flux:card>
|
|
</div>
|
|
|
|
{{-- Tab 3: Contact Info --}}
|
|
<div x-show="tab === 'contact'" x-cloak class="space-y-6">
|
|
<flux:card>
|
|
<div class="gap-6 grid grid-cols-1 md:grid-cols-2">
|
|
<flux:input wire:model="clinic_phone" label="Nomor Telepon Klinik" icon="phone" />
|
|
<flux:input wire:model="clinic_email" label="Email Resmi" icon="envelope" />
|
|
|
|
<div class="md:col-span-2">
|
|
<flux:textarea wire:model="clinic_address" label="Alamat Lengkap" rows="3" />
|
|
</div>
|
|
|
|
<div class="gap-4 grid grid-cols-1 md:grid-cols-2 md:col-span-2 pt-4 border-zinc-100 dark:border-white/5 border-t">
|
|
<div class="space-y-2">
|
|
<flux:input wire:model="clinic_latitude" label="Latitude" placeholder="-7.593714" />
|
|
<p class="text-zinc-500 text-xs">Contoh: -7.593714</p>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<flux:input wire:model="clinic_longitude" label="Longitude" placeholder="111.859664" />
|
|
<p class="text-zinc-500 text-xs">Contoh: 111.859664</p>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<flux:button variant="ghost" size="sm" icon="map-pin" href="https://www.google.com/maps" target="_blank">
|
|
Buka Google Maps untuk cari koordinat
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</flux:card>
|
|
</div>
|
|
|
|
{{-- Tab 4: Status Operasional --}}
|
|
<div x-show="tab === 'status'" x-cloak class="space-y-6">
|
|
<flux:card>
|
|
<div class="space-y-6">
|
|
<div>
|
|
<flux:heading size="lg">Kontrol Operasional</flux:heading>
|
|
<flux:subheading>Atur ketersediaan layanan sistem untuk publik.</flux:subheading>
|
|
</div>
|
|
|
|
<flux:separator variant="faint" />
|
|
|
|
<div class="gap-8 grid grid-cols-1 md:grid-cols-2">
|
|
<flux:field variant="inline">
|
|
<div class="flex-1">
|
|
<flux:label>Pendaftaran Pasien Baru</flux:label>
|
|
<flux:description>Izinkan pengunjung mendaftar akun melalui Landing Page.</flux:description>
|
|
</div>
|
|
<flux:switch wire:model="registration_open" color="emerald" />
|
|
</flux:field>
|
|
|
|
<flux:field variant="inline">
|
|
<div class="flex-1">
|
|
<flux:label>Mode Pemeliharaan (Maintenance)</flux:label>
|
|
<flux:description>Aktifkan jika sistem sedang dalam perbaikan besar.</flux:description>
|
|
</div>
|
|
<flux:switch wire:model="maintenance_mode" color="red" />
|
|
</flux:field>
|
|
</div>
|
|
|
|
@if ($maintenance_mode)
|
|
<div class="flex gap-3 bg-red-50 dark:bg-red-900/20 p-4 border border-red-200 dark:border-red-800 rounded-lg">
|
|
<flux:icon.information-circle class="text-red-600" />
|
|
<span class="text-red-700 dark:text-red-400 text-sm">
|
|
<strong>Perhatian:</strong> Saat Mode Pemeliharaan aktif, pengunjung umum mungkin tidak dapat mengakses fitur utama klinik.
|
|
</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</flux:card>
|
|
</div>
|
|
|
|
{{-- Tab 5: Branding & Colors --}}
|
|
<div x-show="tab === 'branding'" x-cloak class="space-y-8">
|
|
<flux:card>
|
|
<div class="space-y-8">
|
|
<div>
|
|
<flux:heading level="3" class="mb-4">Warna Aksen Tema</flux:heading>
|
|
<flux:subheading class="mb-6">Digunakan pada tombol, link, dan elemen aktif.</flux:subheading>
|
|
|
|
<ui-radio-group wire:model="accent" class="flex flex-wrap gap-3">
|
|
@foreach (['teal', 'emerald', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose', 'red', 'orange', 'amber', 'yellow', 'lime'] as $color)
|
|
<ui-radio value="{{ $color }}"
|
|
class="flex justify-center items-center p-1 border border-zinc-200 data-[checked]:border-[var(--color-accent)] dark:border-white/10 rounded-lg data-[checked]:ring-[var(--color-accent)] data-[checked]:ring-2 transition-all cursor-pointer">
|
|
<div class="flex items-center gap-2 px-3 py-2">
|
|
<div class="size-4 rounded-full bg-{{ $color }}-500 shadow-sm"></div>
|
|
<span class="font-medium text-sm capitalize">{{ $color }}</span>
|
|
</div>
|
|
</ui-radio>
|
|
@endforeach
|
|
</ui-radio-group>
|
|
</div>
|
|
|
|
<flux:separator variant="subtle" class="my-10" />
|
|
|
|
<div>
|
|
<flux:heading level="3" class="mb-4">Nuansa Dasar (Background)</flux:heading>
|
|
<flux:subheading class="mb-6">Pilih nuansa abu-abu yang paling nyaman.</flux:subheading>
|
|
|
|
<ui-radio-group wire:model="base" class="flex items-center gap-6">
|
|
@foreach (['slate', 'gray', 'zinc', 'neutral', 'stone'] as $gray)
|
|
<ui-radio value="{{ $gray }}" class="group relative flex flex-col items-center gap-2 cursor-pointer">
|
|
<div class="size-14 rounded-2xl border-2 border-transparent group-data-[checked]:border-[var(--color-accent)] bg-{{ $gray }}-200 dark:bg-{{ $gray }}-800 shadow-sm transition-all hover:scale-105"></div>
|
|
<span class="font-semibold text-zinc-500 group-data-[checked]:text-[var(--color-accent)] text-xs capitalize">{{ $gray }}</span>
|
|
<div class="hidden group-data-[checked]:block -top-1 -right-1 absolute">
|
|
<div class="bg-[var(--color-accent)] shadow-sm p-0.5 rounded-full">
|
|
<flux:icon.check variant="mini" class="size-3 text-white" />
|
|
</div>
|
|
</div>
|
|
</ui-radio>
|
|
@endforeach
|
|
</ui-radio-group>
|
|
</div>
|
|
</div>
|
|
</flux:card>
|
|
</div>
|
|
|
|
{{-- Tab 6: Social Media --}}
|
|
<div x-show="tab === 'social'" x-cloak class="space-y-6">
|
|
<flux:card>
|
|
<div class="space-y-4">
|
|
<flux:input wire:model="social_facebook" label="Facebook URL" icon="link" placeholder="https://facebook.com/username" />
|
|
<flux:input wire:model="social_instagram" label="Instagram URL" icon="link" placeholder="https://instagram.com/username" />
|
|
<flux:input wire:model="social_twitter" label="Twitter / X URL" icon="link" placeholder="https://x.com/username" />
|
|
</div>
|
|
</flux:card>
|
|
</div>
|
|
|
|
{{-- Tombol Submit Tunggal --}}
|
|
<div class="flex justify-end gap-4">
|
|
<flux:button type="submit" variant="primary" icon="check">Simpan Seluruh Pengaturan Klinik</flux:button>
|
|
</div>
|
|
</form>
|
|
</div> |