fixed Color & Type View and Tables

app/Livewire/Filament/Color.php

@@ -7,6 +7,7 @@ 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;
 
@@ -22,14 +23,14 @@ class Color extends Component
     #[Validate('required')]
     public $hex = '';
 
-    public $createModal = false;
-
     public $search ='';
 
     // Edit Modal + Query
-    public $editModal = false;
     public $editquery = '';
 
+    public $editid = '';
+    public $deleteid = '';
+    
 
     public function create() {
         @Auth::check();
@@ -49,39 +50,70 @@ class Color extends Component
         $this->reset(['name', 'hex']);
 
         // Close the modal
-        $this->createModal = false;
+        Flux::modal('createModal')->close();
     }
 
     public function edit($colorid) {
         @Auth::check();
 
-        $color =ColorModel::findOrFail($colorid);
+        $editid = $colorid;
+        $this->editid = $editid;
+
+        $color =ColorModel::findOrFail($editid);
 
         $this->name = $color->name;
         $this->hex = $color->hex;
         
+        Flux::modal('editModal')->show();
     }
 
-    public function save($colorid) {
+    public function save($editid) {
         @Auth::check();
         
-        $color = ColorModel::findOrFail($colorid);
+        $color = ColorModel::findOrFail($editid);
         $color->name = $this->name;
         $color->hex = $this->hex;
         $color->save();
 
         session()->flash('status', 'Color successfully updated.');
         
-        $this->editModal = false;
+        Flux::modal('editModal')->close();
     }
-    public function delete(ColorModel $color) {
+
+    public function deleteModal($colorid) {
         @Auth::check();
-        $color->delete();
+
+        $deleteid = $colorid;
+        $this->deleteid = $deleteid;
+
+        $color = ColorModel::findOrFail($colorid);
+        $this->name = $color->name;
+        $this->hex = $color->hex;
+
+        Flux::modal('deleteModal')->show();
+    }
+    public function delete($deleteid) {
+        @Auth::check();
+
+        $color = ColorModel::findOrFail($deleteid)->delete();
+
+        $this->deleteid = $deleteid;
+        Flux::modal('deleteModal')->close();
+
+        // Clear the form
+        $this->reset(['name', 'hex', 'deleteid']);
+
+        session()->flash('status', 'Color successfully deleted.');
+    }
+
+    public function cancel() {
+        $this->reset(['name', 'hex', 'deleteid']);
+        Flux::modals()->close();
     }
     public function render()
     {
         return view('livewire.filament.color', [
-            'colors' => ColorModel::search('name', $this->search)->paginate(10)
+            'colors' => ColorModel::search('name', $this->search)->paginate(20)
         ]);
     }
 }

app/Livewire/Filament/Type.php

@@ -4,12 +4,110 @@ 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 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');
+        return view('livewire.filament.type', [
+            'types' => FilamentType::search('name', $this->search)->paginate(10)
+        ]);
     }
 }

resources/views/components/navbar.blade.php

@@ -7,6 +7,7 @@
 
   <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('dashboard') }}">Orders</flux:navbar.item>
     <flux:navbar.item wire:navigate icon="archive-box" href="{{ route('manufacturers.index') }}">Manufacturers</flux:navbar.item>
 
     <flux:dropdown>

resources/views/components/table.blade.php

@@ -1,17 +1,17 @@
-<div class="border border-zinc-300 rounded-lg shadow">
+<div class="border border-blackout-950 rounded-lg shadow">
   <table class="w-full rounded-lg">
-    <thead class="bg-zinc-200 border-b border-zinc-300 rounded-t-lg">
+    <thead class="bg-black border-b border-blackout-950 rounded-t-lg">
       <tr class="text-left">
         {{ $tableheader }}
       </tr>
     </thead>
-    <tbody class="bg-zinc-100">
+    <tbody class="bg-black">
       {{ $slot }}
     </tbody>
   </table>
 
   @isset($pagination)
-  <div class="px-6 py-4 bg-zinc-100 rounded-b-lg">
+  <div class="px-6 py-4 bg-black rounded-b-lg">
     {{ $pagination }}
   </div>
   @endisset

resources/views/components/table/header.blade.php

@@ -1,3 +1,3 @@
-<th  {{ $attributes->merge(['class' => 'py-4 px-3 first:pl-6 last:pr-6']) }}>
+<th  {{ $attributes->merge(['class' => 'py-4 px-3 first:pl-6 last:pr-6 text-nuke-400']) }}>
   {{ $slot }}
 </th>

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

@@ -7,7 +7,9 @@
         </x-slot>
 
         <x-slot name="headerright">
-            <button type="button" x-on:click="$wire.createModal = true" class="bg-zinc-500 hover:bg-green-500 text-zinc-50 hover:text-zinc-700 font-bold text-base py-2 px-4 rounded cursor-pointer">Create</button>
+            <flux:modal.trigger name="createModal">
+                <flux:button variant="primary" class="bg-nuke-400 hover:bg-nuke-300">Create Color</flux:button>
+            </flux:modal.trigger>
         </x-slot>
     </x-header>
 
@@ -25,16 +27,15 @@
             </x-slot>
 
             @foreach ($colors as $color)
-                <tr wire:key="{{ $color->id }}" class="border-b border-zinc-300">
+                <tr wire:key="{{ $color->id }}" class="border-b border-blackout-950">
                     <x-table.item><p class="p-4 px-3 pl-6 font-bold">{{ $color->name }}</p></x-table.item>
                     <x-table.item><div class="p-4 px-3 mx-3 h-8 rounded" style="background-color: {{ $color->hex }}"></div></x-table.item>
                     <x-table.item><p class="p-4 px-3 text-left">{{ $color->hex }}</p></x-table.item>
                     <x-table.item><p class="p-4 px-3"></p></x-table.item>
                     <x-table.item>
                         <div class="flex flex-row gap-4 justify-end pr-8">
-                            <button type="button" wire:click="edit({{ $color->id }})" x-on:click="$wire.editModal = true" class="text-accent p-4 cursor-pointer flex flex-row gap-2"><flux:icon.pencil/>Edit</button>
-                                
-                            <button type="button" wire:click="delete({{ $color->id }})" wire:confirm="Are you sure?" class="text-accent p-4 cursor-pointer"><flux:icon.x-mark/></button>
+                            <flux:button wire:click="edit({{ $color->id }})" icon="pencil">Edit</flux:button>
+                            <flux:button wire:click="deleteModal({{ $color->id }})" icon="x-mark">Delete</flux:button>
                         </div>
                     </x-table.item>
                 </tr>
@@ -48,51 +49,65 @@
     </div>
 
     <!-- Create Form -->
-
-    <x-modal wire:model="createModal" >
-        <div class="flex justify-center flex-col">
-            <div class="flex justify-end">
-                <button wire:click="$set('createModal', false)" class="text-accent p-2 m-2 cursor-pointer rounded-full bg-zinc-800 absolute"><flux:icon.x-mark class="size-6"/></button>
-            </div>
-            <div class="bg-zinc-700">
-                <h3 class="text-2xl content-cente p-8 text-center border-b border-zinc-600">New Color</h3>
-            </div>
-            <div class="py-8 px-8">
-                <form class="flex flex-col gap-4" wire:submit="create">
-                    <div class="flex justify-center gap-8 flex-col">
-                        <input type="text" placeholder="Name" wire:model="name" class="bg-zinc-800 rounded" required/>
-                        <input type="text" placeholder="Hex" wire:model="hex" class="bg-zinc-800 rounded" required/>
-                        <button type="submit" class="bg-green-500 hover:bg-green-700 text-zinc-800 hover:text-white font-bold py-2 px-4 rounded cursor-pointer">Submit</button>
+        <flux:modal wire:model.self='createModal' name="createModal" class="md:w-128">
+            <form wire:submit.prevent="create">
+            <div class="space-y-6">
+                <div>
+                    <flux:heading size="lg" class="text-nuke-400">Create color</flux:heading>
+                    <flux:text class="mt-2">Create a new color.</flux:text>
+                </div>
+                    <flux:input label="Name" wire:model="name" placeholder="Color Name" required />
+                    <flux:input label="hex" wire:model="hex" type="color" required />
+                    <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>
-                </form>
             </div>
-
-
-        </div>
-    </x-modal>
+            </form>
+        </flux:modal>
 
         <!-- Edit Form -->
-
-        <x-modal wire:model="editModal" >
-            <div class="flex justify-center flex-col">
-                <div class="flex justify-end">
-                    <button wire:click="$set('editModal', false)" class="text-accent p-2 m-2 cursor-pointer rounded-full bg-zinc-800 absolute"><flux:icon.x-mark class="size-6"/></button>
+        @empty($color)
+        @else
+        <flux:modal wire:model.self='editModal' name="editModal" class="md:w-128">
+            <form wire:submit.prevent="save({{ $editid }})">
+            <div class="space-y-6">
+                <div>
+                    <flux:heading size="lg" class="text-etheral-300">Edit color</flux:heading>
+                    <flux:text class="mt-2">Edit an existing color.</flux:text>
                 </div>
-                <div class="bg-zinc-700">
-                    <h3 class="text-2xl content-cente p-8 text-center border-b border-zinc-600">Edit Color</h3>
-                </div>
-                <div class="py-8 px-8">
-                    <form class="flex flex-col gap-4" wire:submit="save({{ $color->id }})">
-                        <div class="flex justify-center gap-8 flex-col">
-                            <input type="text" placeholder="Name" wire:model="name" class="bg-zinc-800 rounded" required/>
-                            <input type="text" placeholder="Hex" wire:model="hex" class="bg-zinc-800 rounded" required/>
-                            <button type="submit" class="bg-green-500 hover:bg-green-700 text-zinc-800 hover:text-white font-bold py-2 px-4 rounded cursor-pointer">Submit</button>
-                        </div>
-                    </form>
-                </div>
-    
-    
+                    <flux:input label="Name" wire:model="name" placeholder="Color Name" required />
+                    <flux:input label="hex" wire:model="hex" type="color" required />
+                    <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>
-        </x-modal>
+            </form>
+        </flux:modal>
+        @endempty
 
+        <!-- Delete Form -->
+        <flux:modal wire:model.self='deleteModal' name="deleteModal" class="md:w-128">
+            <form wire:submit.prevent="delete({{ $deleteid }})">
+            <div class="space-y-6">
+                <div>
+                    <flux:heading size="lg" class="text-red-500">Delete color?</flux:heading>
+                    <flux:text class="mt-2">
+                        <p>You're about to delete this color.</p>
+                        <p>This action cannot be reversed.</p>
+                    </flux:text>
+                </div>
+                <flux:input label="Name" wire:model="name" disabled placeholder="Color Name" required />
+                <flux:input label="hex" wire:model="hex" disabled type="color" required />
+                <div class="flex gap-2">
+                    <flux:spacer />
+                    <flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
+                    <flux:button type="submit" variant="danger">Delete color</flux:button>
+                </div>
+            </div>
+            </form>
+        </flux:modal>
 </section>

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

@@ -1,3 +1,111 @@
-<div>
-    {{-- In work, do what you enjoy. --}}
-</div>
+<section>
+    <x-header>
+        {{ __('Types') }}
+
+        <x-slot name="headerleft">
+            <input type="text" placeholder="Search..." wire:model.live="search" class="bg-zinc-800 rounded focus:border-accent focus:ring-accent" />
+        </x-slot>
+
+        <x-slot name="headerright">
+            <flux:modal.trigger name="createModal">
+                <flux:button variant="primary" class="bg-nuke-400 hover:bg-nuke-300">Create Type</flux:button>
+            </flux:modal.trigger>        </x-slot>
+    </x-header>
+
+    
+
+
+    <div class="container m-auto my-8">
+        <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="border-b border-blackout-950">
+                    <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"></p></x-table.item>
+                    <x-table.item>
+                        <div class="flex flex-row gap-4 justify-end pr-8">
+                            <flux:button wire:click="edit({{ $type->id }})" icon="pencil">Edit</flux:button>
+                            <flux:button 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-128">
+        <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-128">
+            <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-128">
+        <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/manufacturers/index.blade.php

@@ -28,7 +28,7 @@
                 @foreach ($manufacturers as $manufacturer)
                   <tr class="border-b border-zinc-600">
                     <td class="text-center py-4"><a href="/manufacturers/{{ $manufacturer->id }}" class="flex justify-center">{{ $manufacturer->name }}</a></td>
-                    <td class="text-center py-4"><a href="/manufacturers/{{ $manufacturer->id }}" class="bg-accent px-2 py-1 rounded">{{ $manufacturer->filament_count }}</a></td>
+                    <td class="text-center py-4"><a href="/manufacturers/{{ $manufacturer->id }}" class="bg-etheral-300 px-2 py-1 rounded text-blackout-950">{{ $manufacturer->filament_count }}</a></td>
                     <td class="text-center py-4"><a class="flex gap-2 justify-center" target="_blank" href="{{ $manufacturer->website }}">{{ $manufacturer->website }} @isset($manufacturer->website) <flux:icon.arrow-top-right-on-square /> @endisset</a></td>
                     <td class="text-center py-4"></td>
                     <td class="text-center py-4"><a href="{{ route('manufacturers.edit', $manufacturer->id) }}" class="flex justify-center"><flux:icon.ellipsis class="hover:text-zinc-50 hover:bg-zinc-500 stroke-3 rounded "/></a></td>