Refactored Color Livewire components, added CreateColor, EditColor, and ShowColor components. Updated views, navigation, and Tailwind color schemes. Adjusted database migrations for consistency.

app/Livewire/Color/Color.php

@@ -3,10 +3,7 @@
 namespace App\Livewire\Color;
 
 use App\Models\Color as ColorModel;
-use Flux\Flux;
-use Illuminate\Support\Facades\Auth;
 use Livewire\Attributes\title;
-use Livewire\Attributes\Validate;
 use Livewire\Component;
 use Livewire\WithPagination;
 
@@ -15,104 +12,28 @@ class Color extends Component
 {
     use WithPagination;
 
-    // Validation
-    #[Validate('required')]
-    public $name = '';
-
-    #[Validate('required')]
-    public $hex = '';
-
     public $search ='';
 
-    // Edit Modal + Query
-    public $editquery = '';
-
-    public $editid = '';
-    public $deleteid = '';
-
-
-    public function create() {
-        @Auth::check();
-
-
-        // Validate
-        $this->validate();
-
-        $color = new ColorModel();
-        $color->name = $this->name;
-        $color->hex = $this->hex;
-        $color->save();
-
-        session()->flash('status', 'Color successfully created.');
-
-        // Clear the form
-        $this->reset(['name', 'hex']);
-
-        // Close the modal
-        Flux::modal('createModal')->close();
+    public function create(){
+        return $this->redirectRoute('color.create', navigate: true);
     }
 
-    public function edit($colorid) {
-        @Auth::check();
-
-        $editid = $colorid;
-        $this->editid = $editid;
-
-        $color =ColorModel::findOrFail($editid);
-
-        $this->name = $color->name;
-        $this->hex = $color->hex;
-
-        Flux::modal('editModal')->show();
+    public function edit($id){
+        return $this->redirectRoute('color.edit', $id, navigate: true);
     }
 
-    public function save($editid) {
-        @Auth::check();
-
-        $color = ColorModel::findOrFail($editid);
-        $color->name = $this->name;
-        $color->hex = $this->hex;
-        $color->save();
-
-        session()->flash('status', 'Color successfully updated.');
-
-        Flux::modal('editModal')->close();
+    public function show($id){
+        return $this->redirectRoute('color.show', $id, navigate: true);
     }
 
-    public function deleteModal($colorid) {
-        @Auth::check();
-
-        $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 delete($id){
+        ColorModel::destroy($id);
     }
 
-    public function cancel() {
-        $this->reset(['name', 'hex', 'deleteid']);
-        Flux::modals()->close();
-    }
     public function render()
     {
         return view('livewire.color.index', [
-            'colors' => ColorModel::search('name', $this->search)->paginate(20)
+            'colors' => ColorModel::search('name', $this->search)->paginate(10)
         ]);
     }
 }

app/Livewire/Color/CreateColor.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Livewire\Color;
+
+use App\Models\Color as Model;
+use Livewire\Attributes\title;
+use Livewire\Component;
+
+#[title('Colors')]
+class CreateColor extends Component
+{
+
+    public Model $color ;
+
+    public string $name = '';
+    public string $hex = '';
+
+    public function save(){
+        $this->validate([
+            'name' => ['required', 'string', 'max:255'],
+            'hex' => ['required', 'string', 'size:6', 'regex:/^[0-9A-F]{6}$/'],
+        ]);
+
+        $color = new Model();
+        $color->name = $this->name;
+        $color->hex = $this->hex;
+        $color->save();
+
+        return $this->redirectRoute('color.show', $color->id, navigate: true);
+    }
+
+    public function cancel(){
+        return $this->redirectRoute('color.index', navigate: true);
+    }
+
+    public function render()
+    {
+        return view('livewire.color.create', [
+        ]);
+    }
+}

app/Livewire/Color/EditColor.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Livewire\Color;
+
+use App\Models\Color as Model;
+use Livewire\Attributes\title;
+use Livewire\Attributes\Validate;
+use Livewire\Component;
+
+#[title('Colors')]
+class EditColor extends Component
+{
+    public Model $color;
+
+    public string $name = '';
+    public string $hex = '';
+
+    public function mount(Model $color){
+        $this->color = $color;
+        $this->name = $color->name;
+        $this->hex = $color->hex;
+    }
+
+    #[Validate('required')]
+    public function save(){
+        $this->validate([
+            'name' => ['required', 'string', 'max:255'],
+            'hex' => ['required', 'string', 'size:6', 'regex:/^[0-9A-F]{6}$/'],
+        ]);
+
+        $this->color->update([
+            'name' => $this->name,
+            'hex' => $this->hex,
+        ]);
+
+        return $this->redirectRoute('color.show', $this->color->id, navigate: true);
+    }
+
+    public function cancel(){
+        return $this->redirectRoute('color.index', navigate: true);
+    }
+
+    public function render()
+    {
+        return view('livewire.color.edit', [
+        ]);
+    }
+}

app/Livewire/Color/ShowColor.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Livewire\Color;
+
+use App\Models\Color as Model;
+use Livewire\Attributes\title;
+use Livewire\Component;
+
+#[title('Colors')]
+class ShowColor extends Component
+{
+    public Model $color;
+
+    public function mount(Model $color){
+        $this->color = $color;
+    }
+
+    public function edit($id){
+        return $this->redirectRoute('color.edit', $id, navigate: true);
+    }
+
+    public function back(){
+        return $this->redirectRoute('color.index', navigate: true);
+    }
+
+    public function render()
+    {
+        return view('livewire.color.show', [
+        ]);
+    }
+}