+
+Next, let's see what it would take to implement the project creation in the `projects/create.blade.php` file:
+
+## Using the Form Builder
+
+We can easily utilize the Filament Form builder to simplify the creation of our projects. Here's what the code looks like for our `projects/create.blade.php` file:
+
+**resources/themes/{theme}/pages/projects/create.blade.php**
+
+```php
+form->fill();
+ }
+
+ 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();
+
+ auth()->user()->projects()->create($data);
+
+ $this->form->fill();
+
+ Notification::make()
+ ->success()
+ ->title('Project created successfully')
+ ->send();
+
+ $this->redirect('/projects');
+ }
+ }
+?>
+
+
+
+Utilizing the FilamentPHP form and table builder we can simplify the process even more by combining the table and form builder into a single Volt Page. Let's take a look at that below.
+
+## Combining the Table and Form Builder
+
+We can simplify the process of viewing, creating, editing, and deleting our projects by creating a single Volt Page that will handle all these operations for us. We can combine the **table** and **form** builder, like so:
+
+**resources/themes/{theme}/pages/projects/index.blade.php**
+
```php
+ public function table(Table $table): Table
+ {
+ return $table
+ ->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();
+
+ $project = auth()->user()->projects()->create($data);
+
+ $this->form->fill();
+
+ Notification::make()
+ ->success()
+ ->title('Project created successfully')
+ ->send();
+ }
+ }
+?>
+
+
+
+As you can see, when you click on the `edit` button next to a project a slide-over will open allowing you to edit the details for this project.
+
+
+
+You can also click the **New Project** button and you'll see a slide-over open allowing you to create a new project.
+
+
+
+Combining the Table and the Form builder in the same page will make it easer to add functionality to our application.
+
diff --git a/content/docs/your-functionality.md b/content/docs/your-functionality.md
index 3277312..06a0af7 100644
--- a/content/docs/your-functionality.md
+++ b/content/docs/your-functionality.md
@@ -299,4 +299,4 @@ This is just an example of how you can add custom logic for your application. Bu
## Using FilamentPHP
-FilamentPHP is used for the Admin section of Wave; however, it also provides a collection of components that we can utilize to make building our application even easier. This includes the Table Builder and the Form Builder. If you want to see how we can use the Table and Form Builder using this same Project Example, be sure to visit the Using Filament With Volt Guide.
\ No newline at end of file
+FilamentPHP is used for the Admin section of Wave; however, it can also be used for much more. In addition to an Admin Panel builder Filament also provides a collection of very useful components, such as the Table Builder and the Form Builder. Visit the Using Filament With Volt Guide to learn how to utilze them in your app.
\ No newline at end of file
diff --git a/includes/docs-sidebar.html b/includes/docs-sidebar.html
index 20dd036..0098e3b 100644
--- a/includes/docs-sidebar.html
+++ b/includes/docs-sidebar.html
@@ -291,7 +291,7 @@