UI styles for the orders table

Raccoon254 · May 21, 2024 · d30d13c · d30d13c
1 parent fa5b618
commit d30d13c
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 74 deletions.
diff --git a/app/Models/Order.php b/app/Models/Order.php
@@ -46,10 +46,9 @@ public function isPaid(): bool
     public function getStatusClass(): string
     {
         return match ($this->status) {
-            'pending' => 'text-yellow-500',
-            'in-progress' => 'text-blue-500',
-            'completed' => 'text-green-500',
-            default => 'text-gray-500',
+            'in-progress' => 'rounded bg-blue-500 text-white',
+            'completed' => 'rounded bg-green-500 text-white',
+            default => 'rounded bg-gray-500 text-white',
         };
     }
 }
diff --git a/app/Models/Payment.php b/app/Models/Payment.php
@@ -23,8 +23,8 @@ public function order(): BelongsTo
     public function getStatusClass(): string
     {
         return match ($this->status) {
-            'pending' => 'text-yellow-500',
-            'completed' => 'text-green-500',
+            'pending' => 'bg-gray-500',
+            'completed' => 'text-green-500 bg-green-500',
             default => 'text-gray-500',
         };
     }

diff --git a/resources/views/orders/show.blade.php b/resources/views/orders/show.blade.php
@@ -1,76 +1,85 @@
 <div class="flex flex-col h-[85vh] text-black/70  gap-4">
-@if(!$orders->isEmpty())
-    <div class="flex bg-white p-4 rounded-lg justify-between items-center gap-4">
-        <div class="flex gap-4">
-            <div class="relative">
-                <input type="text" wire:model="search" class="p-2 pl-8 border border-gray-300 rounded-md" placeholder="Search Orders">
-                <i class="fas fa-search absolute top-[13px] left-3 text-gray-700"></i>
+    @if(!$orders->isEmpty())
+        <div class="flex bg-white p-4 rounded-lg justify-between items-center gap-4">
+            <div class="flex gap-4">
+                <div class="relative">
+                    <input type="text" wire:model="search" class="p-2 pl-8 border border-gray-300 rounded-md"
+                           placeholder="Search Orders">
+                    <i class="fas fa-search absolute top-[13px] left-3 text-gray-700"></i>
+                </div>
+                <button wire:click="resetFilters" class="p-2 px-4 bg-gray-200 text-gray-700 font-semibold rounded-lg">
+                    <i class="fas fa-filter"></i>
+                    Filter
+                </button>
+                <div class="border border-gray-300 rounded-md center gap-3 p-2">
+                    <!-- Date filter -->
+                    <i class="fas fa-calendar left-3 text-gray-700"></i>
+                    01 Jan - 04 Jan
+                </div>
             </div>
-            <button wire:click="resetFilters" class="p-2 px-4 bg-gray-200 text-gray-700 font-semibold rounded-lg">
-                <i class="fas fa-filter"></i>
-                Filter
-            </button>
-            <div class="border border-gray-300 rounded-md center gap-3 p-2">
-                <!-- Date filter -->
-                <i class="fas fa-calendar left-3 text-gray-700"></i>
-                01 Jan - 04 Jan
-            </div>
-        </div>
 
-        <div class="flex gap-4">
-            <button wire:click="exportOrders" class="p-2 px-4 bg-blue-500 text-white font-semibold rounded-md">
-                <i class="fas mr-2 fa-file-download"></i>
-                Download as CSV
-            </button>
+            <div class="flex gap-4">
+                <button wire:click="exportOrders" class="p-2 px-4 bg-blue-500 text-white font-semibold rounded-md">
+                    <i class="fas mr-2 fa-file-download"></i>
+                    Download as CSV
+                </button>
+            </div>
         </div>
-    </div>
-@endif
+    @endif
 
-<div class="bg-white h-full overflow-y-auto p-6 rounded-lg shadow-sm">
-    @if($orders->isEmpty())
-        <div class="text-black/90 h-full center flex-col">
-            <i class="fas fa-box-open text-4xl mb-2"></i>
-            You haven't placed any orders yet.
-            @if($role === 'client')
-                <a href="{{ route('orders.create') }}" class="custom-btn">
-                    Place an order
-                </a>
-            @endif
-        </div>
-    @else
-        <div class="overflow-x-auto">
-            <!-- Loading for sortByMethod -->
-            <table class="table">
-                <thead>
-                <tr class="border-gray-100">
-                    @foreach(['title' => 'Orders', 'description' => 'Description', 'total_price' => 'Total Price', 'status' => 'Status'] as $field => $label)
-                        <th onselectstart="return false" class="gap-2 py-3 text-black/80 text-[14px] cursor-pointer"
-                            wire:click="sortBy('{{ $field }}')">
-                            {{ $label }}
-                            <i class="fas {{ $this->getSortIcon($field) }}"></i>
-                        </th>
-                    @endforeach
-                    <th class="py-3 text-black/80 text-[14px]">Payment</th>
-                </tr>
-                </thead>
-                <tbody>
-                @foreach($orders as $order)
-                    <tr>
-                        <td class="px-4 py-2 border-b border-gray-100">{{ $order->title }}</td>
-                        <td class="px-4 py-2 border-b border-gray-100">{{ $order->description }}</td>
-                        <td class="px-4 py-2 border-b border-gray-100">${{ $order->total_price }}</td>
-                        <td class="px-4 py-2 border-b border-gray-100">{{ $order->status }}</td>
-                        <td class="px-4 py-2 border-b border-gray-100">{{ $order->isPaid() ? $order->payment->status : 'Not Paid' }}</td>
+    <div class="bg-white h-full overflow-y-auto p-6 rounded-lg shadow-sm">
+        @if($orders->isEmpty())
+            <div class="text-black/90 h-full center flex-col">
+                <i class="fas fa-box-open text-4xl mb-2"></i>
+                You haven't placed any orders yet.
+                @if($role === 'client')
+                    <a href="{{ route('orders.create') }}" class="custom-btn">
+                        Place an order
+                    </a>
+                @endif
+            </div>
+        @else
+            <div class="overflow-x-auto">
+                <!-- Loading for sortByMethod -->
+                <table class="table">
+                    <thead>
+                    <tr class="border-gray-100">
+                        @foreach(['title' => 'Orders', 'description' => 'Description', 'total_price' => 'Total Price', 'status' => 'Status'] as $field => $label)
+                            <th onselectstart="return false" class="gap-2 py-3 text-black/80 text-[14px] cursor-pointer"
+                                wire:click="sortBy('{{ $field }}')">
+                                {{ $label }}
+                                <i class="fas {{ $this->getSortIcon($field) }}"></i>
+                            </th>
+                        @endforeach
+                        <th class="py-3 text-black/80 text-[14px]">Payment</th>
                     </tr>
-                @endforeach
-                </tbody>
-            </table>
-        </div>
+                    </thead>
+                    <tbody>
+                    @foreach($orders as $order)
+                        <tr>
+                            <td class="px-4 py-2 border-b border-gray-100">{{ $order->title }}</td>
+                            <td class="px-4 py-2 border-b border-gray-100">{{ $order->description }}</td>
+                            <td class="px-4 py-2 border-b border-gray-100">$ {{ $order->total_price }}</td>
+                            <td class="px-4 py-2 border-b border-gray-100">
+                                <span class="rounded-full px-2 py-1 {{ $order->getStatusClass() }} text-white">
+                                    {{ $order->status }}
+                                </span>
+                            </td>
+                            <td class="px-4 py-2 border-b border-gray-100">
+                                <span class="rounded-full px-2 py-1 {{ $order->isPaid() ? $order->payment->getStatusClass() : 'bg-red-500' }} text-white">
+                                    {{ $order->isPaid() ? $order->payment->status : 'Not Paid' }}
+                                </span>
+                            </td>
+                        </tr>
+                    @endforeach
+                    </tbody>
+                </table>
+            </div>
 
-        <!-- Pagination -->
-        <div class="mt-4">
-            {{ $orders->links() }}
-        </div>
-    @endif
-</div>
+            <!-- Pagination -->
+            <div class="mt-4">
+                {{ $orders->links() }}
+            </div>
+        @endif
+    </div>
 </div>