Add Spareparts module with CRUD functionality and UI components.

2026-01-24 10:15:45 +01:00
parent af0cf8bed9
commit 563b0e750e
18 changed files with 502 additions and 9 deletions
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Livewire\Sparepart;
+
+use Livewire\Attributes\Validate;
+use Livewire\Component;
+use App\Models\Sparepart as Model;
+use Livewire\Attributes\title;
+
+#[title('Create Sparepart')]
+class CreateSparepart extends Component
+{
+    public Model $sparepart ;
+
+    public string $name = '';
+    public string $description = '';
+    public int $manufacturer_id = 0;
+
+
+    #[Validate('required')]
+    public function save(){
+        $this->validate([
+            'name' => ['required', 'string', 'max:255'],
+            'description' => ['nullable', 'string', 'max:255'],
+            'manufacturer_id' => ['required', 'integer'],
+        ]);
+
+        $sparepart = new Model();
+        $sparepart->name = $this->name;
+        $sparepart->description = $this->description;
+        $sparepart->manufacturer_id = $this->manufacturer_id;
+        $sparepart->save();
+
+        return $this->redirectRoute('spareparts.show', $sparepart->id, navigate: true);
+    }
+
+    public function cancel(){
+        return $this->redirectRoute('spareparts.index', navigate: true);
+    }
+
+    public function render()
+    {
+        return view('livewire.sparepart.create', [
+        ]);
+    }
+}
@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Livewire\Sparepart;
+
+use Livewire\Attributes\Validate;
+use Livewire\Component;
+use App\Models\Sparepart as Model;
+use Livewire\Attributes\title;
+
+#[title('Edit Sparepart')]
+class EditSparepart extends Component
+{
+    public Model $sparepart ;
+
+    public string $name = '';
+    public string $description = '';
+    public int $manufacturer_id = 0;
+
+    #[Validate('required')]
+    public function save(){
+        $this->validate([
+            'name' => ['required', 'string', 'max:255'],
+            'description' => ['nullable', 'string', 'max:255'],
+            'manufacturer_id' => ['required', 'integer'],
+        ]);
+
+        $this->sparepart->update([
+            'name' => $this->name,
+            'description' => $this->description,
+            'manufacturer_id' => $this->manufacturer_id
+        ]);
+
+        return $this->redirectRoute('spareparts.show', $this->sparepart->id, navigate: true);
+    }
+
+    public function cancel(){
+        return $this->redirectRoute('spareparts.index', navigate: true);
+    }
+
+    public function mount(Model $sparepart){
+        $this->filament = $sparepart;
+        $this->name = $sparepart->name;
+        $this->description = $sparepart->description;
+        $this->manufacturer_id = $sparepart->manufacturer_id;
+    }
+
+    public function render()
+    {
+        return view('livewire.sparepart.create', [
+        ]);
+    }
+}
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Livewire\Sparepart;
+
+use Livewire\Component;
+use App\Models\Sparepart as Model;
+use Livewire\Attributes\title;
+
+#[title('Show Filament')]
+class ShowSparepart extends Component
+{
+
+    public Model $sparepart ;
+
+    public function back(){
+        return redirect()->route('spareparts.index');
+    }
+
+    public function edit($id){
+        return redirect()->route('spareparts.edit', $id);
+    }
+
+    public function render()
+    {
+        return view('livewire.sparepart.show', [
+
+        ]);
+    }
+}
@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Livewire\Sparepart;
+
+use Illuminate\Support\Facades\Auth;
+use Livewire\Component;
+use App\Models\Sparepart as Model;
+use App\Models\Manufacturer as Manufacturer;
+use Livewire\WithPagination;
+use Livewire\Attributes\title;
+
+#[title('Filaments')]
+class Sparepart extends Component
+{
+    use WithPagination;
+
+    public Model $sparepart ;
+
+    public $search = '';
+
+    public function create(){
+        return $this->redirectRoute('spareparts.create', navigate: true);
+    }
+
+    public function show($id){
+        return $this->redirectRoute('spareparts.show', $id);
+    }
+
+    public function edit($id){
+        return $this->redirectRoute('spareparts.edit', $id);
+    }
+
+    public function delete($id){
+        @Auth::check();
+        Model::destroy($id);
+    }
+
+    public function render()
+    {
+        return view('livewire.sparepart.index', [
+            'spareparts' => Model::search('name', $this->search)->paginate(25)
+        ]);
+    }
+}
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Sparepart extends Model
+{
+    // Sparepart Model
+    protected $table = 'spareparts';
+    protected $primaryKey = 'id';
+    protected $fillable = [
+        'name',
+        'description',
+    ];
+    public function manufacturer()
+    {
+        return $this->belongsTo(Manufacturer::class);
+    }
+}
@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('spareparts', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->string('description')->nullable();
+            $table->foreignId('manufacturer_id')->constrained('manufacturers')->onUpdate('cascade')->onDelete('cascade');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('spareparts');
+    }
+};
@@ -15,7 +15,7 @@
            <flux:navbar.item wire:navigate icon="stop-circle" href="{{ route('filaments.index') }}">
                Filaments
            </flux:navbar.item>
-            <flux:navbar.item wire:navigate icon="wrench-screwdriver" href="{{ route('filaments.index') }}">
+            <flux:navbar.item wire:navigate icon="wrench-screwdriver" href="{{ route('spareparts.index') }}">
                SpareParts
            </flux:navbar.item>
        </flux:navbar>
@@ -3,7 +3,7 @@
        {{ __('Show Buildplate') }}

        <x-slot name="headerright">
-            <flux:button wire:click="back" variant="primary" class="bg-transparent shadow-none  hover:bg-black/10 hover:cursor-pointer transition-all ease-in-out" icon="arrow-left">Back</flux:button>
+            <flux:button wire:click="back" variant="primary" class="bg-transparent shadow-none text-gray-50 hover:bg-black/10 hover:cursor-pointer transition-all ease-in-out" icon="arrow-left">Back</flux:button>
            <flux:button wire:click="edit({{ $buildplate->id }})" variant="primary"  class="bg-selective text-gray-950 shadow-none  hover:bg-selective-600 hover:cursor-pointer transition-all ease-in-out" icon="check">Edit</flux:button>
        </x-slot>
    </x-header>
@@ -45,5 +45,5 @@
        </div>

    </div>
-    </form>
+
 </section>
@@ -3,7 +3,7 @@
        {{ __('Show Color') }}

        <x-slot name="headerright">
-            <flux:button wire:click="back" variant="primary" class="bg-transparent shadow-none  hover:bg-black/10 hover:cursor-pointer transition-all ease-in-out" icon="arrow-left">Back</flux:button>
+            <flux:button wire:click="back" variant="primary" class="bg-transparent shadow-none text-gray-50 hover:bg-black/10 hover:cursor-pointer transition-all ease-in-out" icon="arrow-left">Back</flux:button>
            <flux:button wire:click="edit({{ $color->id }})" variant="primary"  class="bg-selective text-gray-950 shadow-none  hover:bg-selective-600 hover:cursor-pointer transition-all ease-in-out" icon="check">Edit</flux:button>
        </x-slot>
    </x-header>
@@ -3,7 +3,7 @@
        {{ __('Show Extruder') }}

        <x-slot name="headerright">
-            <flux:button wire:click="back" variant="primary" class="bg-transparent shadow-none  hover:bg-black/10 hover:cursor-pointer transition-all ease-in-out" icon="arrow-left">Back</flux:button>
+            <flux:button wire:click="back" variant="primary" class="bg-transparent shadow-none text-gray-50 hover:bg-black/10 hover:cursor-pointer transition-all ease-in-out" icon="arrow-left">Back</flux:button>
            <flux:button wire:click="edit({{ $extruder->id }})" variant="primary"  class="bg-selective text-gray-950 shadow-none  hover:bg-selective-600 hover:cursor-pointer transition-all ease-in-out" icon="check">Edit</flux:button>
        </x-slot>
    </x-header>
@@ -51,5 +51,4 @@
        </div>

    </div>
-    </form>
 </section>
@@ -4,7 +4,7 @@
            {{ __('Show Filament') }}

            <x-slot name="headerright">
-                <flux:button wire:click="back" variant="primary" class="bg-transparent shadow-none  hover:bg-black/10 hover:cursor-pointer transition-all ease-in-out" icon="arrow-left">Back</flux:button>
+                <flux:button wire:click="back" variant="primary" class="bg-transparent shadow-none text-gray-50 hover:bg-black/10 hover:cursor-pointer transition-all ease-in-out" icon="arrow-left">Back</flux:button>
                <flux:button wire:click="edit({{ $filament->id }})" variant="primary"  class="bg-selective text-gray-950 shadow-none  hover:bg-selective-600 hover:cursor-pointer transition-all ease-in-out" icon="check">Edit</flux:button>
            </x-slot>
        </x-header>
@@ -4,7 +4,7 @@
        {{ __('Show Manufacturer') }}

        <x-slot name="headerright">
-            <flux:button wire:click="back" variant="primary" class="bg-transparent shadow-none  hover:bg-black/10 hover:cursor-pointer transition-all ease-in-out" icon="arrow-left">Back</flux:button>
+            <flux:button wire:click="back" variant="primary" class="bg-transparent shadow-none text-gray-50 hover:bg-black/10 hover:cursor-pointer transition-all ease-in-out" icon="arrow-left">Back</flux:button>
            <flux:button wire:click="edit({{ $manufacturer->id }})" variant="primary"  class="bg-selective text-gray-950 shadow-none  hover:bg-selective-600 hover:cursor-pointer transition-all ease-in-out" icon="check">Edit</flux:button>
        </x-slot>
    </x-header>
@@ -0,0 +1,49 @@
+<section>
+    <form wire:submit="save">
+        <x-header>
+            {{ __('Create Sparepart') }}
+
+            <x-slot name="headerright">
+                <flux:button type="submit" variant="primary" class="bg-selective hover:bg-selective-600 text-gray-950 hover:cursor-pointer transition-all ease-in-out" icon="check">Save</flux:button>
+                <flux:button wire:click="cancel" variant="primary" class=" bg-red-700 shadow hover:bg-red-800 hover:cursor-pointer  transition-all ease-in-out" icon="x-mark">Cancel</flux:button>
+            </x-slot>
+        </x-header>
+
+        <div class="container m-auto my-8 bg-elephant-950 border border-elephant-900 rounded-lg shadow p-6 text-gray-50">
+            <div>
+                <div class="px-4 sm:px-0">
+                    <h3 class="text-base/7 font-semibold text-white">Sparepart Information</h3>
+                    <p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Sparepart 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-gray-100">Name</dt>
+                            <dd class="mt-1 text-sm/6 text-gray-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-gray-100">Description</dt>
+                            <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                                <flux:textarea wire:model="description" 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-gray-100">Manufacturer</dt>
+                            <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                                <flux:select wire:model="manufacturer_id" class="mt-1 block w-full">
+                                    <flux:select.option default value="">Select Manufacturer</flux:select.option>
+                                    @foreach(\App\Models\Manufacturer::all() as $manufacturer)
+                                        <flux:select.option key="{{ $manufacturer->id }}" value="{{$manufacturer->id}}">{{$manufacturer->name}}</flux:select.option>
+                                    @endforeach
+                                </flux:select>
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+            </div>
+
+        </div>
+    </form>
+</section>
@@ -0,0 +1,116 @@
+<section>
+    <form wire:submit="save">
+        <x-header>
+            {{ __('Edit Filament') }}
+
+            <x-slot name="headerright">
+                <flux:button type="submit" variant="primary" class="bg-selective hover:bg-selective-600 text-gray-950 hover:cursor-pointer transition-all ease-in-out" icon="check">Save</flux:button>
+                <flux:button wire:click="cancel" variant="primary" class=" bg-red-700 shadow hover:bg-red-800 hover:cursor-pointer  transition-all ease-in-out" icon="x-mark">Cancel</flux:button>
+            </x-slot>
+        </x-header>
+
+        <div class="container m-auto my-8 bg-elephant-950 border border-elephant-900 rounded-lg shadow p-6 text-gray-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-gray-200">Filament 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-gray-100">Name</dt>
+                            <dd class="mt-1 text-sm/6 text-gray-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-gray-100">Description</dt>
+                            <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                                <flux:textarea wire:model="description" 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-gray-100">Color</dt>
+                            <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                                <flux:select wire:model="color_id" class="mt-1 block w-full">
+                                    <flux:select.option default value="">Select Color</flux:select.option>
+                                    @foreach(\App\Models\Color::all() as $color)
+                                        <flux:select.option 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-gray-100">Manufacturer</dt>
+                            <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                                <flux:select wire:model="manufacturer_id" class="mt-1 block w-full">
+                                    <flux:select.option default value="">Select Manufacturer</flux:select.option>
+                                    @foreach(\App\Models\Manufacturer::all() as $manufacturer)
+                                        <flux:select.option 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-gray-100">Filament Type</dt>
+                            <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                                <flux:select wire:model="filament_type_id" class="mt-1 block w-full">
+                                    <flux:select.option default value="">Select Filament Type</flux:select.option>
+                                    @foreach(\App\Models\FilamentType::all() as $filament_type)
+                                        <flux:select.option key="{{ $filament_type->id }}" value="{{$filament_type->id}}">{{$filament_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-gray-100">Weight</dt>
+                            <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                                <flux:input.group>
+                                    <flux:input wire:model="weight"  type="text" class="block w-full"/>
+                                    <flux:input.group.suffix>g</flux:input.group.suffix>
+                                </flux:input.group>
+                            </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">Diameter</dt>
+                            <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                                <flux:input.group>
+                                    <flux:input wire:model="diameter"  type="text" class="block w-full"/>
+                                    <flux:input.group.suffix>mm</flux:input.group.suffix>
+                                </flux:input.group>
+                            </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">Price</dt>
+                            <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                                <flux:input.group>
+                                    <flux:input wire:model="price"  type="text" class="block w-full"/>
+                                    <flux:input.group.suffix>€</flux:input.group.suffix>
+                                </flux:input.group>
+                            </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">Min Temperature</dt>
+                            <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                                <flux:input.group>
+                                    <flux:input wire:model="temp_min"  type="text" class="block w-full"/>
+                                    <flux:input.group.suffix>°C</flux:input.group.suffix>
+                                </flux:input.group>
+                            </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">Max Temperature</dt>
+                            <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                                <flux:input.group>
+                                    <flux:input wire:model="temp_max"  type="text" class="block w-full"/>
+                                    <flux:input.group.suffix>°C</flux:input.group.suffix>
+                                </flux:input.group>
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+            </div>
+
+        </div>
+    </form>
+</section>
@@ -0,0 +1,54 @@
+<section>
+    <x-header>
+        {{ __('Spareparts') }}
+
+        <x-slot name="headerleft">
+            <input type="text" placeholder="Search..." wire:model.live="search" class="bg-black/10 border-white/20 rounded text-gray-50 placeholder:text-gray-200 focus:border-white/50 focus:ring-white/50" />
+        </x-slot>
+
+        <x-slot name="headerright">
+            <flux:button wire:click="create" variant="primary" class="bg-selective hover:bg-selective-600 text-gray-950 transition ease-in-out hover:cursor-pointer">Create Sparepart</flux:button>
+        </x-slot>
+    </x-header>
+
+    <div class="container m-auto my-8 bg-elephant border border-elephant-900 rounded-lg shadow p-6 text-gray-50">
+    </div>
+
+    <div class="container m-auto my-8 bg-elephant border border-elephant-900 rounded-lg shadow p-6 text-gray-50">
+        <x-table>
+            <x-slot name="tableheader">
+                <x-table.header class="w-[50px]">ID</x-table.header>
+                <x-table.header>Name</x-table.header>
+                <x-table.header>Manufacturer</x-table.header>
+                <x-table.header class="w-[150px]">Actions</x-table.header>
+            </x-slot>
+
+            @foreach ($spareparts as $sparepart)
+                <tr wire:key="{{ $sparepart->id }}" class="text-gray-200 border-b border-white/50 hover:bg-white/10 transition duration-150 ease-in-out">
+                    <x-table.item><p class="p-4 px-3 pl-6">{{ $sparepart->id }}</p></x-table.item>
+                    <x-table.item><p class="p-4 px-3 font-bold">{{ $sparepart->name }}</p></x-table.item>
+                    <x-table.item><p class="p-4 px-3">
+                            @if ($sparepart->manufacturer_id !== 0)
+                                <a href="{{ route('manufacturer.show', $sparepart->manufacturer_id) }}" class="flex items-center gap-2">
+                                    {{ App\Models\Manufacturer::find($sparepart->manufacturer_id)->name }}
+                                    <flux:icon name="arrow-right" variant="mini"></flux:icon>
+                                </a>
+                            @endif
+                        </p></x-table.item>
+                    <x-table.item>
+                        <div class="flex flex-row gap-4 justify-end pr-8">
+                            <flux:button variant="primary" class="text-gray-200 bg-transparent shadow-none hover:bg-cornflower hover:shadow hover:text-gray-950 hover:cursor-pointer" wire:click="show({{ $sparepart->id }})" icon="magnifying-glass"></flux:button>
+                            <flux:button variant="primary" class="text-gray-200 bg-transparent shadow-none hover:bg-gold-drop hover:shadow hover:text-gray-950 hover:cursor-pointer" wire:click="edit({{ $sparepart->id }})" icon="pencil"></flux:button>
+                            <flux:button variant="primary" class="text-gray-200 bg-transparent shadow-none hover:bg-red-700 hover:shadow hover:cursor-pointer" wire:click="delete({{ $sparepart->id }})" icon="trash"></flux:button>
+                        </div>
+                    </x-table.item>
+                </tr>
+            @endforeach
+
+            <x-slot name="pagination">
+                {{ $spareparts->links() }}
+            </x-slot>
+        </x-table>
+
+    </div>
+</section>
@@ -0,0 +1,47 @@
+<section>
+    <form wire:submit="save">
+        <x-header>
+            {{ __('Show Sparepart') }}
+
+            <x-slot name="headerright">
+                <flux:button wire:click="back" variant="primary" class="bg-transparent shadow-none text-gray-50 hover:bg-black/10 hover:cursor-pointer transition-all ease-in-out" icon="arrow-left">Back</flux:button>
+                <flux:button wire:click="edit({{ $sparepart->id }})" variant="primary"  class="bg-selective text-gray-950 shadow-none  hover:bg-selective-600 hover:cursor-pointer transition-all ease-in-out" icon="check">Edit</flux:button>
+            </x-slot>
+        </x-header>
+
+        <div class="container m-auto my-8 bg-elephant-950 border border-elephant-900 rounded-lg shadow p-6 text-gray-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-gray-200">Filament 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-gray-100">Name</dt>
+                            <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                                {{ $sparepart->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-gray-100">Description</dt>
+                            <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                                {{ $sparepart->description }}
+                            </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">Manufacturer</dt>
+                            <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                                <a href="{{ route('manufacturer.show', $sparepart->manufacturer_id) }}" class="flex items-center gap-2 hover:cursor-pointer" wire:navigate>
+                                    <div>{{ App\Models\Manufacturer::find($sparepart->manufacturer_id)->name }}</div>
+                                    <flux:icon name="arrow-right" class="w-4 h-4"></flux:icon>
+                                </a>
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+            </div>
+
+        </div>
+    </form>
+</section>
@@ -3,7 +3,7 @@
        {{ __('Show Type - ') . $type->name }}

        <x-slot name="headerright">
-            <flux:button wire:click="back" variant="primary" class="bg-transparent shadow-none  hover:bg-black/10 hover:cursor-pointer transition-all ease-in-out" icon="arrow-left">Back</flux:button>
+            <flux:button wire:click="back" variant="primary" class="bg-transparent shadow-none text-gray-50 hover:bg-black/10 hover:cursor-pointer transition-all ease-in-out" icon="arrow-left">Back</flux:button>
            <flux:button wire:click="edit({{ $type->id }})" variant="primary"  class="bg-selective text-gray-950 shadow-none  hover:bg-selective-600 hover:cursor-pointer transition-all ease-in-out" icon="check">Edit</flux:button>
        </x-slot>
    </x-header>
@@ -5,6 +5,7 @@ use App\Livewire\Buildplate\Buildplate;
 use App\Livewire\Color\Color;
 use App\Livewire\Dashboard;
 use App\Livewire\Filament\Filament;
+use App\Livewire\Sparepart\Sparepart;
 use App\Livewire\Manufacturer\Manufacturer;
 use App\Livewire\Orders\Orders;
 use App\Livewire\Settings\Settings;
@@ -49,6 +50,12 @@ Route::middleware([
    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');

+    // SpareParts
+    Route::get('spareparts', Sparepart::class)->name('spareparts.index');
+    Route::get('spareparts/create', \App\Livewire\Sparepart\CreateSparepart::class)->name('spareparts.create');
+    Route::get('spareparts/{sparepart}/edit', \App\Livewire\Sparepart\EditSparepart::class)->name('spareparts.edit');
+    Route::get('spareparts/{sparepart}', \App\Livewire\Sparepart\ShowSparepart::class)->name('spareparts.show');
+
    // Manufacturers
    Route::get('manufacturer', Manufacturer::class)->name('manufacturer.index');
    Route::get('manufacturer/create', \App\Livewire\Manufacturer\CreateManufacturer::class)->name('manufacturer.create');