use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema;

return new class extends Migration { /** * Run the migrations. */ public function up(): void { Schema::create('events', function (Blueprint $table) { $table->id(); $table->string('name'); $table->date('date'); $table->time('start'); $table->timestamps(); }); }

<em>/**</em>

* Reverse the migrations. */ public function down(): void { Schema::dropIfExists('events'); } };Replace model Event.php<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model;

class Event extends Model { use HasFactory;

protected $guarded = [];

}jalankan perintah migratephp artisan migratebuat filament resource Eventphp artisan make:filament-resource Eventmembuat resource dengan panel userInstallasi dan Configurasi WireUIinstall component tailwindcss https://livewire-wireui.com/docs/get-startednpm i -D @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/typography tippy.jsjalankan compile mode developmentnpm run devinstall WIreUIcomposer require wireui/wireuiConfigurasi Blade pada FilamenServiceProvidermenambahkan @wireUiScriptsmembuat filamentServiceProviderphp artisan make:provider FilamentServiceProviderbuka file FilamentServiceProvider use Filament/Facades/Filament; use Illuminate/Support/Facades/Blade; ... public function boot():void { Filament::registerRenderHook( 'head:start', fn (): string => Blade::render('@wireUiScripts') ) }daftarkan FilamentServiceProvider.php pada config/app.phpApp\Providers\FilamentServiceProvider::class,tambahkan script berikut pada <strong>tailwind.config.jsimport colors from 'tailwindcss/colors' import forms from '@tailwindcss/forms' import typography from '@tailwindcss/typography'

module.exports = { ... presets: [ ... require('./vendor/wireui/wireui/tailwind.config.js') ], theme: { extend: { colors: { danger: colors.rose, primary: colors.blue, success: colors.green, warning: colors.yellow, }, }, }, content: [ ... './vendor/wireui/wireui/resources//*.blade.php', './vendor/wireui/wireui/ts//.ts', './vendor/wireui/wireui/src/View/**/.php' './vendor/filament/**/*.blade.php', ], plugins: [ forms, typography, ], ...}kemudian pada file vite.config.js tambahkan kode berikut:import { defineConfig } from 'vite' import laravel from 'laravel-vite-plugin'

export default defineConfig({ plugins: [ laravel({ input: [ // ... 'resources/css/filament.css', ], // ... }), ], })kemudian buat file resource/css/filament.css@import '../../vendor/filament/filament/resources/css/app.css';kemudian pada FilamentServiceProvider.php  tambahkan kode berikut:use Filament\Facades\Filament;

Filament::serving(function () { // Using Vite Filament::registerViteTheme('resources/css/filament.css'); }); atau bisa tambahkan baris ini saja pada function bootFilament::registerViteTheme('resources/css/filament.css');buat component TimePicker baruphp artisan make:form-field TimePickerakan tergenerate 2 file baru pada app/Forms/Components/TimePicker.php dan resources/view/forms/components/time-picker.blade.phpreplace kode time-picker.blade.php menjadi seperti berikutlaravel 10+<x-dynamic-component :component="$getFieldWrapperView()" :field="$field" > <x-time-picker placeholder="12:00 AM" wire:model.defer="{{ $getStatePath() }}" :errorless="true" class="!shadow-none" > </x-time-picker> </x-dynamic-component>laravel 9<x-dynamic-component :component="$getFieldWrapperView()" :id="$getId()" :label="$getLabel()" :label-sr-only="$getLabelHidden()" :helper-text="$getHelperText()" :hint="$getHint()" :hint-action="$getHintAction()" :hint-color="$getHintColor()" :hint-icon="$getHintIcon()" :required="$isRequired()" :state-path="$getStatePath()" > <x-time-picker placeholder="12:00 AM" wire:model.defer="{{ $getStatePath() }}" :errorless="true" class="!shadow-none" > </x-time-picker> </x-dynamic-component>kemudian pada EventResource.php rubah pada bagian TimePicker\App\Forms\Components\TimePicker::make('start') ->required()