From 8d67c59f10fa3432b5c361948e975ab97b3d0f9d Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Thu, 2 Oct 2025 10:37:20 +0700
Subject: [PATCH] refactor(form): membungkus form yang required dengan
 flux:field dan kasih tanda bintang merah untuk input yang required

---
 .../studio/catalog/bottle/form.blade.php      |  46 +++++---
 .../livewire/studio/catalog/brands.blade.php  |   9 +-
 .../studio/catalog/categories.blade.php       |  10 +-
 .../studio/catalog/perfume/form.blade.php     |  91 +++++++++------
 .../studio/catalog/product/form.blade.php     |  46 +++++---
 .../studio/loyalty/customers.blade.php        |  28 +++--
 .../livewire/studio/loyalty/tiers.blade.php   |  24 +++-
 .../studio/loyalty/voucher/form.blade.php     | 107 +++++++++++-------
 .../studio/master/outlet/form.blade.php       |  85 ++++++++++----
 .../studio/master/user/form.blade.php         |  90 +++++++++------
 10 files changed, 346 insertions(+), 190 deletions(-)

diff --git a/resources/views/livewire/studio/catalog/bottle/form.blade.php b/resources/views/livewire/studio/catalog/bottle/form.blade.php
index 10ff950..234652d 100644
--- a/resources/views/livewire/studio/catalog/bottle/form.blade.php
+++ b/resources/views/livewire/studio/catalog/bottle/form.blade.php
@@ -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">
diff --git a/resources/views/livewire/studio/catalog/brands.blade.php b/resources/views/livewire/studio/catalog/brands.blade.php
index d99236c..600bef2 100644
--- a/resources/views/livewire/studio/catalog/brands.blade.php
+++ b/resources/views/livewire/studio/catalog/brands.blade.php
@@ -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>
diff --git a/resources/views/livewire/studio/catalog/categories.blade.php b/resources/views/livewire/studio/catalog/categories.blade.php
index eef8331..e4c47e7 100644
--- a/resources/views/livewire/studio/catalog/categories.blade.php
+++ b/resources/views/livewire/studio/catalog/categories.blade.php
@@ -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>
diff --git a/resources/views/livewire/studio/catalog/perfume/form.blade.php b/resources/views/livewire/studio/catalog/perfume/form.blade.php
index 642f381..f69d690 100644
--- a/resources/views/livewire/studio/catalog/perfume/form.blade.php
+++ b/resources/views/livewire/studio/catalog/perfume/form.blade.php
@@ -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">
diff --git a/resources/views/livewire/studio/catalog/product/form.blade.php b/resources/views/livewire/studio/catalog/product/form.blade.php
index e595de9..66ce8ee 100644
--- a/resources/views/livewire/studio/catalog/product/form.blade.php
+++ b/resources/views/livewire/studio/catalog/product/form.blade.php
@@ -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">
diff --git a/resources/views/livewire/studio/loyalty/customers.blade.php b/resources/views/livewire/studio/loyalty/customers.blade.php
index a2d3234..bf2d66f 100644
--- a/resources/views/livewire/studio/loyalty/customers.blade.php
+++ b/resources/views/livewire/studio/loyalty/customers.blade.php
@@ -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>
diff --git a/resources/views/livewire/studio/loyalty/tiers.blade.php b/resources/views/livewire/studio/loyalty/tiers.blade.php
index b6142b4..789a473 100644
--- a/resources/views/livewire/studio/loyalty/tiers.blade.php
+++ b/resources/views/livewire/studio/loyalty/tiers.blade.php
@@ -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 />
diff --git a/resources/views/livewire/studio/loyalty/voucher/form.blade.php b/resources/views/livewire/studio/loyalty/voucher/form.blade.php
index 6e5f366..68e838e 100644
--- a/resources/views/livewire/studio/loyalty/voucher/form.blade.php
+++ b/resources/views/livewire/studio/loyalty/voucher/form.blade.php
@@ -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>
diff --git a/resources/views/livewire/studio/master/outlet/form.blade.php b/resources/views/livewire/studio/master/outlet/form.blade.php
index 7266580..0c6b617 100644
--- a/resources/views/livewire/studio/master/outlet/form.blade.php
+++ b/resources/views/livewire/studio/master/outlet/form.blade.php
@@ -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" />
diff --git a/resources/views/livewire/studio/master/user/form.blade.php b/resources/views/livewire/studio/master/user/form.blade.php
index a1f389f..c07e0df 100644
--- a/resources/views/livewire/studio/master/user/form.blade.php
+++ b/resources/views/livewire/studio/master/user/form.blade.php
@@ -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>