iridium34/FilamentLaravel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored Filament Livewire components and views. Introduced separate CreateFilament component with route-based navigation. Simplified and cleaned up code by removing legacy modals and unused properties. Updated migrations, table layouts, and styles for consistency.

Browse Source
This commit is contained in:
iridium34
2025-12-15 01:20:04 +01:00
parent 4759df9077
commit c7671b93b1
15 changed files with 461 additions and 645 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/navbar.blade.php
+16 -9
View File
@@ -6,28 +6,33 @@
<flux:brand href="{{ route('dashboard') }}" name="FilamentApp" class="max-lg:hidden! hidden dark:flex"/>
<flux:navbar class="-mb-px max-lg:hidden">
<flux:navbar.item wire:navigate icon="home" href="{{ route('dashboard') }}">Dashboard</flux:navbar.item>
<flux:navbar.item wire:navigate icon="shopping-bag" href="{{ route('orders.index') }}">Orders
<flux:navbar.item wire:navigate icon="home" href="{{ route('dashboard') }}">
Dashboard
</flux:navbar.item>
<flux:navbar.item wire:navigate icon="shopping-bag" href="{{ route('orders.index') }}">
Orders
</flux:navbar.item>
<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') }}">
SpareParts
</flux:navbar.item>
</flux:navbar>
<flux:spacer/>
<flux:navbar class="mr-4">
<flux:navbar.item icon="magnifying-glass" href="#" label="Search"/>
<flux:navbar.item class="max-lg:hidden" icon="cog-6-tooth" href="{{ route('settings.index') }}"
label="Settings"/>
<flux:navbar.item class="max-lg:hidden" icon="cog-6-tooth" href="{{ route('settings.index') }}" label="Settings"/>
<flux:separator vertical variant="subtle" class="my-2"/>
<flux:dropdown>
<flux:navbar.item icon="circle-stack" />
<flux:navmenu class="bg-white">
<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('manufacturer.index') }}">
Manufacturers
</flux:navmenu.item>
@@ -43,7 +48,9 @@
</flux:navmenu.item>
</flux:navmenu>
</flux:dropdown>
<flux:separator vertical variant="subtle" class="my-2"/>
</flux:navbar>
<flux:dropdown position="top" align="start">
resources/views/livewire/filament/create-filament.blade.php
-135
View File
@@ -1,135 +0,0 @@
<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/create.blade.php
+116
View File
@@ -0,0 +1,116 @@
<section>
<form wire:submit="save">
<x-header>
{{ __('Create 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>
resources/views/livewire/filament/edit.blade.php
+110 -129
View File
@@ -1,135 +1,116 @@
<section>
<x-header>
{{ __('Edit Filament - ') . $filament->name }}
<form wire:submit="save">
<x-header>
{{ __('Edit Filament') }}
<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 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>
<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 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>
</div>
</form>
</section>
resources/views/livewire/filament/index.blade.php
+13 -131
View File
@@ -3,20 +3,18 @@
{{ __('Filaments') }}
<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" />
<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:modal.trigger name="createModal">
<flux:button variant="primary" class="bg-olivine hover:bg-olivine-600">Create Filament</flux:button>
</flux:modal.trigger>
<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 Filament</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="m-auto my-8 mx-12 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
<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>
@@ -24,7 +22,6 @@
<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>Min Temp</x-table.header>
<x-table.header>Max Temp</x-table.header>
<x-table.header>Weight</x-table.header>
@@ -33,27 +30,26 @@
</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">
<tr wire:key="{{ $filament->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">{{ $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>
<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>
<div class="p-4 h-[20px] w-[20px] rounded" style="background-color: #{{ App\Models\Color::find($filament->color_id)->hex}}"></div>
<p>{{ App\Models\Color::find($filament->color_id)->name }}</p>
</div>
</x-table.item>
<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->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->temp_min }}°C</p></x-table.item>
<x-table.item><p class="p-4 px-3">{{ $filament->temp_max }}°C</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="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="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 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({{ $filament->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({{ $filament->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({{ $filament->id }})" icon="trash"></flux:button>
</div>
</x-table.item>
</tr>
@@ -65,118 +61,4 @@
</x-table>
</div>
<!-- Create Form -->
<flux:modal wire:model.self='createModal' name="createModal" class="md:w-5xl">
<form wire:submit.prevent="create">
<div class="space-y-6">
<div>
<flux:heading size="lg" class="text-nuke-400">Create filament</flux:heading>
<flux:text class="mt-2">Create a new filament.</flux:text>
</div>
<flux:input label="Name" wire:model="name" placeholder="Filament Name" required />
<flux:textarea label="Description" wire:model="description" placeholder="Description" />
<div class="grid grid-cols-2 gap-x-4 gap-y-6">
<flux:select wire:model="manufacturer_id" label="Manufacturer">
<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>
<flux:select wire:model="type_id" label="Type">
<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>
<flux:select wire:model="color_id" label="Color" >
<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>
<flux:input label="Finish" wire:model="finish" placeholder="Finish" required />
<flux:input label="Diameter" wire:model="diameter" placeholder="Diameter" required />
<flux:input label="Weight" wire:model="weight" placeholder="Weight" required />
<flux:input label="Price" wire:model="price" placeholder="Price" required />
<flux:input label="Stock" wire:model="stock" placeholder="Stock" required />
</div>
<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($filament)
@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-nuke-400">Edit filament</flux:heading>
<flux:text class="mt-2">Create a new filament.</flux:text>
</div>
<flux:input label="Name" wire:model="name" placeholder="Filament Name" required />
<flux:textarea label="Description" wire:model="description" placeholder="Description" />
<div class="grid grid-cols-2 gap-x-4 gap-y-6">
<flux:select wire:model="manufacturer_id" label="Manufacturer">
<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>
<flux:select wire:model="type_id" label="Type">
<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>
<flux:select wire:model="color_id" label="Color" >
<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>
<flux:input label="Finish" wire:model="finish" placeholder="Finish" required />
<flux:input label="Diameter" wire:model="diameter" placeholder="Diameter" required />
<flux:input label="Weight" wire:model="weight" placeholder="Weight" required />
<flux:input label="Price" wire:model="price" placeholder="Price" required />
<flux:input label="Stock" wire:model="stock" placeholder="Stock" required />
</div>
<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-olivine hover:bg-olivine-600">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 filament?</flux:heading>
<flux:text class="mt-2">
<p>You're about to delete this filament.</p>
<p>This action cannot be reversed.</p>
</flux:text>
</div>
<flux:input label="Name" wire:model="name" disabled placeholder="Filament 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 filament</flux:button>
</div>
</div>
</form>
</flux:modal>
</section>
resources/views/livewire/filament/show.blade.php
+90 -97
View File
@@ -1,103 +1,96 @@
<section>
<x-header>
{{ __('Show Filament - ') . $filament->name }}
<form wire:submit="save">
<x-header>
{{ __('Show Filament') }}
<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 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="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>
<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 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">
{{ $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-gray-100">Description</dt>
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
{{ $filament->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">Color</dt>
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
<a href="{{ route('color.show', $filament->color_id) }}" class="flex items-center gap-2 hover:cursor-pointer" wire:navigate>
<div class="w-[20px] h-[20px] rounded" style="background-color: #{{ App\Models\Color::find($filament->color_id)->hex }}"></div>
<div>{{ App\Models\Color::find($filament->color_id)->name }}</div>
<flux:icon name="arrow-right" class="w-4 h-4"></flux:icon>
</a>
</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', $filament->manufacturer_id) }}" class="flex items-center gap-2 hover:cursor-pointer" wire:navigate>
<div>{{ App\Models\Manufacturer::find($filament->manufacturer_id)->name }}</div>
<flux:icon name="arrow-right" class="w-4 h-4"></flux:icon>
</a>
</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">
<a href="{{ route('type.show', $filament->filament_type_id) }}" class="flex items-center gap-2 hover:cursor-pointer" wire:navigate>
<div>{{ App\Models\FilamentType::find($filament->filament_type_id)->name }}</div>
<flux:icon name="arrow-right" class="w-4 h-4"></flux:icon>
</a>
</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">
{{ $filament->weight }}g
</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">
{{ $filament->diameter }}mm
</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">
{{ $filament->price }}€
</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">
{{ $filament->temp_min }}°C
</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">
{{ $filament->temp_max }}°C
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</form>
</section>