From 428e5ba3a093743dc7ef0fd727461f13d65c8de0 Mon Sep 17 00:00:00 2001
From: Matt Young <matt@mattyoung.us>
Date: Wed, 28 Jan 2026 03:42:14 -0600
Subject: [PATCH] Functioning client list

---
 .../views/components/⚡client-list.blade.php  | 41 +++++++++++++++----
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/resources/views/components/⚡client-list.blade.php b/resources/views/components/⚡client-list.blade.php
index eaade74..26e69f7 100644
--- a/resources/views/components/⚡client-list.blade.php
+++ b/resources/views/components/⚡client-list.blade.php
@@ -2,36 +2,61 @@
 
 use App\Models\Client;
 use Livewire\Component;
+use Livewire\Attributes\Computed;
+use Livewire\WithPagination;
+
 
 new class extends Component {
+    use WithPagination;
+
+    public string $sortBy = 'abbreviation';
+    public string $sortDirection = 'desc';
+
+    public function sort($column): void
+    {
+        if ($this->sortBy === $column) {
+            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
+        } else {
+            $this->sortBy        = $column;
+            $this->sortDirection = 'asc';
+        }
+    }
+
     #[Computed]
     public function clients()
     {
-        return Client::all();
+        return Client::orderBy($this->sortBy, $this->sortDirection)->paginate(10);
     }
 };
 ?>
 
 <div>
-    <flux:table>
+    <flux:table :paginate="$this->clients">
         <flux:table.columns>
-            <flux:table.column>Name</flux:table.column>
-            <flux:table.column>
+            <flux:table.column sortable :sorted="$sortBy === 'name'" :direction="$sortDirection"
+                               wire:click="sort('name')">
+                Name
+            </flux:table.column>
+            <flux:table.column sortable :sorted="$sortBy === 'abbreviation'" :direction="$sortDirection"
+                               wire:click="sort('abbreviation')">
                 Abbreviation
             </flux:table.column>
-            <flux:table.column>
+            <flux:table.column sortable :sorted="$sortBy === 'audition_date'" :direction="$sortDirection"
+                               wire:click="sort('audition_date')">
                 Audition Date
             </flux:table.column>
-            <flux:table.column>
+            <flux:table.column sortable :sorted="$sortBy === 'status'" :direction="$sortDirection"
+                               wire:click="sort('status')">
                 Status
             </flux:table.column>
-            <flux:table.column>
+            <flux:table.column sortable :sorted="$sortBy === 'created_at'" :direction="$sortDirection"
+                               wire:click="sort('created_at')">
                 Created
             </flux:table.column>
         </flux:table.columns>
 
         <flux:table.rows>
-            @foreach($this->clients() as $client)
+            @foreach($this->clients as $client)
                 <flux:table.row :key="$client->id">
                     <flux:table.cell>{{ $client->name }}</flux:table.cell>
                     <flux:table.cell>{{ $client->abbreviation }}</flux:table.cell>