fix(panel-app): DatePicker não-nativo para data de nascimento

app-modules/panel-app/resources/views/components/profile-media-header.blade.php

@@ -2,7 +2,8 @@
     'avatarPreviewUrl' => null,
     'coverPreviewUrl' => null,
     'initials' => '',
-    'name' => ''
+    'name' => '',
+    'birthdateForm' => null,
 ])
 
 <div class="relative rounded-xl border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-900">
@@ -100,7 +101,7 @@ class="absolute -top-1 -right-1 z-20 rounded-full bg-red-500 p-1 text-white shad
         </div>
 
         {{-- Nickname + Birthdate --}}
-        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div class="grid grid-cols-1 items-start gap-4 sm:grid-cols-2">
             <div>
                 <label for="nickname" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ __('panel-app::profile.fields.nickname') }}
@@ -115,15 +116,7 @@ class="fi-input block w-full rounded-lg border border-gray-300 bg-white px-3 py-
                 />
             </div>
             <div>
-                <label for="birthdate" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                    {{ __('panel-app::profile.fields.birthdate') }}
-                </label>
-                <input
-                    id="birthdate"
-                    type="date"
-                    wire:model.blur="data.birthdate"
-                    class="fi-input block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm transition-colors focus:border-purple-500 focus:ring-1 focus:ring-purple-500 dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-purple-500"
-                />
+                {{ $birthdateForm }}
             </div>
         </div>
     </div>

app-modules/panel-app/resources/views/pages/profile.blade.php

@@ -11,7 +11,8 @@
                     'avatarPreviewUrl' => $this->avatarPreviewUrl,
                     'coverPreviewUrl' => $this->coverPreviewUrl,
                     'initials' => $this->initials,
-                    'name' => auth()->user()->name
+                    'name' => auth()->user()->name,
+                    'birthdateForm' => $this->birthdateForm,
                 ])
 
             {{ $this->form }}

app-modules/panel-app/src/Pages/ProfilePage.php

@@ -24,6 +24,7 @@
 use Filament\Schemas\Components\Utilities\Set;
 use Filament\Schemas\Schema;
 use Filament\Support\Enums\Width;
+use Filament\Support\Icons\Heroicon;
 use He4rt\Gamification\Character\Models\Character;
 use He4rt\Identity\User\Models\User;
 use He4rt\Profile\Actions\SyncProfileSkills;
@@ -45,6 +46,7 @@
 
 /**
  * @property-read Schema $form
+ * @property-read Schema $birthdateForm
  */
 class ProfilePage extends Page
 {
@@ -71,7 +73,6 @@ public function mount(): void
 
         $this->form->fill([
             'nickname' => $profile->nickname,
-            'birthdate' => $profile->birthdate?->format('Y-m-d'),
             'headline' => $profile->headline,
             'seniority_level' => $profile->seniority_level,
             'years_experience' => $profile->years_experience,
@@ -90,6 +91,34 @@ public function mount(): void
                 $profile->preferences->employmentTypes,
             ),
         ]);
+
+        $this->birthdateForm->fill([
+            'birthdate' => $profile->birthdate?->format('Y-m-d'),
+        ]);
+    }
+
+    public function birthdateForm(Schema $schema): Schema
+    {
+        return $schema
+            ->components([
+                DatePicker::make('birthdate')
+                    ->label(__('panel-app::profile.fields.birthdate'))
+                    ->native(condition: false)
+                    ->displayFormat('d/m/Y')
+                    ->format('Y-m-d')
+                    ->minDate(now()->subYears(120))
+                    ->maxDate(now())
+                    ->suffixIcon(Heroicon::Calendar, isInline: true)
+                    ->extraAttributes([
+                        // Suffix icon sits outside the trigger button; open the panel on icon click.
+                        'x-on:click' => <<<'JS'
+                            if (! $event.target.closest('.fi-input-wrp-suffix')) return;
+                            if ($event.target.closest('.fi-input-wrp-actions')) return;
+                            $el.querySelector('button.fi-fo-date-time-picker-trigger')?.click();
+                        JS,
+                    ]),
+            ])
+            ->statePath('data');
     }
 
     public function form(Schema $schema): Schema
@@ -369,6 +398,7 @@ public function form(Schema $schema): Schema
 
     public function save(): void
     {
+        $this->birthdateForm->getState();
         $formData = $this->form->getState();
         $profile = $this->getRecord();
 

app-modules/panel-app/tests/Feature/ProfilePageTest.php

@@ -93,6 +93,20 @@
         ->and($this->profile->about)->toBe('Dev PHP apaixonado por Laravel');
 });
 
+test('profile page saves birthdate from date picker', function (): void {
+    livewire(ProfilePage::class)
+        ->fillForm([
+            'birthdate' => '1996-02-15',
+        ], 'birthdateForm')
+        ->call('save')
+        ->assertHasNoFormErrors([], 'birthdateForm')
+        ->assertNotified();
+
+    $this->profile->refresh();
+
+    expect($this->profile->birthdate?->format('Y-m-d'))->toBe('1996-02-15');
+});
+
 test('profile page saves social links from repeater', function (): void {
     livewire(ProfilePage::class)
         ->fillForm([

resources/css/filament/app/theme.css

@@ -69,3 +69,13 @@
 .fi-sidebar {
     @apply border-e border-gray-200 dark:border-white/10;
 }
+
+/* Make "today" stand out in date pickers (esp. dark mode) */
+.fi-fo-date-time-picker-calendar-day.fi-fo-date-time-picker-calendar-day-today:not(.fi-selected):not(.fi-disabled) {
+    @apply font-semibold text-primary-600 ring-1 ring-inset ring-primary-500/50 dark:text-primary-300 dark:ring-primary-400/60;
+}
+
+/* Calendar suffix icon should feel clickable */
+.fi-fo-date-time-picker .fi-input-wrp-suffix {
+    @apply cursor-pointer;
+}