### Manual Installation: Copy .env.example Source: https://devdojo.com/wave/docs/install Copies the example environment file to a new .env file, which will be used to configure your application's settings. This is a crucial first step in manual installation. ```bash cp .env.example .env ``` -------------------------------- ### Database Configuration: MySQL Example Source: https://devdojo.com/wave/docs/install Example of how to configure Wave to use a MySQL database connection by modifying the .env file. This includes setting the connection type, host, port, database name, username, and password. ```dotenv CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=database-name DB_USERNAME=root DB_PASSWORD='' ``` -------------------------------- ### Example installed.json for Wave Plugins Source: https://devdojo.com/wave/docs/features/plugins This JSON file tracks installed plugins by listing their names in an array. It's located in the 'resources/plugins' directory. ```json [ "discussions" ] ``` -------------------------------- ### Manual Installation: Database Migrations and Seed Source: https://devdojo.com/wave/docs/install Applies database migrations to set up the necessary tables and seeds the database with initial data. This ensures your database is ready for Wave to function correctly. ```bash php artisan migrate php artisan db:seed ``` -------------------------------- ### Manual Installation: Install Composer Dependencies Source: https://devdojo.com/wave/docs/install Installs all the necessary PHP dependencies for Wave using Composer. This command reads the composer.json file and downloads the required packages. ```bash composer install ``` -------------------------------- ### Create Project Form Component (PHP/Livewire/Volt) Source: https://devdojo.com/wave/docs/your-functionality This Livewire/Volt component in PHP handles the creation of new projects. It includes form fields for project name, description, start date, and end date, with built-in validation using Livewire's `#[Validate]` attribute. Upon successful submission, it creates a new project associated with the authenticated user and redirects to the projects list. It requires Livewire and Laravel Volt. ```php validate(); $project = auth()->user()->projects()->create($validated); session()->flash('message', 'Project created successfully.'); $this->redirect(route('projects')); } } ?> ``` -------------------------------- ### Complete Blade Layout with Asset Inclusion Source: https://devdojo.com/wave/docs/features/themes This is a full example of an `app.blade.php` layout file. It includes essential meta tags, the title, Filament and Livewire styles, your theme's Vite-managed assets, and a basic body structure. This serves as a starting point for your theme's authenticated user layout. ```blade Example Theme @filamentStyles @livewireStyles @vite(['resources/themes/example/assets/css/app.css', 'resources/themes/example/assets/js/app.js'])

Example Theme

This is a simple example of a blank theme. Click here to view the docs

``` -------------------------------- ### Filament Table Builder Example in Wave Source: https://devdojo.com/wave/docs/features/admin Demonstrates how to use Filament's Table Builder to display and manage API keys for a user. It configures columns for 'name' and 'created_at', and defines actions for viewing, editing, and deleting entries. This example is located in `resources/themes/{theme}/pages/settings/api.blade.php`. ```php public function table(Table $table): Table { return $table->query(Wave\ApiKey::query()->where('user_id', auth()->user()->id)) ->columns([ TextColumn::make('name'), TextColumn::make('created_at')->label('Created'), ]) ->actions([ ViewAction::make() ->slideOver() ->modalWidth('md') ->form([ TextInput::make('name'), TextInput::make('key') // ... ]), EditAction::make() ->slideOver() ->modalWidth('md') ->form([ TextInput::make('name') ->required() ->maxLength(255), // ... ]), DeleteAction::make(), ]); } ``` -------------------------------- ### Project Eloquent Model (PHP) Source: https://devdojo.com/wave/docs/your-functionality This PHP code defines the Eloquent model for the 'projects' table. It specifies the fillable attributes, date casting for start and end dates, and defines a belongsTo relationship with the User model. This model is used to interact with project data in the database. ```php namespace App\Models; use Illuminate\Database\Eloquent\Model; class Project extends Model { protected $fillable = [ 'name', 'description', 'start_date', 'end_date', 'user_id', ]; protected $casts = [ 'start_date' => 'date', 'end_date' => 'date', ]; public function user() { return $this->belongsTo(User::class); } } ``` -------------------------------- ### Create Projects Table Migration (PHP) Source: https://devdojo.com/wave/docs/your-functionality This PHP code defines a database migration for creating the 'projects' table. It includes columns for project details like name, description, dates, and a foreign key to the user. It specifies how to create and drop the table. ```php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateProjectsTable extends Migration { public function up() { Schema::create('projects', function (Blueprint $table) { $table->id(); $table->string('name'); $table->text('description')->nullable(); $table->date('start_date')->nullable(); $table->date('end_date')->nullable(); $table->foreignId('user_id')->constrained()->onDelete('cascade'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('projects'); } } ``` -------------------------------- ### Filament Form Builder Example in Wave Source: https://devdojo.com/wave/docs/features/admin Illustrates the use of Filament's Form Builder to create a form for generating new API keys. The form consists of a single 'key' input field. This example is found within the `resources/themes/{theme}/pages/settings/api.blade.php` file. ```php public function form(Form $form): Form { return $form ->schema([ TextInput::make('key') ->label('Create a new API Key') ->required() ]) ->statePath('data'); } ``` -------------------------------- ### Livewire Volt Single-File Component Example (PHP) Source: https://devdojo.com/wave/docs/concepts/volt This snippet demonstrates a single-file Volt component using Livewire for a todo list application. It includes state management for todos, input validation, adding new todos, and computing the number of remaining tasks. The component is rendered within a Blade layout. ```php todos = [ ['todo' => 'Install Wave Application', 'completed' => true,], ['todo' => 'Read the documentation', 'completed' => false,], ['todo' => 'Learn how to use folio and volt', 'completed' => false,], ['todo' => 'Add the todos single-file volt component', 'completed' => false,], ['todo' => 'See how simple Wave will make your life', 'completed' => false,] ]; } public function add() { $this->validate(); $this->todos[] = [ 'todo' => $this->todo, 'completed' => false, ]; $this->reset('todo'); } #[Computed] public function remaining() { return collect($this->todos)->where('completed', false)->count(); } } ?> @volt('todos')

My Todo

You have {{ $this->remaining }} things on your todo list.

@foreach($todos as $todo)
@endforeach
@endvolt ``` -------------------------------- ### Projects Listing Page with Volt (PHP/Blade) Source: https://devdojo.com/wave/docs/your-functionality This PHP/Blade code creates a Volt component for the projects index page. It includes authentication middleware, defines the page name, and implements a Livewire component to fetch, display, and delete user projects. It handles cases where no projects exist and provides edit/delete actions. ```php projects = auth()->user()->projects()->latest()->get(); } public function deleteProject(Project $project) { $project->delete(); $this->projects = auth()->user()->projects()->latest()->get(); } } ?> ``` ```blade @volt('projects')
New Project
@if($projects->isEmpty())

You don't have any projects yet.

@else
@foreach($projects as $project) @endforeach
Name Description Start Date End Date Actions
{{ $project->name }} {{ Str::limit($project->description, 50) }} {{ $project->start_date ? $project->start_date->format('Y-m-d') : 'N/A' }} {{ $project->end_date ? $project->end_date->format('Y-m-d') : 'N/A' }} Edit
@endif @endvolt ``` -------------------------------- ### Create Permission in Code Source: https://devdojo.com/wave/docs/features/roles-permissions This snippet demonstrates how to create a new permission programmatically using the Spatie Permission model. It requires the Spatie Permission package to be installed and configured. ```php use Spatie\Permission\Models\Permission; $permission = Permission::create(['name' => 'edit articles']); ``` -------------------------------- ### Create a New Role (PHP) Source: https://devdojo.com/wave/docs/features/roles-permissions This snippet demonstrates how to programmatically create a new role using the Spatie Permission package. Ensure the Spatie Permission package is installed and configured in your Laravel application. ```php use Spatie\Permission\Models\Role; $role = Role::create(['name' => 'writer']); ``` -------------------------------- ### Create Project Form UI (Blade/Livewire) Source: https://devdojo.com/wave/docs/your-functionality This Blade template, integrated with Livewire's `@volt` directive, renders the UI for the project creation form. It includes input fields for project details, error handling for validation messages, and a submit button. It uses custom Blade components for layout and navigation. This snippet relies on the Livewire/Volt component defined above. ```html @volt('projects.create')
@error('name') {{ $message }} @enderror
@error('description') {{ $message }} @enderror
@error('start_date') {{ $message }} @enderror
@error('end_date') {{ $message }} @enderror
Create Project
@endvolt ``` -------------------------------- ### Get Users by Role (PHP) Source: https://devdojo.com/wave/docs/features/roles-permissions This snippet illustrates how to retrieve all users who have been assigned a specific role. It uses the User model and the role scope provided by the Spatie Permission package. This is helpful for fetching user lists based on their assigned roles. ```php $users = User::role('writer')->get(); ``` -------------------------------- ### Get Access Token from API Key Source: https://devdojo.com/wave/docs/features/api Submit a POST request with your API key to obtain an access token. This token is used to authenticate subsequent API requests. ```APIDOC ## Get Access Token from API Key ### Description To get an **Access Token** using an API Key, you can submit a POST request to the `/api/token` endpoint, including your API key as a query parameter. ### Method POST ### Endpoint `/api/token?key=API_KEY_HERE` ### Parameters #### Query Parameters - **key** (string) - Required - Your unique API Key. ### Response #### Success Response (200) - **access_token** (string) - The generated access token for API authentication. ### Response Example ```json { "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC93YXZlLnRlc3RcL2FwaVwvdG9rZW4iLCJpYXQiOjE1Mzk4MDg4OTUsImV4cCI6MTUzOTgxMjQ5NSwibmJmIjoxNTM5ODA4ODk1LCJqdGkiOiJRdTViYnhwdlBkNE9tT3ZZIiwic3ViIjoyLCJwcnYiOiI4N2UwYWYxZWY5ZmQxNTgxMmZkZWM5NzE1M2ExNGUwYjA0NzU0NmFhIn0.AJNTXTlnI74ZyPw2rqvEaI7P5YPaLnZNWcCBBmRX0W0" } ``` ``` -------------------------------- ### Assign Role to User (PHP) Source: https://devdojo.com/wave/docs/features/roles-permissions This code shows how to assign a specific role to the currently authenticated user. It includes an example of first removing all existing roles before assigning the new one. This is useful for scenarios where a user should only have one role. ```php auth()->user()->syncRoles([]); auth()->user()->assignRole('writer'); ``` -------------------------------- ### Return Theme View in Laravel Source: https://devdojo.com/wave/docs/features/themes This code snippet demonstrates how to return a view file located within the active theme directory using the 'theme::' namespace in Laravel. It assumes the theme is correctly installed and activated. ```php return view('theme::home'); ``` -------------------------------- ### Get Access Token from Login Source: https://devdojo.com/wave/docs/features/api Obtain an access token by sending a POST request with user credentials (email and password). This method is suitable for authenticating users directly. ```APIDOC ## Get Access Token from Login ### Description To get an **Access Token** from a User Login, you can perform a POST request to the `/api/login` endpoint, providing the user's email and password as query parameters. ### Method POST ### Endpoint `/api/login?email=admin@admin.com&password=password` ### Parameters #### Query Parameters - **email** (string) - Required - The user's email address. - **password** (string) - Required - The user's password. ### Response #### Success Response (200) - **access_token** (string) - The generated access token for API authentication. - **token_type** (string) - The type of token, usually 'bearer'. - **expires_in** (integer) - The token's expiration time in seconds. ### Response Example ```json { "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC93YXZlLnRlc3RcL2FwaVwvbG9naW4iLCJpYXQiOjE1Mzk4MTE0NjUsImV4cCI6MTUzOTgxNTA2NSwibmJmIjoxNTM5ODExNDY1LCJqdGkiOiJKRWljOGdTWFp4S0VjaWh1Iiwic3ViIjoxLCJwcnYiOiI4N2UwYWYxZWY5ZmQxNTgxMmZkZWM5NzE1M2ExNGUwYjA0NzU0NmFhIn0._1oFRK-zeUKMpvCcg8kmM86avzzmI--yQnI4KRwYk1k", "token_type": "bearer", "expires_in": 60 } ``` ``` -------------------------------- ### Define User Projects Relationship (PHP) Source: https://devdojo.com/wave/docs/your-functionality This PHP function defines a one-to-many relationship between a user and their projects using Laravel's Eloquent ORM. It specifies that a User model 'hasMany' Project models. No external dependencies are required beyond Laravel's Eloquent. ```php public function projects() { return $this->hasMany(Project::class); } ``` -------------------------------- ### Component Slot Usage in Wave Theme Source: https://devdojo.com/wave/docs/features/themes This Blade example shows how to use a custom component named 'button'. By placing the file in the `resources/views/components` directory (or similar), you can reference it directly using its name without the `components.` prefix, simplifying component usage. ```blade Button Text ``` -------------------------------- ### Get Access Token from API Key (POST) Source: https://devdojo.com/wave/docs/features/api Submit a POST request to this endpoint with your API key to obtain an access token. This token is essential for retrieving data from your application's API. The response contains the access token required for subsequent API calls. ```http POST /api/token?key=API_KEY_HERE ``` -------------------------------- ### Get Unread Notification Count Source: https://devdojo.com/wave/docs/features/notifications This code snippet retrieves the number of unread notifications for the currently authenticated user. It accesses the `unreadNotifications` property of the user model and then counts the items in the collection. ```php auth()->user()->unreadNotifications->count() ``` -------------------------------- ### Get Access Token from Login (POST) Source: https://devdojo.com/wave/docs/features/api Generate an access token by submitting a POST request with user credentials (email and password) to the login endpoint. This method provides an access token along with its type and expiration time, facilitating API access for authenticated users. ```http POST /api/login?email=admin@admin.com&password=password ``` -------------------------------- ### Customize Notification Data Array Source: https://devdojo.com/wave/docs/features/notifications This example demonstrates how to define the data payload for a notification when it's sent to the database. The `toArray` method returns an array containing details such as an icon, a descriptive body, a link for redirection, and user-specific information, which can be used in the notification's UI. ```php public function toArray($notifiable) { return [ 'icon' => '/storage/users/default.png', 'body' => 'This is an example, when the user clicks this notification it will go to the link.', 'link' => '/dashboard', 'user' => [ 'name' => 'John Doe' ] ]; } ``` -------------------------------- ### Blade Directive for Role Check (Blade) Source: https://devdojo.com/wave/docs/features/roles-permissions This example shows how to use a Blade directive to conditionally display content based on whether the current user has a specific role. This is a convenient way to manage UI elements related to user roles directly within your views. ```blade @role('writer') I am a writer! @else I am not a writer... @endrole ``` -------------------------------- ### ExamplePlugin boot method for Wave Source: https://devdojo.com/wave/docs/features/plugins The 'boot' method in a Wave plugin class is used to load core functionalities like views, migrations, routes, and Livewire components during application startup. ```php public function boot() { // Load views for the ExamplePlugin $this->loadViewsFrom(__DIR__ . '/resources/views', 'example'); // Load migrations for the ExamplePlugin $this->loadMigrationsFrom(__DIR__ . '/database/migrations'); // Load routes for the ExamplePlugin $this->loadRoutesFrom(__DIR__ . '/routes/web.php'); // Register a Livewire component for the ExamplePlugin Livewire::component('example-component', \App\Plugins\ExamplePlugin\Components\ExampleComponent::class); } ``` -------------------------------- ### ExamplePlugin register method for Wave Source: https://devdojo.com/wave/docs/features/plugins The 'register' method in a Wave plugin class is used for registering services, configurations, and utilities before other plugins' boot methods are executed. It's ideal for setting up dependencies. ```php public function register() { // Bind an interface to a concrete implementation $this->app->bind('App\Contracts\SomeServiceInterface', 'App\Services\SomeService'); // Register a singleton service $this->app->singleton('SomeUtility', function ($app) { return new \App\Utilities\SomeUtility(); }); } ``` -------------------------------- ### API Testing Instructions Source: https://devdojo.com/wave/docs/features/api Instructions on how to test your Wave API using Insomnia and setting up the base URL. ```APIDOC ## API Testing with Insomnia ### Description This section provides guidance on testing your application's API endpoints using the third-party tool Insomnia. ### Steps 1. **Download Insomnia**: Obtain the Insomnia application from their official website. 2. **Import API Endpoints**: Download the `wave-3-api-endpoints.json` file from [https://github.com/thedevdojo/laravel-wave-api-endpoints](https://github.com/thedevdojo/laravel-wave-api-endpoints) and import it into Insomnia. 3. **Configure BASE_URL**: Within Insomnia, locate and change the `BASE_URL` variable. The default testing URL is `https://wave.test`, but you should replace it with your application's local URL. * Click on the `base_url` icon at the beginning of any endpoint. * Update the `base_url` value to your application's URL. 4. **Test API Endpoints**: After configuring the `BASE_URL`, you are ready to test your API endpoints. ``` -------------------------------- ### Build Assets for Production (npm) Source: https://devdojo.com/wave/docs/features/themes Builds theme assets for a production environment. This command is equivalent to the default Laravel `build` command and utilizes Laravel Vite for asset bundling. For customization, refer to Laravel Vite documentation. ```bash npm run build ``` -------------------------------- ### Create Project in Laravel (PHP) Source: https://devdojo.com/wave/docs/guides/using-filament-with-volt This snippet demonstrates the server-side logic for creating a new project using Laravel's authentication and Eloquent ORM. It also includes form filling, modal closing, and success notification dispatch. ```php $project = auth()->user()->projects()->create($data); $this->form->fill(); $this->dispatch('close-modal', id: 'create-project'); Notification::make() ->success() ->title('Project created successfully') ->send(); } } ?> ``` -------------------------------- ### User Registration API Source: https://devdojo.com/wave/docs/features/api Allows for the registration of new users via a POST request to the /api/register endpoint. ```APIDOC ## POST /api/register ### Description Allows for the registration of new users. Upon successful registration, an Access Token is provided for API data access. ### Method POST ### Endpoint /api/register ### Parameters #### Query Parameters - **name** (string) - Required - The name of the user. - **username** (string) - Required - The username for the new account. - **email** (string) - Required - The email address for the new account. - **password** (string) - Required - The password for the new account. ### Request Example ``` /api/register?name=John Doe&username=jdoe&email=jdoe@gmail.com&password=pass ``` ### Response #### Success Response (200) - **access_token** (string) - The token provided for accessing API data. #### Response Example ```json { "access_token": "your_generated_access_token" } ``` ``` -------------------------------- ### Register User via API POST Request Source: https://devdojo.com/wave/docs/features/api This snippet demonstrates how to register a new user by sending a POST request to the /api/register endpoint with user details as query parameters. Upon successful registration, an Access Token is provided. ```http POST /api/register?name=John Doe&username=jdoe&email=jdoe@gmail.com&password=pass ``` -------------------------------- ### Listen to Stripe Webhook Events Locally Source: https://devdojo.com/wave/docs/features/billing This command utilizes the Stripe CLI to forward webhook events to your local development environment. Ensure you replace the placeholder URL with your actual local development server address. The output provides the webhook signing secret necessary for your application's .env file. ```bash stripe listen --forward-to https://wave.test/webhook/stripe ``` -------------------------------- ### Displaying Projects with Filament Table Builder in Wave Source: https://devdojo.com/wave/docs/guides/using-filament-with-volt This code snippet utilizes Filament's Table Builder to create a sortable and searchable table displaying user projects. It queries the 'projects' table, filtering by the authenticated user's ID, and defines columns for project name, description, dates, and creation time. Dependencies include Filament, Livewire, and Laravel Folio. ```php query(Project::query()->where('user_id', auth()->id())) ->columns([ TextColumn::make('name') ->searchable() ->sortable(), TextColumn::make('description') ->limit(50) ->searchable(), TextColumn::make('start_date') ->date() ->sortable(), TextColumn::make('end_date') ->date() ->sortable(), TextColumn::make('created_at') ->dateTime() ->sortable() ->toggleable(isToggledHiddenByDefault: true), ]) ->defaultSort('created_at', 'desc'); } }; ?> @volt('projects')
New Project
{{ $this->table }}
@endvolt ``` -------------------------------- ### Stripe API Credentials in .env Source: https://devdojo.com/wave/docs/features/billing This snippet demonstrates how to add your Stripe Publishable Key and Secret Key to your application's .env file. These keys are essential for Wave to communicate with the Stripe API for processing payments. ```env STRIPE_PUBLISHABLE_KEY=pk_test_51... STRIPE_SECRET_KEY=sk_test_51... ``` -------------------------------- ### Homepage View for a Theme (Blade) Source: https://devdojo.com/wave/docs/features/themes A simple Blade template for the homepage of a theme. It includes basic HTML structure, Tailwind CSS for styling, and displays a welcome message with a link to the documentation. This file is placed within the `pages` directory of a theme. ```blade Example Theme

Example Theme

This is a simple example of a blank theme. Click here to view the docs

``` -------------------------------- ### Run Composer Autoload Source: https://devdojo.com/wave/docs/upgrading This command regenerates the autoloader files for Composer dependencies. It is essential after making changes to the project's dependencies or core files to ensure that all classes are correctly recognized and loaded. ```bash composer dump-autoload ``` -------------------------------- ### Configure Paddle Environment Source: https://devdojo.com/wave/docs/features/billing Sets the Paddle environment mode within the .env file. Options include 'sandbox' for testing and 'production' for live operations. This configuration is crucial for directing API calls to the correct Paddle environment. ```env PADDLE_ENV=sandbox ``` -------------------------------- ### Livewire Component for Project Management (PHP) Source: https://devdojo.com/wave/docs/guides/using-filament-with-volt This Livewire component structure defines the front-end for project management. It utilizes DevDojo's Blade components for layout, modals, buttons, and tables, enabling a dynamic user interface for project operations. ```php @volt('projects')
New Project

Create Project
{{ $this->form }}
Create Project
{{ $this->table }}
@endvolt ``` -------------------------------- ### Include Filament, Livewire, and Theme Assets in Blade Layout Source: https://devdojo.com/wave/docs/features/themes This Blade code demonstrates the recommended order for including styles in your layout's . It first includes Filament and Livewire styles, followed by your theme's CSS and JavaScript assets managed by Vite. This ensures correct CSS cascade and script injection. ```blade @filamentStyles @livewireStyles @vite(['resources/themes/example/assets/css/app.css', 'resources/themes/example/assets/js/app.js']) ``` -------------------------------- ### Theme Definition File (JSON) Source: https://devdojo.com/wave/docs/features/themes Defines the metadata for a theme, including its display name and version. This file is used by the system to identify and manage themes. The `name` field is particularly important as it's referenced in `vite.config.js`. ```json { "name": "anchor" } ``` ```json { "name": "Example", "version": "1.0" } ``` -------------------------------- ### Configure Paddle API Credentials Source: https://devdojo.com/wave/docs/features/billing Stores Paddle API credentials in the .env file. This includes the Vendor ID, API Key, and Client-side Token, which are obtained from the Paddle Dashboard under Developer Tools -> Authentication. These credentials are required for authenticating with the Paddle API. ```env PADDLE_VENDOR_ID=9999 PADDLE_API_KEY=... PADDLE_CLIENT_SIDE_TOKEN=... ``` -------------------------------- ### Vite Configuration for Theme Assets (JavaScript) Source: https://devdojo.com/wave/docs/features/themes Configures Vite to compile assets based on the active theme. It reads the `theme.json` file to dynamically determine the active theme and includes its CSS and JavaScript files, along with Filament admin CSS. It also enables asset refreshing for theme files. ```javascript const path = require('path'); const fs = require('fs'); const { defineConfig: defineConfig } = require('vite'); const laravel = require('laravel-vite-plugin'); const themeFilePath = path.resolve(__dirname, 'theme.json'); const activeTheme = fs.existsSync(themeFilePath) ? JSON.parse(fs.readFileSync(themeFilePath, 'utf8')).name : 'anchor'; console.log(`Active theme: ${activeTheme}`); module.exports = defineConfig({ plugins: [ laravel({ input: [ `resources/themes/${activeTheme}/assets/css/app.css`, `resources/themes/${activeTheme}/assets/js/app.js`, 'resources/css/filament/admin/theme.css', ], refresh: [ `resources/themes/${activeTheme}/**/*`, ], }), ], }); ``` -------------------------------- ### Filament Table and Form for Project Management (PHP) Source: https://devdojo.com/wave/docs/guides/using-filament-with-volt This PHP code snippet integrates Filament's Table and Form builders within a Livewire Volt component. It defines a table to display projects with search, sort, and action capabilities (view, edit, delete). It also defines a form schema for creating and editing projects, utilizing various components like TextInput, Textarea, and DatePicker. The form state is managed by the 'data' property, and actions trigger notifications upon completion. ```php query(Project::query()->where('user_id', auth()->id())) ->columns([ TextColumn::make('name') ->searchable() ->sortable(), TextColumn::make('description') ->limit(50) ->searchable(), TextColumn::make('start_date') ->date() ->sortable(), TextColumn::make('end_date') ->date() ->sortable(), TextColumn::make('created_at') ->dateTime() ->sortable() ->toggleable(isToggledHiddenByDefault: true), ]) ->defaultSort('created_at', 'desc') ->actions([ ViewAction::make() ->slideOver() ->modalWidth('md') ->form([ TextInput::make('name') ->disabled(), Textarea::make('description') ->disabled(), DatePicker::make('start_date') ->disabled(), DatePicker::make('end_date') ->disabled(), ]), EditAction::make() ->slideOver() ->modalWidth('md') ->form([ TextInput::make('name') ->required() ->maxLength(255), Textarea::make('description') ->maxLength(1000), DatePicker::make('start_date'), DatePicker::make('end_date') ->after('start_date'), ]), DeleteAction::make() ->after(function () { Notification::make() ->success() ->title('Project deleted') ->send(); }) ->mutateFormDataUsing(function (array $data): array { $data['user_id'] = auth()->id(); return $data; }) ->after(function () { Notification::make() ->success() ->title('Project created') ->send(); }), ]) ->filters([ // Add any filters you want here ]) ->bulkActions([ Tables\Actions\BulkActionGroup::make([ Tables\Actions\DeleteBulkAction::make(), ]), ]); } public function form(Form $form): Form { return $form ->schema([ TextInput::make('name') ->required() ->maxLength(255), Textarea::make('description') ->maxLength(1000), DatePicker::make('start_date'), DatePicker::make('end_date') ->after('start_date'), ]) ->statePath('data'); } public function create(): void { $data = $this->form->getState(); ``` -------------------------------- ### Assign Permission to Role and User Source: https://devdojo.com/wave/docs/features/roles-permissions These snippets show how to assign an existing permission to a role and directly to a user. Ensure the role exists and the user is authenticated for direct assignment. The `givePermissionTo` method is used for direct assignment. ```php use Spatie\Permission\Models\Role; $role = Role::where('name', 'writer')->first(); $role->givePermissionTo('edit articles'); ``` ```php auth()->user()->givePermissionTo('edit articles'); ``` -------------------------------- ### Basic CSS for Tailwind CSS in Wave Theme Source: https://devdojo.com/wave/docs/features/themes This CSS file is the entry point for Tailwind CSS in a Wave theme. It includes the necessary directives to process Tailwind's base, component, and utility classes. Ensure this file is correctly referenced in your Blade layout. ```css @tailwind base; @tailwind components; @tailwind utilities; ``` -------------------------------- ### Configure Billing Provider in Wave.php Source: https://devdojo.com/wave/docs/features/billing This configuration snippet shows how to set the default billing provider within the Wave application. It reads the BILLING_PROVIDER environment variable, defaulting to 'stripe' if not set. This file is crucial for determining which payment gateway Wave will use. ```php env('BILLING_PROVIDER', 'stripe'), ... ]; ``` -------------------------------- ### Include Partial View in Blade Source: https://devdojo.com/wave/docs/features/themes Demonstrates how to include a reusable partial view within a Blade template using the 'theme::' namespace. This is useful for common UI elements like alerts. ```blade @include('theme::partials.alert') ``` -------------------------------- ### Clear Application Cache Source: https://devdojo.com/wave/docs/upgrading This command clears the application's cache. It's often necessary after upgrades or configuration changes to ensure that the latest versions of files and settings are being used, preventing potential issues with stale cached data. ```bash php artisan cache:clear ``` -------------------------------- ### Compile Assets with HMR (npm) Source: https://devdojo.com/wave/docs/features/themes Compiles theme assets and serves them with Hot Module Reloading enabled. This command is used during development for automatic asset updates and browser refreshes upon file changes. ```bash npm run dev ```