Custom btn styles --add component, add route to create an order

app/Livewire/CreateOrder.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class CreateOrder extends Component
+{
+    public function render()
+    {
+        return <<<'HTML'
+        <div>
+            {{-- Knowing others is intelligence; knowing yourself is true wisdom. --}}
+        </div>
+        HTML;
+    }
+}

app/Livewire/OrderShow.php

@@ -13,6 +13,12 @@ class OrderShow extends Component
 
     public string $sortField = 'id'; // Default sort field
     public bool $sortAsc = true; // Default sort direction
+    public string $role;
+
+    public function mount(): void
+    {
+        $this->role = auth()->user()->role ?? 'client';
+    }
 
     protected $listeners = ['orderCreated' => 'refreshOrders'];
 
@@ -41,8 +47,13 @@ public function getSortIcon($field): string
 
     public function render(): View
     {
+        if ($this->role === 'writer') {
+            $orders = Order::orderBy($this->sortField, $this->sortAsc ? 'asc' : 'desc')->paginate(10);
+        } else {
+            $orders = Order::where('user_id', auth()->id())->orderBy($this->sortField, $this->sortAsc ? 'asc' : 'desc')->paginate(10);
+        }
         return view('orders.show', [
-            'orders' => Order::orderBy($this->sortField, $this->sortAsc ? 'asc' : 'desc')->paginate(10)
+            'orders' => $orders
         ]);
     }
 }

resources/css/app.css

@@ -63,3 +63,7 @@ input:-webkit-autofill {
 .message-input{
     @apply w-full rounded-md px-4 border border-gray-300 p-3 transition-all duration-300 ease-in-out text-gray-800;
 }
+
+.custom-btn{
+    @apply bg-blue-500 text-white px-4 py-2 rounded-md transition-all duration-300 ease-in-out hover:bg-blue-600;
+}

resources/views/orders/index.blade.php

@@ -4,17 +4,6 @@
         <div class="w-full h-full">
             <livewire:OrderShow />
         </div>
-
-        <!-- Order Create Form -->
-        <div class="w-full space-y-4 md:w-1/3">
-            <div class="w-full">
-                <livewire:OrderCreate />
-            </div>
-            <!-- Update Order Status -->
-            <div class="w-full">
-                <livewire:OrderUpdate />
-            </div>
-        </div>
     </div>
 
 </div>

resources/views/orders/show.blade.php

@@ -1,4 +1,4 @@
-<div class="flex flex-col text-black/70  gap-4">
+<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">
@@ -26,11 +26,16 @@
     </div>
 @endif
 
-<div class="bg-white h-[85vh] overflow-y-auto p-6 rounded-lg shadow-sm">
+<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">

routes/web.php

@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\ProfileController;
+use App\Livewire\CreateOrder;
 use App\Livewire\Dashboard;
 use App\Livewire\Messages;
 use App\Livewire\Orders;
@@ -22,6 +23,8 @@
     Route::get('/messages', Messages::class)->name('messages');
     Route::get('/orders', Orders::class)->name('orders');
     Route::get('/referrals', Referrals::class)->name('referrals');
+
+    Route::get('/orders/create', CreateOrder::class)->name('orders.create');
 });
 
 require __DIR__.'/auth.php';