Renamed and reorganized Livewire components, namespaces, and views for improved file structure and clarity. Introduced filaments.show and filaments.edit routes. Updated database migrations and navigation routes accordingly. Upgraded dependencies in composer.

app/Livewire/Buildplate/Buildplate.php

@@ -1,7 +1,8 @@
 <?php
 
-namespace App\Livewire\Filament;
+namespace App\Livewire\Buildplate;
 
+use App\Models\Buildplate as BuildplateModel;
 use App\Models\Manufacturer as Manufacturer;
 use Flux\Flux;
 use Illuminate\Support\Facades\Auth;
@@ -9,7 +10,6 @@ use Livewire\Attributes\Title;
 use Livewire\Attributes\Validate;
 use Livewire\Component;
 use Livewire\WithPagination;
-use App\Models\Buildplate as BuildplateModel;
 
 #[title('Buildplates')]
 class Buildplate extends Component
@@ -125,7 +125,7 @@ class Buildplate extends Component
 
     public function render()
     {
-        return view('livewire.filament.buildplate', [
+        return view('livewire.buildplate.index', [
             'buildplates' => BuildplateModel::search('name', $this->search)->paginate(20),
             'manufacturers' => Manufacturer::all(),
         ]);

app/Livewire/Color/Color.php

@@ -1,15 +1,14 @@
 <?php
 
-namespace App\Livewire\Filament;
+namespace App\Livewire\Color;
-
-use Livewire\WithPagination;
-use Livewire\Attributes\Validate;
-use Livewire\Component;
-use Livewire\Attributes\title;
-use Illuminate\Support\Facades\Auth;
-use Flux\Flux;
 
 use App\Models\Color as ColorModel;
+use Flux\Flux;
+use Illuminate\Support\Facades\Auth;
+use Livewire\Attributes\title;
+use Livewire\Attributes\Validate;
+use Livewire\Component;
+use Livewire\WithPagination;
 
 #[title('Colors')]
 class Color extends Component
@@ -112,7 +111,7 @@ class Color extends Component
     }
     public function render()
     {
-        return view('livewire.filament.color', [
+        return view('livewire.color.index', [
             'colors' => ColorModel::search('name', $this->search)->paginate(20)
         ]);
     }

app/Livewire/Dashboard.php

@@ -12,7 +12,7 @@ class Dashboard extends Component
     public function render()
     {
         return view('livewire.dashboard', [
-            'manufacturers' => Manufacturer::all()->sortBy('filament_count')->reverse()
+            'manufacturer' => Manufacturer::all()->sortBy('filament_count')->reverse()
         ]);
     }
 }

app/Livewire/Filament/CreateFilament.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Livewire\Filament;
+
+use Livewire\Component;
+use App\Models\Filament as Model;
+use App\Models\Manufacturer;
+use Livewire\WithPagination;
+use Livewire\Attributes\title;
+
+#[title('Show Filament')]
+class CreateFilament extends Component
+{
+
+    public Model $filament ;
+
+    public function back(){
+        return redirect()->route('filaments.index');
+    }
+
+    public function render()
+    {
+        return view('livewire.filament.edit-filament', [
+            'manufacturers' => Manufacturer::all(),
+            'colors' => \App\Models\Color::all(),
+            'types' => \App\Models\FilamentType::all()
+        ]);
+    }
+}

app/Livewire/Filament/EditFilament.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Livewire\Filament;
+
+use Livewire\Component;
+use App\Models\Filament as Model;
+use App\Models\Manufacturer;
+use Livewire\WithPagination;
+use Livewire\Attributes\title;
+
+#[title('Show Filament')]
+class EditFilament extends Component
+{
+
+    public Model $filament ;
+
+    public function back(){
+        return redirect()->route('filaments.index');
+    }
+
+    public function show($id){
+        return redirect()->route('filaments.show', $id);
+    }
+
+    public function mount(Model $filament){
+        $this->filament = $filament;
+    }
+
+    public function render()
+    {
+        return view('livewire.filament.edit', [
+            'manufacturers' => Manufacturer::all(),
+            'colors' => \App\Models\Color::all(),
+            'types' => \App\Models\FilamentType::all()
+        ]);
+    }
+}

app/Livewire/Filament/Filament.php

@@ -63,27 +63,6 @@ class Filament extends Component
         Flux::modal('createModal')->close();
     }
 
-    public function edit($filamentid) {
-        @Auth::check();
-
-        $editid = $filamentid;
-        $this->editid = $editid;
-
-        $filament = Model::findOrFail($editid);
-
-        $this->name = $filament->name;
-        $this->description = $filament->description;
-        $this->diameter = $filament->diameter;
-        $this->color_id = $filament->color_id;
-        $this->type_id = $filament->filament_type_id;
-        $this->manufacturer_id = $filament->manufacturer_id;
-        $this->weight = $filament->weight;
-        $filament->finish = $this->finish;
-        $this->price = $filament->price;
-        $this->stock = $filament->stock;
-
-        Flux::modal('editModal')->show();
-    }
     public function save($editid) {
         @Auth::check();
 
@@ -144,9 +123,18 @@ class Filament extends Component
     public function resetInputFields() {
         $this->reset(['name', 'description', 'diameter', 'color_id', 'type_id', 'manufacturer_id', 'weight', 'price', 'finish', 'deleteid', 'editid']);
     }
+
+    public function show($id){
+        return redirect()->route('filaments.show', $id);
+    }
+
+    public function edit($id){
+        return redirect()->route('filaments.edit', $id);
+    }
+
     public function render()
     {
-        return view('livewire.filament.filament', [
+        return view('livewire.filament.index', [
             'filaments' => Model::search('name', $this->search)->paginate(50),
             'colors' => Color::all(),
             'manufacturers' => Manufacturer::all(),

app/Livewire/Filament/ShowFilament.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Livewire\Filament;
+
+use Livewire\Component;
+use App\Models\Filament as Model;
+use Livewire\WithPagination;
+use Livewire\Attributes\title;
+
+#[title('Show Filament')]
+class ShowFilament extends Component
+{
+
+    public Model $filament ;
+
+    public function back(){
+        return redirect()->route('filaments.index');
+    }
+
+    public function edit($id){
+        return redirect()->route('filaments.edit', $id);
+    }
+
+    public function mount(Model $filament){
+        $this->filament = $filament;
+    }
+
+    public function render()
+    {
+        return view('livewire.filament.show-filament', [
+
+        ]);
+    }
+}

app/Livewire/Filament/Type.php

@@ -1,116 +0,0 @@
-<?php
-
-namespace App\Livewire\Filament;
-
-use Livewire\Component;
-use Livewire\Attributes\title;
-use Livewire\WithPagination;
-use Livewire\Attributes\Validate;
-use Illuminate\Support\Facades\Auth;
-use App\Models\FilamentType;
-use Flux\Flux;
-
-#[title('Types')]
-class Type extends Component
-{
-    use WithPagination;
-
-    // Validation
-    #[Validate('required')]
-    public $name = '';
-
-    public $description = '';
-
-    public $search ='';
-
-    public $editid = '';
-    public $deleteid = '';
-
-    public $amount = '0';
-
-
-    public function create() {
-        @Auth::check();
-
-
-        // Validate
-        $this->validate();
-
-        $type = new FilamentType();
-        $type->name = $this->name;
-        $type->description = $this->description;
-        $type->save();
-
-        // Clear the form
-        $this->resetInputFields();
-
-        // Close the modal
-        Flux::modal('createModal')->close();
-    }
-
-    public function edit($typeid) {
-        @Auth::check();
-
-        $editid = $typeid;
-        $this->editid = $editid;
-
-        $type =FilamentType::findOrFail($editid);
-
-        $this->name = $type->name;
-        $this->description = $type->description;
-
-        Flux::modal('editModal')->show();
-    }
-
-    public function save($editid) {
-        @Auth::check();
-
-        $type = FilamentType::findOrFail($editid);
-        $type->name = $this->name;
-        $type->description = $this->description;
-        $type->save();
-
-        $this->resetInputFields();
-
-        Flux::modal('editModal')->close();
-    }
-    public function deleteModal($typeid) {
-        @Auth::check();
-
-        $deleteid = $typeid;
-        $this->deleteid = $deleteid;
-
-        $type = FilamentType::findOrFail($deleteid);
-        $this->name = $type->name;
-        $this->description = $type->description;
-
-        Flux::modal('deleteModal')->show();
-    }
-    public function delete($deleteid) {
-        @Auth::check();
-
-        $type = FilamentType::findOrFail($deleteid)->delete();
-
-        $this->deleteid = $deleteid;
-        Flux::modal('deleteModal')->close();
-
-        // Clear the form
-        $this->resetInputFields();
-    }
-
-    public function cancel() {
-        $this->resetInputFields();
-        Flux::modals()->close();
-    }
-
-    public function resetInputFields() {
-        $this->reset(['name', 'description', 'deleteid', 'editid']);
-    }
-    public function render()
-    {
-        return view('livewire.filament.type', [
-            'types' => FilamentType::search('name', $this->search)->paginate(10)
-
-        ]);
-    }
-}

app/Livewire/Manufacturer/Manufacturer.php

@@ -1,15 +1,14 @@
 <?php
 
-namespace App\Livewire\Filament;
+namespace App\Livewire\Manufacturer;
 
-use Livewire\Component;
-use Livewire\WithPagination;
 use App\Models\Manufacturer as Model;
-use Livewire\Attributes\title;
-use Livewire\Attributes\Validate;
 use Flux\Flux;
 use Illuminate\Support\Facades\Auth;
-use App\Models\Filament;
+use Livewire\Attributes\title;
+use Livewire\Attributes\Validate;
+use Livewire\Component;
+use Livewire\WithPagination;
 
 #[title('Manufacturer List')]
 class Manufacturer extends Component{
@@ -107,7 +106,7 @@ class Manufacturer extends Component{
     public function render()
     {
 
-        return view('livewire.filament.manufacturer', [
+        return view('livewire.manufacturer.index', [
             'manufacturers' => Model::search('name', $this->search)->paginate(10)
         ]);
     }

app/Livewire/Type/CreateType.php

@@ -0,0 +1,49 @@
+<?php
+
+namespace App\Livewire\Type;
+
+use App\Models\FilamentType;
+use Flux\Flux;
+use Illuminate\Support\Facades\Auth;
+use Livewire\Attributes\title;
+use Livewire\Attributes\Validate;
+use Livewire\Component;
+use Livewire\WithPagination;
+
+#[title('Types')]
+class CreateType extends Component
+{
+    use WithPagination;
+
+    // Validation
+    #[Validate('required')]
+    public $name = '';
+    public $description = '';
+
+    public $search ='';
+
+    public function save() {
+        @Auth::check();
+
+
+        // Validate
+        $this->validate();
+
+        $type = new FilamentType();
+        $type->name = $this->name;
+        $type->description = $this->description;
+        $type->save();
+
+        return redirect()->route('type.index');
+    }
+
+    public function cancel(){
+        return redirect()->route('type.index');
+    }
+    public function render()
+    {
+        return view('livewire.type.create', [
+
+        ]);
+    }
+}

app/Livewire/Type/EditType.php

@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Livewire\Type;
+
+use App\Models\FilamentType;
+use Illuminate\Support\Facades\Auth;
+use Livewire\Attributes\title;
+use Livewire\Attributes\Validate;
+use Livewire\Component;
+
+#[title('Types')]
+class EditType extends Component
+{
+    public FilamentType $type;
+
+    // Validation
+    #[Validate('required')]
+
+    public function save() {
+        $this->validate([
+            'type.name' => ['required', 'string', 'max:255'],
+            'type.description' => ['nullable', 'string'],
+        ]);
+
+        $this->type->save();
+
+        return redirect()->route('type.show', $this->type->id );
+    }
+
+    public function cancel(){
+        return redirect()->route('type.index');
+    }
+
+    public function mount(FilamentType $type){
+        $this->type = $type;
+    }
+    public function render()
+    {
+        return view('livewire.type.edit', [
+
+        ]);
+    }
+}

app/Livewire/Type/ShowType.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Livewire\Type;
+
+use App\Models\FilamentType;
+use Flux\Flux;
+use Illuminate\Support\Facades\Auth;
+use Livewire\Attributes\title;
+use Livewire\Attributes\Validate;
+use Livewire\Component;
+use Livewire\WithPagination;
+
+#[title('Types')]
+class ShowType extends Component
+{
+    public FilamentType $type;
+
+    public function back(){
+        return redirect()->route('type.index');
+    }
+
+    public function edit($id){
+        return redirect()->route('type.edit', $id);
+    }
+
+    public function mount(FilamentType $type){
+        $this->type = $type;
+    }
+
+    public function render()
+    {
+        return view('livewire.type.show', [
+
+        ]);
+    }
+}

app/Livewire/Type/Type.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Livewire\Type;
+
+use App\Models\FilamentType;
+use Flux\Flux;
+use Illuminate\Support\Facades\Auth;
+use Livewire\Attributes\title;
+use Livewire\Attributes\Validate;
+use Livewire\Component;
+use Livewire\WithPagination;
+
+#[title('Types')]
+class Type extends Component
+{
+    use WithPagination;
+
+    public $search = '';
+
+    // Validation
+    #[Validate('required')]
+
+    public function create() {
+        @Auth::check();
+        return redirect()->route('type.create');
+    }
+    public function edit($id){
+        return redirect()->route('type.edit', $id);
+    }
+    public function show($id){
+        return redirect()->route('type.show', $id);
+    }
+    public function delete($id){
+        @Auth::check();
+        FilamentType::destroy($id);
+    }
+
+    public function render()
+    {
+        return view('livewire.type.index', [
+            'types' => FilamentType::search('name', $this->search)->paginate(10)
+
+        ]);
+    }
+}

app/Models/Color.php

@@ -21,7 +21,7 @@ class Color extends Model
         return $this->hasMany(Filament::class);
     }
 
-    // Color has many filament types
+    // Color has many filament type
     public function filamentTypes()
     {
         return $this->hasMany(FilamentType::class);

app/Models/Manufacturer.php

@@ -23,7 +23,7 @@ class Manufacturer extends Model
         return $this->hasMany(Filament::class);
     }
 
-    // Manufacturer has many filament types
+    // Manufacturer has many filament type
     public function filamentTypes()
     {
         return $this->hasMany(FilamentType::class);

config/cache.php

@@ -24,7 +24,7 @@ return [
     |
     | Here you may define all of the cache "stores" for your application as
     | well as their drivers. You may even define multiple stores for the
-    | same cache driver to group types of items stored in your caches.
+    | same cache driver to group type of items stored in your caches.
     |
     | Supported drivers: "array", "database", "file", "memcached",
     |                    "redis", "dynamodb", "octane", "null"

database/migrations/2025_03_10_182844_create_colors.php

@@ -11,7 +11,7 @@ return new class extends Migration
      */
     public function up(): void
     {
-        Schema::create('colors', function (Blueprint $table) {
+        Schema::create('color', function (Blueprint $table) {
             $table->id();
             $table->string('name')->required();
             $table->string('hex')->required();
@@ -24,6 +24,6 @@ return new class extends Migration
      */
     public function down(): void
     {
-        Schema::dropIfExists('colors');
+        Schema::dropIfExists('color');
     }
 };

database/migrations/2025_03_10_182903_create_manufacturers.php

@@ -11,7 +11,7 @@ return new class extends Migration
      */
     public function up(): void
     {
-        Schema::create('manufacturers', function (Blueprint $table) {
+        Schema::create('manufacturer', function (Blueprint $table) {
             $table->id();
             $table->string('name')->required();
             $table->string('description')->nullable();
@@ -27,6 +27,6 @@ return new class extends Migration
      */
     public function down(): void
     {
-        Schema::dropIfExists('manufacturers');
+        Schema::dropIfExists('manufacturer');
     }
 };

database/migrations/2025_03_15_185700_create_buildplates_table.php

@@ -11,7 +11,7 @@ return new class extends Migration
      */
     public function up(): void
     {
-        Schema::create('buildplates', function (Blueprint $table) {
+        Schema::create('buildplate', function (Blueprint $table) {
             $table->id();
             $table->string('name');
             $table->string('description');
@@ -27,6 +27,6 @@ return new class extends Migration
      */
     public function down(): void
     {
-        Schema::dropIfExists('buildplates');
+        Schema::dropIfExists('buildplate');
     }
 };

resources/views/components/navbar.blade.php

@@ -15,10 +15,10 @@
       <flux:navmenu class="bg-jet">
         <flux:navmenu.item wire:navigate icon="circle-stack" href="{{ route('filaments.index') }}">All Filaments</flux:navmenu.item>
         <flux:navmenu.separator />
-        <flux:navmenu.item wire:navigate icon="archive-box" href="{{ route('manufacturers.index') }}">Manufacturers</flux:navmenu.item>
+        <flux:navmenu.item wire:navigate icon="archive-box" href="{{ route('manufacturer.index') }}">Manufacturers</flux:navmenu.item>
-        <flux:navmenu.item wire:navigate icon="paint-brush" href="{{ route('colors.index') }}">Colors</flux:navmenu.item>
+        <flux:navmenu.item wire:navigate icon="paint-brush" href="{{ route('color.index') }}">Colors</flux:navmenu.item>
-        <flux:navmenu.item wire:navigate icon="clipboard" href="{{ route('types.index') }}">Types</flux:navmenu.item>
+        <flux:navmenu.item wire:navigate icon="clipboard" href="{{ route('type.index') }}">Types</flux:navmenu.item>
-          <flux:navmenu.item wire:navigate icon="clipboard" href="{{ route('buildplates.index') }}">BuildPlates</flux:navmenu.item>
+          <flux:navmenu.item wire:navigate icon="clipboard" href="{{ route('buildplate.index') }}">BuildPlates</flux:navmenu.item>
       </flux:navmenu>
     </flux:dropdown>
   </flux:navbar>

resources/views/livewire/filament/create-filament.blade.php

@@ -0,0 +1,135 @@
+<section>
+    <x-header>
+        {{ __('Edit Filament - ') . $filament->name }}
+
+        <x-slot name="headerleft">
+            <flux:button wire:click="back" variant="ghost" icon="arrow-left">Back</flux:button>
+        </x-slot>
+
+        <x-slot name="headerright">
+            <flux:button variant="primary" icon="check">Save</flux:button>
+            <flux:button wire:click="show({{ $filament->id }})" variant="danger" icon="x-mark">Cancel</flux:button>
+        </x-slot>
+    </x-header>
+
+    <div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
+        <div>
+            <div class="px-4 sm:px-0">
+                <h3 class="text-base/7 font-semibold text-white">Filament Information</h3>
+                <p class="mt-1 max-w-2xl text-sm/6 text-jet-200">Filament details and QR Code.</p>
+            </div>
+            <div class="mt-6 border-t border-white/10">
+                <dl class="divide-y divide-white/10">
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">ID</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            <flux:input readonly variant="filled" wire:model="id" type="text" class="mt-1 block w-full" value="{{ $filament->id }}"/>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Name</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            <flux:input wire:model="name" type="text" class="mt-1 block w-full" value="{{ $filament->name }}"/>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Color</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            <flux:select wire:model="color_id" >
+                                <flux:select.option disabled value="">Choose Color</flux:select.option>
+                                @foreach ($colors as $color)
+                                    <flux:select.option wire:key="{{ $color->id }}" value="{{ $color->id }}">{{ $color->name }}</flux:select.option>
+                                @endforeach
+                            </flux:select>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Manufacturer</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            <flux:select wire:model="manufacturer_id">
+                                <flux:select.option disabled value="">Choose Manufacturer</flux:select.option>
+                                @foreach ($manufacturers as $manufacturer)
+                                    <flux:select.option wire:key="{{ $manufacturer->id }}" value="{{ $manufacturer->id }}">{{ $manufacturer->name }}</flux:select.option>
+                                @endforeach
+                            </flux:select>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Filament Type</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            <flux:select wire:model="type_id" >
+                                <flux:select.option disabled value="">Choose Type</flux:select.option>
+                                @foreach ($types as $type)
+                                    <flux:select.option wire:key="{{ $type->id }}" value="{{ $type->id }}">{{ $type->name }}</flux:select.option>
+                                @endforeach
+                            </flux:select>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Weight</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            <flux:input wire:model="weight" type="text" class="mt-1 block w-full" value="{{ $filament->weight }}"/>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Diameter</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            <flux:input wire:model="diameter" type="text" class="mt-1 block w-full" value="{{ $filament->diameter }}"/>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Temperature</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0 flex gap-4 flex-row items-center">
+                            <flux:input wire:model="temp_min" type="text" class="mt-1 w-1/2" value="{{ $filament->temp_min }}"/>
+                            <span>-</span>
+                            <flux:input wire:model="temp_max" type="text" class="mt-1 w-1/2" value="{{ $filament->temp_max }}"/>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">BuildPlate</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">{{ $filament->buildplate_id }}</dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Extruder</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">{{ $filament->extruder_id }}</dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-gray-100">Attachments</dt>
+                        <dd class="mt-2 text-sm text-white sm:col-span-2 sm:mt-0">
+                            <ul role="list" class="divide-y divide-white/5 rounded-md border border-white/10">
+                                <li class="flex items-center justify-between py-4 pr-5 pl-4 text-sm/6">
+                                    <div class="flex w-0 flex-1 items-center">
+                                        <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 shrink-0 text-gray-500">
+                                            <path d="M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z" clip-rule="evenodd" fill-rule="evenodd" />
+                                        </svg>
+                                        <div class="ml-4 flex min-w-0 flex-1 gap-2">
+                                            <span class="truncate font-medium text-white">resume_back_end_developer.pdf</span>
+                                            <span class="shrink-0 text-gray-500">2.4mb</span>
+                                        </div>
+                                    </div>
+                                    <div class="ml-4 shrink-0">
+                                        <a href="#" class="font-medium text-indigo-400 hover:text-indigo-300">Download</a>
+                                    </div>
+                                </li>
+                                <li class="flex items-center justify-between py-4 pr-5 pl-4 text-sm/6">
+                                    <div class="flex w-0 flex-1 items-center">
+                                        <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 shrink-0 text-gray-500">
+                                            <path d="M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z" clip-rule="evenodd" fill-rule="evenodd" />
+                                        </svg>
+                                        <div class="ml-4 flex min-w-0 flex-1 gap-2">
+                                            <span class="truncate font-medium text-white">coverletter_back_end_developer.pdf</span>
+                                            <span class="shrink-0 text-gray-500">4.5mb</span>
+                                        </div>
+                                    </div>
+                                    <div class="ml-4 shrink-0">
+                                        <a href="#" class="font-medium text-indigo-400 hover:text-indigo-300">Download</a>
+                                    </div>
+                                </li>
+                            </ul>
+                        </dd>
+                    </div>
+                </dl>
+            </div>
+        </div>
+    </div>
+</section>

resources/views/livewire/filament/edit.blade.php

@@ -0,0 +1,135 @@
+<section>
+    <x-header>
+        {{ __('Edit Filament - ') . $filament->name }}
+
+        <x-slot name="headerleft">
+            <flux:button wire:click="back" variant="ghost" icon="arrow-left">Back</flux:button>
+        </x-slot>
+
+        <x-slot name="headerright">
+            <flux:button variant="primary" icon="check">Save</flux:button>
+            <flux:button wire:click="show({{ $filament->id }})" variant="danger" icon="x-mark">Cancel</flux:button>
+        </x-slot>
+    </x-header>
+
+    <div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
+        <div>
+            <div class="px-4 sm:px-0">
+                <h3 class="text-base/7 font-semibold text-white">Filament Information</h3>
+                <p class="mt-1 max-w-2xl text-sm/6 text-jet-200">Filament details and QR Code.</p>
+            </div>
+            <div class="mt-6 border-t border-white/10">
+                <dl class="divide-y divide-white/10">
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">ID</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            <flux:input readonly variant="filled" wire:model="id" type="text" class="mt-1 block w-full" value="{{ $filament->id }}"/>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Name</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            <flux:input wire:model="name" type="text" class="mt-1 block w-full" value="{{ $filament->name }}"/>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Color</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            <flux:select wire:model="color_id" >
+                                <flux:select.option disabled value="">Choose Color</flux:select.option>
+                                @foreach ($colors as $color)
+                                    <flux:select.option wire:key="{{ $color->id }}" value="{{ $color->id }}">{{ $color->name }}</flux:select.option>
+                                @endforeach
+                            </flux:select>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Manufacturer</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            <flux:select wire:model="manufacturer_id">
+                                <flux:select.option disabled value="">Choose Manufacturer</flux:select.option>
+                                @foreach ($manufacturers as $manufacturer)
+                                    <flux:select.option wire:key="{{ $manufacturer->id }}" value="{{ $manufacturer->id }}">{{ $manufacturer->name }}</flux:select.option>
+                                @endforeach
+                            </flux:select>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Filament Type</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            <flux:select wire:model="type_id" >
+                                <flux:select.option disabled value="">Choose Type</flux:select.option>
+                                @foreach ($types as $type)
+                                    <flux:select.option wire:key="{{ $type->id }}" value="{{ $type->id }}">{{ $type->name }}</flux:select.option>
+                                @endforeach
+                            </flux:select>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Weight</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            <flux:input wire:model="weight" type="text" class="mt-1 block w-full" value="{{ $filament->weight }}"/>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Diameter</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            <flux:input wire:model="diameter" type="text" class="mt-1 block w-full" value="{{ $filament->diameter }}"/>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Temperature</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0 flex gap-4 flex-row items-center">
+                            <flux:input wire:model="temp_min" type="text" class="mt-1 w-1/2" value="{{ $filament->temp_min }}"/>
+                            <span>-</span>
+                            <flux:input wire:model="temp_max" type="text" class="mt-1 w-1/2" value="{{ $filament->temp_max }}"/>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">BuildPlate</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">{{ $filament->buildplate_id }}</dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Extruder</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">{{ $filament->extruder_id }}</dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-gray-100">Attachments</dt>
+                        <dd class="mt-2 text-sm text-white sm:col-span-2 sm:mt-0">
+                            <ul role="list" class="divide-y divide-white/5 rounded-md border border-white/10">
+                                <li class="flex items-center justify-between py-4 pr-5 pl-4 text-sm/6">
+                                    <div class="flex w-0 flex-1 items-center">
+                                        <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 shrink-0 text-gray-500">
+                                            <path d="M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z" clip-rule="evenodd" fill-rule="evenodd" />
+                                        </svg>
+                                        <div class="ml-4 flex min-w-0 flex-1 gap-2">
+                                            <span class="truncate font-medium text-white">resume_back_end_developer.pdf</span>
+                                            <span class="shrink-0 text-gray-500">2.4mb</span>
+                                        </div>
+                                    </div>
+                                    <div class="ml-4 shrink-0">
+                                        <a href="#" class="font-medium text-indigo-400 hover:text-indigo-300">Download</a>
+                                    </div>
+                                </li>
+                                <li class="flex items-center justify-between py-4 pr-5 pl-4 text-sm/6">
+                                    <div class="flex w-0 flex-1 items-center">
+                                        <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 shrink-0 text-gray-500">
+                                            <path d="M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z" clip-rule="evenodd" fill-rule="evenodd" />
+                                        </svg>
+                                        <div class="ml-4 flex min-w-0 flex-1 gap-2">
+                                            <span class="truncate font-medium text-white">coverletter_back_end_developer.pdf</span>
+                                            <span class="shrink-0 text-gray-500">4.5mb</span>
+                                        </div>
+                                    </div>
+                                    <div class="ml-4 shrink-0">
+                                        <a href="#" class="font-medium text-indigo-400 hover:text-indigo-300">Download</a>
+                                    </div>
+                                </li>
+                            </ul>
+                        </dd>
+                    </div>
+                </dl>
+            </div>
+        </div>
+    </div>
+</section>

resources/views/livewire/filament/index.blade.php

@@ -21,22 +21,21 @@
             <x-slot name="tableheader">
                 <x-table.header class="w-[50px]">ID</x-table.header>
                 <x-table.header>Name</x-table.header>
-                <x-table.header>Description</x-table.header>
                 <x-table.header>Color</x-table.header>
                 <x-table.header>Manufacturer</x-table.header>
                 <x-table.header>Material</x-table.header>
                 <x-table.header>Finish</x-table.header>
-                <x-table.header>Diameter</x-table.header>
+                <x-table.header>Min Temp</x-table.header>
+                <x-table.header>Max Temp</x-table.header>
                 <x-table.header>Weight</x-table.header>
                 <x-table.header>Price</x-table.header>
-                <x-table.header class="w-[100px]"></x-table.header>
+                <x-table.header class="w-[150px]">Actions</x-table.header>
             </x-slot>
 
             @foreach ($filaments as $filament)
                 <tr wire:key="{{ $filament->id }}" class="text-jet-200 border-b border-jet-600 hover:bg-jet-700 transition duration-150 ease-in-out">
                     <x-table.item><p class="p-4 px-3 pl-6">{{ $filament->id }}</p></x-table.item>
                     <x-table.item><p class="p-4 px-3 font-bold">{{ $filament->name }}</p></x-table.item>
-                    <x-table.item><p class="p-4 px-3">{{ $filament->description }}</p></x-table.item>
                     <x-table.item>
                         <div class="flex flex-row gap-2 px-2 justify-start items-center">
                             <div class="p-4 h-[20px] w-[20px] rounded" style="background-color: {{ App\Models\Color::find($filament->color_id)->hex}}"></div>
@@ -46,13 +45,15 @@
                     <x-table.item><p class="p-4 px-3">{{ App\Models\Manufacturer::find($filament->manufacturer_id)->name }}</p></x-table.item>
                     <x-table.item><p class="p-4 px-3">{{ App\Models\FilamentType::find($filament->filament_type_id)->name }}</p></x-table.item>
                     <x-table.item><p class="p-4 px-3">{{ $filament->finish }}</p></x-table.item>
-                    <x-table.item><p class="p-4 px-3">{{ $filament->diameter }} mm</p></x-table.item>
+                    <x-table.item><p class="p-4 px-3">{{ $filament->temp_min }}</p></x-table.item>
+                    <x-table.item><p class="p-4 px-3">{{ $filament->temp_max }}</p></x-table.item>
                     <x-table.item><p class="p-4 px-3">{{ $filament->weight }} g</p></x-table.item>
                     <x-table.item><p class="p-4 px-3">{{ $filament->price }}€</p></x-table.item>
                     <x-table.item>
                         <div class="flex flex-row gap-2 justify-start pr-2">
-                            <flux:button wire:click="edit({{ $filament->id }})" variant="ghost" icon="pencil">Edit</flux:button>
+                            <flux:button wire:click="show({{ $filament->id }})" variant="primary" class="bg-transparent border-0 shadow-transparent text-jet-200 hover:bg-olivine-500 hover:text-jet-950 transition-all ease-in-out hover:cursor-pointer" icon="magnifying-glass"></flux:button>
-                            <flux:button wire:click="deleteModal({{ $filament->id }})" variant="danger" icon="x-mark">Delete</flux:button>
+                            <flux:button wire:click="edit({{ $filament->id }})" variant="primary" class="bg-transparent border-0 shadow-transparent text-jet-200 hover:bg-pumpkin-500 hover:text-jet-950 transition-all ease-in-out hover:cursor-pointer" icon="pencil"></flux:button>
+                            <flux:button wire:click="deleteModal({{ $filament->id }})" variant="primary" class="bg-transparent border-0 shadow-transparent text-jet-200 hover:bg-red-600 hover:text-jet-200 transition-all ease-in-out hover:cursor-pointer" icon="trash"></flux:button>
                         </div>
                     </x-table.item>
                 </tr>

resources/views/livewire/filament/show.blade.php

@@ -0,0 +1,103 @@
+<section>
+    <x-header>
+        {{ __('Show Filament - ') . $filament->name }}
+
+        <x-slot name="headerleft">
+            <flux:button wire:click="back" variant="ghost" icon="arrow-left">Back</flux:button>
+        </x-slot>
+
+        <x-slot name="headerright">
+            <flux:button variant="primary" icon="plus">Create QR</flux:button>
+            <flux:button wire:click="edit({{ $filament->id }})" variant="primary" icon="pencil">Edit</flux:button>
+            <flux:button variant="danger" icon="trash">Delete</flux:button>
+        </x-slot>
+    </x-header>
+
+    <div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
+        <div>
+            <div class="px-4 sm:px-0">
+                <h3 class="text-base/7 font-semibold text-white">Filament Information</h3>
+                <p class="mt-1 max-w-2xl text-sm/6 text-jet-200">Filament details and QR Code.</p>
+            </div>
+            <div class="mt-6 border-t border-white/10">
+                <dl class="divide-y divide-white/10">
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt class="text-sm/6 font-medium text-jet-100">ID</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">{{ $filament->id }}</dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt class="text-sm/6 font-medium text-jet-100">Name</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">{{ $filament->name }}</dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt class="text-sm/6 font-medium text-jet-100">Color</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">{{ $filament->color_id }}</dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt class="text-sm/6 font-medium text-jet-100">Manufacturer</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">{{ $filament->manufacturer_id }}</dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt class="text-sm/6 font-medium text-jet-100">Filament Type</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">{{ $filament->filament_type_id }}</dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt class="text-sm/6 font-medium text-jet-100">Weight</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">{{ $filament->weight }} g</dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt class="text-sm/6 font-medium text-jet-100">Diameter</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">{{ $filament->diameter }} mm</dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt class="text-sm/6 font-medium text-jet-100">Temperature</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">{{ $filament->temp_min }} - {{ $filament->temp_max }} °C</dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt class="text-sm/6 font-medium text-jet-100">BuildPlate</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">{{ $filament->buildplate_id }}</dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt class="text-sm/6 font-medium text-jet-100">Extruder</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">{{ $filament->extruder_id }}</dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt class="text-sm/6 font-medium text-gray-100">Attachments</dt>
+                        <dd class="mt-2 text-sm text-white sm:col-span-2 sm:mt-0">
+                            <ul role="list" class="divide-y divide-white/5 rounded-md border border-white/10">
+                                <li class="flex items-center justify-between py-4 pr-5 pl-4 text-sm/6">
+                                    <div class="flex w-0 flex-1 items-center">
+                                        <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 shrink-0 text-gray-500">
+                                            <path d="M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z" clip-rule="evenodd" fill-rule="evenodd" />
+                                        </svg>
+                                        <div class="ml-4 flex min-w-0 flex-1 gap-2">
+                                            <span class="truncate font-medium text-white">resume_back_end_developer.pdf</span>
+                                            <span class="shrink-0 text-gray-500">2.4mb</span>
+                                        </div>
+                                    </div>
+                                    <div class="ml-4 shrink-0">
+                                        <a href="#" class="font-medium text-indigo-400 hover:text-indigo-300">Download</a>
+                                    </div>
+                                </li>
+                                <li class="flex items-center justify-between py-4 pr-5 pl-4 text-sm/6">
+                                    <div class="flex w-0 flex-1 items-center">
+                                        <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 shrink-0 text-gray-500">
+                                            <path d="M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z" clip-rule="evenodd" fill-rule="evenodd" />
+                                        </svg>
+                                        <div class="ml-4 flex min-w-0 flex-1 gap-2">
+                                            <span class="truncate font-medium text-white">coverletter_back_end_developer.pdf</span>
+                                            <span class="shrink-0 text-gray-500">4.5mb</span>
+                                        </div>
+                                    </div>
+                                    <div class="ml-4 shrink-0">
+                                        <a href="#" class="font-medium text-indigo-400 hover:text-indigo-300">Download</a>
+                                    </div>
+                                </li>
+                            </ul>
+                        </dd>
+                    </div>
+                </dl>
+            </div>
+        </div>
+    </div>
+</section>

resources/views/livewire/filament/type.blade.php

@@ -1,111 +0,0 @@
-<section>
-    <x-header>
-        {{ __('Types') }}
-
-        <x-slot name="headerleft">
-            <input type="text" placeholder="Search..." wire:model.live="search" class="bg-jet-700 border-jet-500 rounded text-jet-50 placeholder:text-jet-200 focus:border-olivine focus:ring-olivine" />
-        </x-slot>
-
-        <x-slot name="headerright">
-            <flux:modal.trigger name="createModal">
-                <flux:button variant="primary" class="bg-olivine hover:bg-olivine-600">Create Type</flux:button>
-            </flux:modal.trigger>        </x-slot>
-    </x-header>
-
-
-
-
-    <div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
-        <x-table>
-            <x-slot name="tableheader">
-                <x-table.header>Name</x-table.header>
-                <x-table.header>Description</x-table.header>
-                <x-table.header>Rolls</x-table.header>
-                <x-table.header class="w-1/6"></x-table.header>
-            </x-slot>
-
-            @foreach ($types as $type)
-                <tr wire:key="{{ $type->id }}" class="text-jet-200 border-b border-jet-600 hover:bg-jet-700 transition duration-150 ease-in-out">
-                    <x-table.item><p class="p-4 px-3 pl-6 font-bold">{{ $type->name }}</p></x-table.item>
-                    <x-table.item><p class="p-4 px-3">{{ $type->description }}</p></x-table.item>
-                    <x-table.item><p class="p-4 px-3">{{ $type->amount }}</p></x-table.item>
-                    <x-table.item>
-                        <div class="flex flex-row gap-4 justify-end pr-8">
-                            <flux:button variant="ghost" wire:click="edit({{ $type->id }})" icon="pencil">Edit</flux:button>
-                            <flux:button variant="danger" wire:click="deleteModal({{ $type->id }})" icon="x-mark">Delete</flux:button>
-                        </div>
-                    </x-table.item>
-                </tr>
-            @endforeach
-
-            <x-slot name="pagination">
-                {{ $types->links() }}
-            </x-slot>
-        </x-table>
-
-    </div>
-
-    <!-- Create Form -->
-    <flux:modal wire:model.self='createModal' name="createModal" class="md:w-lg">
-        <form wire:submit.prevent="create">
-        <div class="space-y-6">
-            <div>
-                <flux:heading size="lg" class="text-nuke-400">Create type</flux:heading>
-                <flux:text class="mt-2">Create a new type.</flux:text>
-            </div>
-                <flux:input label="Name" wire:model="name" placeholder="Type Name" required />
-                <flux:textarea label="Description" wire:model="description" placeholder="Description" />
-                <div class="flex gap-2">
-                    <flux:spacer />
-                    <flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
-                    <flux:button type="submit" variant="primary" class="bg-nuke-400 hover:bg-nuke-500">Create</flux:button>
-                </div>
-        </div>
-        </form>
-    </flux:modal>
-
-    <!-- Edit Form -->
-    @empty($type)
-    @else
-        <flux:modal wire:model.self='editModal' name="editModal" class="md:w-lg">
-            <form wire:submit.prevent="save({{ $editid }})">
-            <div class="space-y-6">
-                <div>
-                    <flux:heading size="lg" class="text-etheral-300">Edit type</flux:heading>
-                    <flux:text class="mt-2">Edit an existing type.</flux:text>
-                </div>
-                    <flux:input label="Name" wire:model="name" placeholder="Type Name" required />
-                    <flux:textarea label="Description" wire:model="description" placeholder="Description" />
-                    <div class="flex gap-2">
-                        <flux:spacer />
-                        <flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
-                        <flux:button type="submit" variant="primary" class="bg-etheral-300 hover:bg-etheral-400">Save</flux:button>
-                    </div>
-            </div>
-            </form>
-        </flux:modal>
-    @endempty
-
-    <!-- Delete Form -->
-    <flux:modal wire:model.self='deleteModal' name="deleteModal" class="md:w-lg">
-        <form wire:submit.prevent="delete({{ $deleteid }})">
-        <div class="space-y-6">
-            <div>
-                <flux:heading size="lg" class="text-red-500">Delete type?</flux:heading>
-                <flux:text class="mt-2">
-                    <p>You're about to delete this type.</p>
-                    <p>This action cannot be reversed.</p>
-                </flux:text>
-            </div>
-            <flux:input label="Name" wire:model="name" disabled placeholder="Type Name" required />
-            <flux:textarea label="Description" disabled wire:model="description" placeholder="Description" />
-            <div class="flex gap-2">
-                <flux:spacer />
-                <flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
-                <flux:button type="submit" variant="danger">Delete type</flux:button>
-            </div>
-        </div>
-        </form>
-    </flux:modal>
-
-</section>

resources/views/livewire/orders/orders.blade.php

@@ -3,18 +3,18 @@
         {{ __('Orders') }}
 
         <x-slot name="headerleft">
-            <flux:input type="text" placeholder="Search..." wire:model.live="search"  />
+            <input type="text" placeholder="Search..." wire:model.live="search" class="bg-jet-700 border-jet-500 rounded text-jet-50 placeholder:text-jet-200 focus:border-olivine focus:ring-olivine" />
         </x-slot>
 
         <x-slot name="headerright">
             <flux:modal.trigger name="createModal">
-                <flux:button variant="primary" class="bg-nuke-400 hover:bg-nuke-300">Create Order</flux:button>
+                <flux:button variant="primary" class="bg-olivine hover:bg-olivine-600">Create Order</flux:button>
             </flux:modal.trigger>
         </x-slot>
     </x-header>
 
 
-    <div class="container m-auto my-8 flex flex-col gap-6">
+    <div class="m-auto my-8 mx-12 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
         <div class="flex flex-row gap-4">
             <div class="mb-4">
                 <flux:heading size="lg">Filter</flux:heading>

resources/views/livewire/type/create.blade.php

@@ -0,0 +1,38 @@
+<section>
+    <form wire:submit="save">
+    <x-header>
+        {{ __('Create Type') }}
+
+        <x-slot name="headerright">
+            <flux:button type="submit" variant="primary" icon="check">Save</flux:button>
+            <flux:button wire:click="cancel" variant="danger" icon="x-mark">Cancel</flux:button>
+        </x-slot>
+    </x-header>
+
+    <div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
+        <div>
+            <div class="px-4 sm:px-0">
+                <h3 class="text-base/7 font-semibold text-white">Type Information</h3>
+                <p class="mt-1 max-w-2xl text-sm/6 text-jet-200">Type details.</p>
+            </div>
+            <div class="mt-6 border-t border-white/10">
+                <dl class="divide-y divide-white/10">
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Name</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            <flux:input wire:model="name" type="text" class="mt-1 block w-full"/>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Description</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            <flux:textarea wire:model="description" type="text" class="mt-1 block w-full"/>
+                        </dd>
+                    </div>
+                </dl>
+            </div>
+        </div>
+
+    </div>
+    </form>
+</section>

resources/views/livewire/type/edit.blade.php

@@ -0,0 +1,39 @@
+<section>
+    <form wire:submit="save">
+    <x-header>
+        {{ __('Create Type') }}
+
+        <x-slot name="headerright">
+            <flux:button type="submit" variant="primary" icon="check">Save</flux:button>
+            <flux:button wire:click="cancel" variant="danger" icon="x-mark">Cancel</flux:button>
+        </x-slot>
+    </x-header>
+
+    <div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
+        <div>
+            <div>Loaded: {{ $type?->id }} - {{ $type?->name }}</div>
+            <div class="px-4 sm:px-0">
+                <h3 class="text-base/7 font-semibold text-white">Type Information</h3>
+                <p class="mt-1 max-w-2xl text-sm/6 text-jet-200">Type details.</p>
+            </div>
+            <div class="mt-6 border-t border-white/10">
+                <dl class="divide-y divide-white/10">
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Name</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            <flux:input wire:model="type.name" type="text" class="mt-1 block w-full"/>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Description</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            <flux:textarea wire:model="type.description" type="text" rows="auto" class="mt-1 block w-full" />
+                        </dd>
+                    </div>
+                </dl>
+            </div>
+        </div>
+
+    </div>
+    </form>
+</section>

resources/views/livewire/type/index.blade.php

@@ -0,0 +1,48 @@
+<section>
+    <x-header>
+        {{ __('Types') }}
+
+        <x-slot name="headerleft">
+            <input type="text" placeholder="Search..." wire:model.live="search" class="bg-jet-700 border-jet-500 rounded text-jet-50 placeholder:text-jet-200 focus:border-olivine focus:ring-olivine" />
+        </x-slot>
+
+        <x-slot name="headerright">
+            <flux:modal.trigger name="createModal">
+                <flux:button wire:click="create" variant="primary" class="bg-olivine hover:bg-olivine-600">Create Type</flux:button>
+            </flux:modal.trigger>        </x-slot>
+    </x-header>
+
+
+
+
+    <div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
+        <x-table>
+            <x-slot name="tableheader">
+                <x-table.header>Name</x-table.header>
+                <x-table.header>Description</x-table.header>
+                <x-table.header>Rolls</x-table.header>
+                <x-table.header class="w-[150px]">Actions</x-table.header>
+            </x-slot>
+
+            @foreach ($types as $type)
+                <tr wire:key="{{ $type->id }}" class="text-jet-200 border-b border-jet-600 hover:bg-jet-700 transition duration-150 ease-in-out">
+                    <x-table.item><p class="p-4 px-3 pl-6 font-bold">{{ $type->name }}</p></x-table.item>
+                    <x-table.item><p class="p-4 px-3">{{ $type->description }}</p></x-table.item>
+                    <x-table.item><p class="p-4 px-3">{{ $type->amount }}</p></x-table.item>
+                    <x-table.item>
+                        <div class="flex flex-row gap-4 justify-end pr-8">
+                            <flux:button variant="primary" class="text-jet-200 bg-transparent shadow-none hover:bg-olivine hover:shadow hover:text-jet-950" wire:click="show({{ $type->id }})" icon="magnifying-glass"></flux:button>
+                            <flux:button variant="primary" class="text-jet-200 bg-transparent shadow-none hover:bg-pumpkin-500 hover:shadow" wire:click="edit({{ $type->id }})" icon="pencil"></flux:button>
+                            <flux:button variant="primary" class="text-jet-200 bg-transparent shadow-none hover:bg-red-600 hover:shadow" wire:click="delete({{ $type->id }})" icon="trash"></flux:button>
+                        </div>
+                    </x-table.item>
+                </tr>
+            @endforeach
+
+            <x-slot name="pagination">
+                {{ $types->links() }}
+            </x-slot>
+        </x-table>
+
+    </div>
+</section>

resources/views/livewire/type/show.blade.php

@@ -0,0 +1,36 @@
+<section>
+    <x-header>
+        {{ __('Show Type - ') . $type->name }}
+
+        <x-slot name="headerright">
+            <flux:button wire:click="back" variant="ghost" icon="arrow-left">Back</flux:button>
+            <flux:button wire:click="edit({{ $type->id }})" variant="primary" icon="check">Edit</flux:button>
+        </x-slot>
+    </x-header>
+
+    <div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
+        <div>
+            <div class="px-4 sm:px-0">
+                <h3 class="text-base/7 font-semibold text-white">Type Information</h3>
+                <p class="mt-1 max-w-2xl text-sm/6 text-jet-200">Type details.</p>
+            </div>
+            <div class="mt-6 border-t border-white/10">
+                <dl class="divide-y divide-white/10">
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Name</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            {{ $type->name }}
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-jet-100">Description</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                            {{ $type->description }}
+                        </dd>
+                    </div>
+                </dl>
+            </div>
+        </div>
+
+    </div>
+</section>

routes/web.php

@@ -1,18 +1,15 @@
 <?php
 
-use Illuminate\Support\Facades\Route;
+use App\Livewire\Buildplate\Buildplate;
-
+use App\Livewire\Color\Color;
 use App\Livewire\Dashboard;
-
-use App\Livewire\Filament\Color;
-use App\Livewire\Filament\Type;
-use App\Livewire\Filament\Manufacturer;
 use App\Livewire\Filament\Filament;
-use App\Livewire\Filament\Buildplate;
+use App\Livewire\Manufacturer\Manufacturer;
-
 use App\Livewire\Orders\Orders;
-
 use App\Livewire\Settings\Settings;
+use App\Livewire\Type\EditType;
+use App\Livewire\Type\Type;
+use Illuminate\Support\Facades\Route;
 
 Route::get('/', function () {
     return view('welcome');
@@ -28,15 +25,22 @@ Route::middleware([
     Route::get('/', Dashboard::class)->name('dashboard');
 
     // Buildplates
-    Route::get('buildplates', Buildplate::class)->name('buildplates.index');
+    Route::get('buildplate', Buildplate::class)->name('buildplate.index');
     // Colors
-    Route::get('colors', Color::class)->name('colors.index');
+    Route::get('color', Color::class)->name('color.index');
     // Types
-    Route::get('types', Type::class)->name('types.index');
+    Route::get('type', Type::class)->name('type.index');
+    Route::get('type/create', \App\Livewire\Type\CreateType::class)->name('type.create');
+    Route::get('type/{type}/edit', EditType::class)->name('type.edit');
+    Route::get('type/{type}', \App\Livewire\Type\ShowType::class)->name('type.show');
+
     // Filaments
     Route::get('filaments', Filament::class)->name('filaments.index');
+    Route::get('filaments/create', Filament::class)->name('filaments.create');
+    Route::get('filaments/{filament}/edit', \App\Livewire\Filament\EditFilament::class)->name('filaments.edit');
+    Route::get('filaments/{filament}', \App\Livewire\Filament\ShowFilament::class)->name('filaments.show');
     // Manufacturers
-    Route::get('manufacturers', Manufacturer::class)->name('manufacturers.index');
+    Route::get('manufacturer', Manufacturer::class)->name('manufacturer.index');
 
     // Orders
     Route::get('orders', Orders::class)->name('orders.index');