yadiparfum/parfum
yadiparfum/parfum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(form): membungkus form yang required dengan flux:field dan kasih tanda bintang merah untuk input yang required

Browse Source
This commit is contained in:
Yoga Pangestu 2025-10-02 10:37:20 +07:00
parent 4c43729299
commit 8d67c59f10
10 changed files with 346 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
resources/views/livewire/studio/catalog/bottle/form.blade.php
View File

@ -18,14 +18,22 @@
<div class="col-span-1 lg:col-span-2">
<flux:card class="space-y-6 p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<flux:input label="Nama" placeholder="Masukkan nama produk"
wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" />
<flux:input label="Ukuran" placeholder="Masukkan ukuran"
wire:model.live.debounce.500ms="form.size" autocomplete="off" />
<flux:field>
<flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nama produk"
wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" />
<flux:error name="form.name" />
</flux:field>
<flux:field>
<flux:label>Harga Beli</flux:label>
<flux:label>Ukuran <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan ukuran"
wire:model.live.debounce.500ms="form.size" autocomplete="off" />
<flux:error name="form.size" />
</flux:field>
<flux:field>
<flux:label>Harga Beli <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input.group>
<flux:input.group.prefix>Rp</flux:input.group.prefix>
<flux:input placeholder="Masukkan harga beli"
@ -36,7 +44,7 @@
</flux:field>
<flux:field>
<flux:label>Harga Jual</flux:label>
<flux:label>Harga Jual <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input.group>
<flux:input.group.prefix>Rp</flux:input.group.prefix>
<flux:input placeholder="Masukkan harga jual"
@ -59,17 +67,21 @@ class="**:data-[slot=content]:min-h-[100px]!" />
<div class="w-full lg:w-1/3 space-y-4">
<flux:card class="space-y-6 p-6">
<flux:select variant="listbox" multiple searchable placeholder="Pilih Outlet" label="Outlet"
wire:model.live.debounce.500ms="form.outlet_ids">
<flux:select.option wire:click="selectAllOutlets" wire:ignore>Pilih Semua
</flux:select.option>
<flux:select.option wire:click="deselectAllOutlets" wire:ignore>Hapus Semua
</flux:select.option>
@foreach ($outlets as $key => $value)
<flux:select.option value="{{ $key }}">{{ $value }}
<flux:field>
<flux:label>Outlet <span class="text-red-500 ms-1">*</span></flux:label>
<flux:select variant="listbox" multiple searchable placeholder="Pilih Outlet"
wire:model.live.debounce.500ms="form.outlet_ids">
<flux:select.option wire:click="selectAllOutlets" wire:ignore>Pilih Semua
</flux:select.option>
@endforeach
</flux:select>
<flux:select.option wire:click="deselectAllOutlets" wire:ignore>Hapus Semua
</flux:select.option>
@foreach ($outlets as $key => $value)
<flux:select.option value="{{ $key }}">{{ $value }}
</flux:select.option>
@endforeach
</flux:select>
<flux:error name="form.outlet_ids" />
</flux:field>
</flux:card>
<flux:card class="space-y-6 p-6">

9
resources/views/livewire/studio/catalog/brands.blade.php
View File

@ -21,8 +21,12 @@
<div class="p-4 space-y-6">
<flux:heading size="lg">{{ $modalTitle }}</flux:heading>
<flux:input label="Nama" placeholder="Masukkan nama merek" wire:model.live.debounce.500ms="form.name"
autofocus autocomplete="off" />
<flux:field>
<flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nama merek" wire:model.live.debounce.500ms="form.name" autofocus
autocomplete="off" />
<flux:error name="form.name" />
</flux:field>
<div class="space-y-3">
<h3 class="text-sm font-medium">Gambar</h3>
@ -53,5 +57,4 @@ class="mt-3 text-sm font-medium text-red-500 dark:text-red-400">
</div>
</div>
</flux:modal>
</flux:main>

10
resources/views/livewire/studio/catalog/categories.blade.php
View File

@ -21,8 +21,13 @@
<div class="p-4 space-y-6">
<flux:heading size="lg">{{ $modalTitle }}</flux:heading>
<flux:input label="Nama" placeholder="Masukkan nama kategori" wire:model.live.debounce.500ms="form.name"
autofocus autocomplete="off" />
<flux:field>
<flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nama kategori" wire:model.live.debounce.500ms="form.name" autofocus
autocomplete="off" />
<flux:error name="form.name" />
</flux:field>
<flux:editor label="Keterangan" wire:model="form.description" placeholder="Masukkan keterangan"
auotocomplete="off" class="**:data-[slot=content]:min-h-[100px]!" />
@ -35,5 +40,4 @@
</div>
</div>
</flux:modal>
</flux:main>

91
resources/views/livewire/studio/catalog/perfume/form.blade.php
View File

@ -18,25 +18,33 @@
<div class="col-span-1 lg:col-span-2">
<flux:card class="space-y-6 p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<flux:input label="Nama" placeholder="Masukkan nama parfum"
wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" />
<flux:field>
<flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nama parfum"
wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" />
<flux:error name="form.name" />
</flux:field>
<flux:input label="SKU" placeholder="Masukkan stock keeping unit"
wire:model.live.debounce.500ms="form.sku" autocomplete="off" copyable />
<flux:field>
<flux:label>SKU <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan stock keeping unit"
wire:model.live.debounce.500ms="form.sku" autocomplete="off" copyable />
<flux:error name="form.sku" />
</flux:field>
<div class="lg:col-span-2">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<flux:select variant="listbox" searchable placeholder="Pilih Merek"
label="Merek" wire:model.live.debounce.500ms="form.brand">
@foreach ($brands as $key => $value)
<flux:select.option value="{{ $key }}">
{{ $value }}
<flux:select.option value="{{ $key }}">{{ $value }}
</flux:select.option>
@endforeach
</flux:select>
<flux:field>
<flux:label>Harga Beli</flux:label>
<flux:label>Harga Beli <span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:input.group>
<flux:input.group.prefix>Rp</flux:input.group.prefix>
<flux:input placeholder="Masukkan harga beli"
@ -48,7 +56,8 @@
</flux:field>
<flux:field>
<flux:label>Harga Jual</flux:label>
<flux:label>Harga Jual <span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:input.group>
<flux:input.group.prefix>Rp</flux:input.group.prefix>
<flux:input placeholder="Masukkan harga jual"
@ -89,42 +98,52 @@ class="**:data-[slot=content]:min-h-[100px]!" />
<div class="w-full lg:w-1/3 space-y-4">
<flux:card class="space-y-2 p-6">
<flux:radio.group wire:model.live="form.concentration" variant="buttons" class="w-full *:flex-1"
label="Concentration">
@foreach (\App\Enums\Concentration::cases() as $item)
<flux:radio value="{{ $item->value }}">
{{ $item->label() }}
</flux:radio>
@endforeach
</flux:radio.group>
<flux:field>
<flux:label>Concentration <span class="text-red-500 ms-1">*</span></flux:label>
<flux:radio.group wire:model.live="form.concentration" variant="buttons"
class="w-full *:flex-1">
@foreach (\App\Enums\Concentration::cases() as $item)
<flux:radio value="{{ $item->value }}">{{ $item->label() }}</flux:radio>
@endforeach
</flux:radio.group>
<flux:error name="form.concentration" />
</flux:field>
</flux:card>
<flux:card class="space-y-6 p-6">
<flux:select variant="listbox" multiple searchable placeholder="Pilih kategori" label="Kategori"
wire:model.live.debounce.500ms="form.category_ids">
<flux:select.option wire:click="selectAllCategories" wire:ignore>Pilih Semua
</flux:select.option>
<flux:select.option wire:click="deselectAllCategories" wire:ignore>Hapus Semua
</flux:select.option>
@foreach ($categories as $key => $value)
<flux:select.option value="{{ $key }}">{{ $value }}
<flux:field>
<flux:label>Kategori <span class="text-red-500 ms-1">*</span></flux:label>
<flux:select variant="listbox" multiple searchable placeholder="Pilih kategori"
wire:model.live.debounce.500ms="form.category_ids">
<flux:select.option wire:click="selectAllCategories" wire:ignore>Pilih Semua
</flux:select.option>
@endforeach
</flux:select>
<flux:select.option wire:click="deselectAllCategories" wire:ignore>Hapus Semua
</flux:select.option>
@foreach ($categories as $key => $value)
<flux:select.option value="{{ $key }}">{{ $value }}
</flux:select.option>
@endforeach
</flux:select>
<flux:error name="form.category_ids" />
</flux:field>
</flux:card>
<flux:card class="space-y-6 p-6">
<flux:select variant="listbox" multiple searchable placeholder="Pilih Outlet" label="Outlet"
wire:model.live.debounce.500ms="form.outlet_ids">
<flux:select.option wire:click="selectAllOutlets" wire:ignore>Pilih Semua
</flux:select.option>
<flux:select.option wire:click="deselectAllOutlets" wire:ignore>Hapus Semua
</flux:select.option>
@foreach ($outlets as $key => $value)
<flux:select.option value="{{ $key }}">{{ $value }}
<flux:field>
<flux:label>Outlet <span class="text-red-500 ms-1">*</span></flux:label>
<flux:select variant="listbox" multiple searchable placeholder="Pilih Outlet"
wire:model.live.debounce.500ms="form.outlet_ids">
<flux:select.option wire:click="selectAllOutlets" wire:ignore>Pilih Semua
</flux:select.option>
@endforeach
</flux:select>
<flux:select.option wire:click="deselectAllOutlets" wire:ignore>Hapus Semua
</flux:select.option>
@foreach ($outlets as $key => $value)
<flux:select.option value="{{ $key }}">{{ $value }}
</flux:select.option>
@endforeach
</flux:select>
<flux:error name="form.outlet_ids" />
</flux:field>
</flux:card>
<flux:card class="space-y-6 p-6">

46
resources/views/livewire/studio/catalog/product/form.blade.php
View File

@ -18,14 +18,22 @@
<div class="col-span-1 lg:col-span-2">
<flux:card class="space-y-6 p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<flux:input label="Nama" placeholder="Masukkan nama produk"
wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" />
<flux:input label="SKU" placeholder="Masukkan stock keeping unit"
wire:model.live.debounce.500ms="form.sku" autocomplete="off" copyable />
<flux:field>
<flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nama produk"
wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" />
<flux:error name="form.name" />
</flux:field>
<flux:field>
<flux:label>Harga Beli</flux:label>
<flux:label>SKU <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan stock keeping unit"
wire:model.live.debounce.500ms="form.sku" autocomplete="off" copyable />
<flux:error name="form.sku" />
</flux:field>
<flux:field>
<flux:label>Harga Beli <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input.group>
<flux:input.group.prefix>Rp</flux:input.group.prefix>
<flux:input placeholder="Masukkan harga beli"
@ -36,7 +44,7 @@
</flux:field>
<flux:field>
<flux:label>Harga Jual</flux:label>
<flux:label>Harga Jual <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input.group>
<flux:input.group.prefix>Rp</flux:input.group.prefix>
<flux:input placeholder="Masukkan harga jual"
@ -59,17 +67,21 @@ class="**:data-[slot=content]:min-h-[100px]!" />
<div class="w-full lg:w-1/3 space-y-4">
<flux:card class="space-y-6 p-6">
<flux:select variant="listbox" multiple searchable placeholder="Pilih Outlet" label="Outlet"
wire:model.live.debounce.500ms="form.outlet_ids">
<flux:select.option wire:click="selectAllOutlets" wire:ignore>Pilih Semua
</flux:select.option>
<flux:select.option wire:click="deselectAllOutlets" wire:ignore>Hapus Semua
</flux:select.option>
@foreach ($outlets as $key => $value)
<flux:select.option value="{{ $key }}">{{ $value }}
<flux:field>
<flux:label>Outlet <span class="text-red-500 ms-1">*</span></flux:label>
<flux:select variant="listbox" multiple searchable placeholder="Pilih Outlet"
wire:model.live.debounce.500ms="form.outlet_ids">
<flux:select.option wire:click="selectAllOutlets" wire:ignore>Pilih Semua
</flux:select.option>
@endforeach
</flux:select>
<flux:select.option wire:click="deselectAllOutlets" wire:ignore>Hapus Semua
</flux:select.option>
@foreach ($outlets as $key => $value)
<flux:select.option value="{{ $key }}">{{ $value }}
</flux:select.option>
@endforeach
</flux:select>
<flux:error name="form.outlet_ids" />
</flux:field>
</flux:card>
<flux:card class="space-y-6 p-6">

28
resources/views/livewire/studio/loyalty/customers.blade.php
View File

@ -21,20 +21,27 @@
<div class="p-4 space-y-6">
<flux:heading size="lg">{{ $modalTitle }}</flux:heading>
<flux:input label="Nama" placeholder="Masukkan nama customer" wire:model.live.debounce.500ms="form.name"
autofocus autocomplete="off" />
<flux:field>
<flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nama customer" wire:model.live.debounce.500ms="form.name" autofocus
autocomplete="off" />
<flux:error name="form.name" />
</flux:field>
<flux:input label="Nomor Telepon" placeholder="Masukkan nomor telepon" mask="9999 9999 99999"
wire:model.live.debounce.500ms="form.phone_number" autocomplete="off" />
<flux:radio.group wire:model.live="form.gender" variant="buttons" class="w-full *:flex-1"
label="Jenis Kelamin">
@foreach (\App\Enums\Gender::cases() as $gender)
<flux:radio value="{{ $gender->value }}" icon="{{ $gender->icon() }}">
{{ $gender->label() }}
</flux:radio>
@endforeach
</flux:radio.group>
<flux:field>
<flux:label>Jenis Kelamin <span class="text-red-500 ms-1">*</span></flux:label>
<flux:radio.group wire:model.live="form.gender" variant="buttons" class="w-full *:flex-1">
@foreach (\App\Enums\Gender::cases() as $gender)
<flux:radio value="{{ $gender->value }}" icon="{{ $gender->icon() }}">
{{ $gender->label() }}
</flux:radio>
@endforeach
</flux:radio.group>
<flux:error name="form.gender" />
</flux:field>
<div class="flex">
<flux:spacer />
@ -44,5 +51,4 @@
</div>
</div>
</flux:modal>
</flux:main>

24
resources/views/livewire/studio/loyalty/tiers.blade.php
View File

@ -21,14 +21,26 @@
<div class="p-4 space-y-6">
<flux:heading size="lg">{{ $modalTitle }}</flux:heading>
<flux:input label="Nama" placeholder="Masukkan nama tier" wire:model.live.debounce.500ms="form.name"
autofocus autocomplete="off" />
<flux:field>
<flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nama tier" wire:model.live.debounce.500ms="form.name" autofocus
autocomplete="off" />
<flux:error name="form.name" />
</flux:field>
<flux:input label="Min. Poin" placeholder="Masukkan minimal poin"
wire:model.live.debounce.500ms="form.min_points" autocomplete="off" />
<flux:field>
<flux:label>Min. Poin <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan minimal poin" wire:model.live.debounce.500ms="form.min_points"
autocomplete="off" />
<flux:error name="form.min_points" />
</flux:field>
<flux:input label="Maks. Poin" placeholder="Masukkan maksimal poin"
wire:model.live.debounce.500ms="form.max_points" autocomplete="off" />
<flux:field>
<flux:label>Maks. Poin </flux:label>
<flux:input placeholder="Masukkan maksimal poin" wire:model.live.debounce.500ms="form.max_points"
autocomplete="off" />
<flux:error name="form.max_points" />
</flux:field>
<div class="flex">
<flux:spacer />

107
resources/views/livewire/studio/loyalty/voucher/form.blade.php
View File

@ -18,11 +18,19 @@
<div class="col-span-1 lg:col-span-2">
<flux:card class="space-y-6 p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<flux:input label="Nama" placeholder="Masukkan nama voucher"
wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" />
<flux:field>
<flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nama voucher"
wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" />
<flux:error name="form.name" />
</flux:field>
<flux:input label="Kode" placeholder="Masukkan kode voucher"
wire:model.live.debounce.500ms="form.code" autocomplete="off" copyable />
<flux:field>
<flux:label>Kode <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan kode voucher"
wire:model.live.debounce.500ms="form.code" autocomplete="off" copyable />
<flux:error name="form.code" />
</flux:field>
<div class="lg:col-span-2">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
@ -49,18 +57,26 @@
</div>
</div>
<flux:date-picker label="Tanggal Mulai" with-today
wire:model.live.debounce.500ms="form.start_date" autocomplete="off"
locale="id-ID" />
<flux:field>
<flux:label>Tanggal Mulai <span class="text-red-500 ms-1">*</span></flux:label>
<flux:date-picker with-today wire:model.live.debounce.500ms="form.start_date"
autocomplete="off" locale="id-ID" />
<flux:error name="form.start_date" />
</flux:field>
<flux:date-picker label="Tanggal Selesai"
wire:model.live.debounce.500ms="form.end_date" autocomplete="off"
locale="id-ID" />
<div class="md:col-span-2">
<flux:editor label="Syarat dan Ketentuan" wire:model="form.terms_conditions"
placeholder="Masukkan syarat dan ketentuan" auotocomplete="off"
class="**:data-[slot=content]:min-h-[100px]!" />
<flux:field>
<flux:label>Syarat dan Ketentuan <span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:editor wire:model="form.terms_conditions"
placeholder="Masukkan syarat dan ketentuan" auotocomplete="off"
class="**:data-[slot=content]:min-h-[100px]!" />
<flux:error name="form.terms_conditions" />
</flux:field>
</div>
</div>
</flux:card>
@ -70,73 +86,80 @@ class="**:data-[slot=content]:min-h-[100px]!" />
<div class="w-full lg:w-1/3 space-y-4">
<flux:card class="space-y-2 p-6">
<flux:radio.group wire:model.live="form.type" variant="buttons" class="w-full *:flex-1"
label="Jumlah Diskon">
@foreach (\App\Enums\VoucherType::cases() as $item)
<flux:radio value="{{ $item->value }}" icon="{{ $item->icon() }}">
{{ $item->label() }}
</flux:radio>
@endforeach
</flux:radio.group>
<flux:field>
<flux:label>Jumlah Diskon <span class="text-red-500 ms-1">*</span></flux:label>
<flux:radio.group wire:model.live="form.type" variant="buttons" class="w-full *:flex-1">
@foreach (\App\Enums\VoucherType::cases() as $item)
<flux:radio value="{{ $item->value }}" icon="{{ $item->icon() }}">
{{ $item->label() }}
</flux:radio>
@endforeach
</flux:radio.group>
<flux:error name="form.type" />
</flux:field>
<flux:field>
<flux:label>Jumlah Diskon <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input.group>
@if ($form->type == \App\Enums\VoucherType::FIXED->value)
<flux:input.group.prefix>Rp</flux:input.group.prefix>
<flux:input placeholder="Masukkan Jumlah Diskon"
x-mask:dynamic="$money($input, ',')"
wire:model.live.debounce.500ms="form.discount_amount" autocomplete="off" />
@else
<flux:input placeholder="Masukkan Jumlah Diskon"
wire:model.live.debounce.500ms="form.discount_amount" autocomplete="off" />
<flux:input.group.suffix>%</flux:input.group.suffix>
@endif
</flux:input.group>
<flux:error name="form.discount_amount" />
</flux:field>
@if ($form->type == \App\Enums\VoucherType::PERCENTAGE->value)
<flux:field>
<flux:label>Maks. Diskon</flux:label>
<flux:label>Maks. Diskon <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input.group>
<flux:input.group.prefix>Rp</flux:input.group.prefix>
<flux:input placeholder="Masukkan maksimal diskon"
x-mask:dynamic="$money($input, ',')"
wire:model.live.debounce.500ms="form.max_discount" autocomplete="off" />
</flux:input.group>
<flux:error name="form.max_discount" />
</flux:field>
@endif
</flux:card>
<flux:card class="space-y-6 p-6">
<flux:radio.group wire:model.live="form.is_active" variant="buttons" class="w-full *:flex-1"
label="Aktif?">
@foreach (\App\Enums\IsActive::cases() as $item)
<flux:radio value="{{ $item->value }}" icon="{{ $item->icon() }}">
{{ $item->label() }}
</flux:radio>
@endforeach
</flux:radio.group>
<flux:field>
<flux:label>Aktif? <span class="text-red-500 ms-1">*</span></flux:label>
<flux:radio.group wire:model.live="form.is_active" variant="buttons"
class="w-full *:flex-1">
@foreach (\App\Enums\IsActive::cases() as $item)
<flux:radio value="{{ $item->value }}" icon="{{ $item->icon() }}">
{{ $item->label() }}
</flux:radio>
@endforeach
</flux:radio.group>
<flux:error name="form.is_active" />
</flux:field>
</flux:card>
<flux:card class="space-y-6 p-6">
<flux:select variant="listbox" multiple searchable placeholder="Pilih Outlet" label="Outlet"
wire:model.live.debounce.500ms="form.outlet_ids">
<flux:select.option wire:click="selectAllOutlets" wire:ignore>Pilih Semua
</flux:select.option>
<flux:select.option wire:click="deselectAllOutlets" wire:ignore>Hapus Semua
</flux:select.option>
@foreach ($outlets as $key => $value)
<flux:select.option value="{{ $key }}">{{ $value }}
<flux:field>
<flux:label>Outlet <span class="text-red-500 ms-1">*</span></flux:label>
<flux:select variant="listbox" multiple searchable placeholder="Pilih Outlet"
wire:model.live.debounce.500ms="form.outlet_ids">
<flux:select.option wire:click="selectAllOutlets" wire:ignore>Pilih Semua
</flux:select.option>
@endforeach
</flux:select>
<flux:select.option wire:click="deselectAllOutlets" wire:ignore>Hapus Semua
</flux:select.option>
@foreach ($outlets as $key => $value)
<flux:select.option value="{{ $key }}">{{ $value }}
</flux:select.option>
@endforeach
</flux:select>
<flux:error name="form.outlet_ids" />
</flux:field>
</flux:card>
</div>
</div>

85
resources/views/livewire/studio/master/outlet/form.blade.php
View File

@ -18,44 +18,83 @@
<div class="col-span-1 lg:col-span-2">
<flux:card class="space-y-6 p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<flux:input label="Nama" placeholder="Masukkan nama outlet"
wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" />
<flux:field>
<flux:label>Nama
<span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:input placeholder="Masukkan nama outlet"
wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" />
<flux:error name="form.name" />
</flux:field>
<flux:input label="Nomor Telepon" placeholder="Masukkan nomor telepon"
mask="9999 9999 99999" wire:model.live.debounce.500ms="form.phone_number"
autocomplete="off" />
<flux:field>
<flux:label>Nomor Telepon
<span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:input placeholder="Masukkan nomor telepon" mask="9999 9999 99999"
wire:model.live.debounce.500ms="form.phone_number" autocomplete="off" />
<flux:error name="form.phone_number" />
</flux:field>
<div class="md:col-span-2">
<flux:textarea label="Alamat" placeholder="Masukkan alamat lengkap"
wire:model.live.debounce.500ms="form.address" autocomplete="off"
rows="2" />
<flux:field>
<flux:label>Alamat
<span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:textarea placeholder="Masukkan alamat lengkap"
wire:model.live.debounce.500ms="form.address" autocomplete="off"
rows="2" />
<flux:error name="form.address" />
</flux:field>
</div>
<flux:input label="Patokan" placeholder="Masukkan patokan"
wire:model.live.debounce.500ms="form.landmark" autocomplete="off" />
<flux:field>
<flux:label>Patokan
<span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:input placeholder="Masukkan patokan"
wire:model.live.debounce.500ms="form.landmark" autocomplete="off" />
<flux:error name="form.landmark" />
</flux:field>
<flux:input label="Titik Maps" placeholder="Masukkan titik maps"
wire:model.live.debounce.500ms="form.maps_url" autocomplete="off" />
<flux:date-picker label="Tanggal Buka" with-today
wire:model.live.debounce.500ms="form.opened_date" autocomplete="off"
locale="id-ID" value="2023-01-01" />
<flux:field>
<flux:label>Tanggal Buka
<span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:radio.group wire:model.live="form.status" variant="buttons"
class="w-full *:flex-1" label="Status">
@foreach (\App\Enums\OutletStatus::cases() as $status)
<flux:radio value="{{ $status->value }}" icon="{{ $status->icon() }}">
{{ $status->label() }}
</flux:radio>
@endforeach
</flux:radio.group>
<flux:date-picker with-today wire:model.live.debounce.500ms="form.opened_date"
autocomplete="off" locale="id-ID" />
<flux:error name="form.opened_date" />
</flux:field>
<flux:field>
<flux:label>Status
<span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:radio.group wire:model.live="form.status" variant="buttons"
class="w-full *:flex-1">
@foreach (\App\Enums\OutletStatus::cases() as $status)
<flux:radio value="{{ $status->value }}" icon="{{ $status->icon() }}">
{{ $status->label() }}
</flux:radio>
@endforeach
</flux:radio.group>
<flux:error name="form.status" />
</flux:field>
</div>
</flux:card>
</div>
<flux:card class="space-y-6 p-6">
<div class="space-y-3">
<h3 class="text-sm font-medium">Gambar Utama</h3>
<h3 class="text-sm font-medium">Gambar Utama <span class="text-red-500 ms-1">*</span>
</h3>
<div class="dropzone-wrapper">
<livewire:dropzone wire:model="form.featured_image" :rules="['image', 'mimes:png,jpeg', 'max:10420']"
:max-files="1" :key="'featured_image'" :files="$form->featured_image" />
@ -78,7 +117,7 @@ class="mt-3 text-sm font-medium text-red-500 dark:text-red-400">
<flux:card class="space-y-6 p-6">
<div class="space-y-3">
<h3 class="text-sm font-medium">Gambar</h3>
<h3 class="text-sm font-medium">Gambar <span class="text-red-500 ms-1">*</span></h3>
<div class="dropzone-wrapper">
<livewire:dropzone wire:model="form.images" :rules="['image', 'mimes:png,jpeg', 'max:10420']" :max-files="5"
:key="'images'" :multiple="true" :files="$form->images" />

90
resources/views/livewire/studio/master/user/form.blade.php
View File

@ -19,46 +19,71 @@
<flux:card class="space-y-6 p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="md:col-span-2">
<flux:input label="Nama Lengkap" placeholder="Masukkan nama lengkap"
wire:model.live.debounce.500ms="form.full_name" autofocus
autocomplete="off" />
<flux:field>
<flux:label>Nama Lengkap <span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:input placeholder="Masukkan nama lengkap"
wire:model.live.debounce.500ms="form.full_name" autofocus
autocomplete="off" />
<flux:error name="form.full_name" />
</flux:field>
</div>
<flux:input label="Nama Pengguna" placeholder="Masukkan nama pengguna"
wire:model.live.debounce.500ms="form.username" autofocus autocomplete="off" />
<flux:input label="Email" placeholder="Masukkan email"
wire:model.live.debounce.500ms="form.email" autofocus autocomplete="off" />
<flux:input label="Nomor Telepon" placeholder="Masukkan nomor telepon"
mask="9999 9999 99999" wire:model.live.debounce.500ms="form.phone_number"
autocomplete="off" />
<flux:field>
<flux:label>Nama Pengguna <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nama pengguna"
wire:model.live.debounce.500ms="form.username" autocomplete="off" />
<flux:error name="form.username" />
</flux:field>
<flux:field>
<flux:label>Gaji Pokok</flux:label>
<flux:label>Email <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan email"
wire:model.live.debounce.500ms="form.email" autocomplete="off" />
<flux:error name="form.email" />
</flux:field>
<flux:field>
<flux:label>Nomor Telepon <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nomor telepon" mask="9999 9999 99999"
wire:model.live.debounce.500ms="form.phone_number" autocomplete="off" />
<flux:error name="form.phone_number" />
</flux:field>
<flux:field>
<flux:label>Gaji Pokok <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input.group>
<flux:input.group.prefix>Rp</flux:input.group.prefix>
<flux:input placeholder="Masukkan gaji pokok"
x-mask:dynamic="$money($input, ',')"
wire:model.live.debounce.500ms="form.base_salary" autocomplete="off" />
</flux:input.group>
<flux:error name="form.base_salary" />
</flux:field>
<flux:date-picker label="Tanggal Lahir" with-today
wire:model.live.debounce.500ms="form.birthdate" autocomplete="off"
locale="id-ID" selectable-header />
<flux:field>
<flux:label>Tanggal Lahir <span class="text-red-500 ms-1">*</span></flux:label>
<flux:date-picker with-today wire:model.live.debounce.500ms="form.birthdate"
autocomplete="off" locale="id-ID" selectable-header />
<flux:error name="form.birthdate" />
</flux:field>
<flux:date-picker label="Tanggal Bergabung" with-today
wire:model.live.debounce.500ms="form.hire_date" autocomplete="off"
locale="id-ID" selectable-header />
<flux:field>
<flux:label>Tanggal Bergabung <span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:date-picker with-today wire:model.live.debounce.500ms="form.hire_date"
autocomplete="off" locale="id-ID" selectable-header />
<flux:error name="form.hire_date" />
</flux:field>
<div class="md:col-span-2">
<flux:textarea label="Alamat" placeholder="Masukkan alamat lengkap"
wire:model.live.debounce.500ms="form.address" autocomplete="off"
rows="2" />
<flux:field>
<flux:label>Alamat <span class="text-red-500 ms-1">*</span></flux:label>
<flux:textarea placeholder="Masukkan alamat lengkap"
wire:model.live.debounce.500ms="form.address" autocomplete="off"
rows="2" />
<flux:error name="form.address" />
</flux:field>
</div>
</div>
</flux:card>
@ -68,29 +93,31 @@
<div class="w-full lg:w-1/3 space-y-4">
<flux:card class="space-y-6 p-6">
<div class="space-y-3">
<flux:radio.group wire:model.live="form.gender" variant="buttons" class="w-full *:flex-1"
label="Jenis Kelamin">
<flux:field>
<flux:label>Jenis Kelamin <span class="text-red-500 ms-1">*</span></flux:label>
<flux:radio.group wire:model.live="form.gender" variant="buttons" class="w-full *:flex-1">
@foreach (\App\Enums\Gender::cases() as $gender)
<flux:radio value="{{ $gender->value }}" icon="{{ $gender->icon() }}">
{{ $gender->label() }}
</flux:radio>
@endforeach
</flux:radio.group>
</div>
<flux:error name="form.gender" />
</flux:field>
</flux:card>
<flux:card class="space-y-6 p-6">
<div class="space-y-2">
<flux:radio.group wire:model.live="form.status" variant="buttons" label="Status"
class="w-full *:flex-1">
<flux:field>
<flux:label>Status <span class="text-red-500 ms-1">*</span></flux:label>
<flux:radio.group wire:model.live="form.status" variant="buttons" class="w-full *:flex-1">
@foreach (\App\Enums\UserStatus::cases() as $status)
<flux:radio value="{{ $status->value }}" icon="{{ $status->icon() }}">
{{ $status->label() }}
</flux:radio>
@endforeach
</flux:radio.group>
</div>
<flux:error name="form.status" />
</flux:field>
</flux:card>
</div>
</div>
@ -101,6 +128,5 @@ class="w-full *:flex-1">
</flux:button>
</div>
</div>
</div>
</flux:main>