perf(Migrated to Livewire):

Moved Dashboard modules to Livewire, including loading of todo list in the dashboard

app/Http/Controllers/DashboardController.php

@@ -38,17 +38,15 @@ class DashboardController extends Controller
         $incomplete_count = $data['incomplete_count'];
         // Convert all todo to Todo model
 
-        $projects = $this->projects();
+//        $projects = $this->projects();
-        $project_count = $projects['project_count'];
+//        $project_count = $projects['project_count'];
-        $ave_todo_count = $projects['ave_todo_count'];
+//        $ave_todo_count = $projects['ave_todo_count'];
 
         $todo_completed_count = $this->all_completed_todos()['completed_count'];
 
         return view('dashboard.index', compact(
             'todos',
             'incomplete_count',
-            'project_count',
-            'ave_todo_count',
             'todo_completed_count'
         ));
     }

app/Http/Livewire/Dashboard/AveTodoPerProject.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Http\Livewire\Dashboard;
+
+use Livewire\Component;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use App\Models\{
+    Todo,
+    Project,
+    User
+};
+
+
+class AveTodoPerProject extends Component
+{
+    public $ave_todo_count;
+
+    public function mount()
+    {
+        $user = auth()->user();
+        $projects = $user->projects;
+        $project_count = $projects->count();
+
+        // Average number of todos per project
+        $ave_todo_count = function ($projects) {
+            $todo_count = 0;
+            foreach ($projects as $project) {
+                $todo_count += $project->todos->count();
+            }
+            return $todo_count / $projects->count();
+        };
+
+        $this->ave_todo_count = $ave_todo_count($projects);
+    }
+    public function render()
+    {
+        return view('livewire.dashboard.ave-todo-per-project');
+    }
+}

app/Http/Livewire/Dashboard/CompletedTodo.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Livewire\Dashboard;
+
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use Livewire\Component;
+
+
+class CompletedTodo extends Component
+{
+    public $todo_completed_count;
+
+    public function mount()
+    {
+        $this->todo_completed_count = DB::table('todos')
+            ->join('project_todo', 'todos.id', '=', 'project_todo.todo_id')
+            ->join('project_user', 'project_todo.project_id', '=', 'project_user.project_id')
+            ->where('project_user.user_id', '=', Auth::user()->id)
+            ->whereDate('due_end', '<=', strtotime('today midnight'))
+            ->whereNotNull('completed_at')
+            ->count();
+    }
+
+    public function render()
+    {
+        return view('livewire.dashboard.completed-todo');
+    }
+}

app/Http/Livewire/Dashboard/IncompleteTodo.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Livewire\Dashboard;
+
+use Livewire\Component;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Auth;
+
+class IncompleteTodo extends Component
+{
+    public $incomplete_count;
+
+    public function mount()
+    {
+        $this->incomplete_count = DB::table('todos')
+            ->join('project_todo', 'todos.id', '=', 'project_todo.todo_id')
+            ->join('project_user', 'project_todo.project_id', '=', 'project_user.project_id')
+            ->where('project_user.user_id', '=', Auth::user()->id)
+            ->whereDate('due_end', '<=', strtotime('today midnight'))
+            ->whereNull('completed_at')
+            ->count();
+
+    }
+    public function render()
+    {
+        return view('livewire.dashboard.incomplete-todo');
+    }
+}

app/Http/Livewire/Dashboard/ProjectCount.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Livewire\Dashboard;
+
+use Livewire\Component;
+
+class ProjectCount extends Component
+{
+    public $project_count;
+
+    public function mount()
+    {
+        $this->project_count = auth()->user()->projects()->count();
+    }
+
+    public function render()
+    {
+        return view('livewire.dashboard.project-count');
+    }
+}

app/Http/Livewire/Dashboard/Stats.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Livewire\Dashboard;
+
+use Livewire\Component;
+
+class Stats extends Component
+{
+    public function render()
+    {
+        return view('livewire.dashboard.stats');
+    }
+}

app/Http/Livewire/Pomo/Timer.php

@@ -15,6 +15,13 @@ class Timer extends Component
         'endBreak' => 'endBreak',
     ];
 
+    public function resetPomo()
+    {
+        $this->time = 25 * 60;
+        $this->countdown = false;
+        $this->break = false;
+    }
+
     public function endBreak($time = null)
     {
         $this->time = $time ?? $this->time;

app/Http/Livewire/Todo/TodaysTodo.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Http\Livewire\Todo;
+
+use Illuminate\Support\Facades\DB;
+use Livewire\Component;
+use App\Models\Todo;
+
+class TodaysTodo extends Component
+{
+    public $perPage = 5;
+
+    public $listeners = [
+        'load-more' => 'loadMore',
+    ];
+
+    public function loadMore()
+    {
+        $this->perPage += 5;
+    }
+
+    public function render()
+    {
+        $todos = DB::table('todos')
+            ->join('project_todo', 'todos.id', '=', 'project_todo.todo_id')
+            ->join('project_user', 'project_todo.project_id', '=', 'project_user.project_id')
+            ->where('project_user.user_id', '=', auth()->user()->id)
+            ->whereDate('due_end', '<=', strtotime('today midnight'))
+            ->whereNull('completed_at')
+            ->orderBy('due_end', 'asc')
+            ->paginate($this->perPage);
+
+
+        $todos->transform(function ($todo) {
+            return Todo::find($todo->id);
+        });
+
+
+        $incomplete_count = DB::table('todos')
+            ->join('project_todo', 'todos.id', '=', 'project_todo.todo_id')
+            ->join('project_user', 'project_todo.project_id', '=', 'project_user.project_id')
+            ->where('project_user.user_id', '=', auth()->user()->id)
+            ->whereDate('due_end', '<=', strtotime('today midnight'))
+            ->whereNull('completed_at')
+            ->count();
+
+        return view('livewire.todo.todays-todo', [
+            'todos' => $todos,
+            'incomplete_count' => $incomplete_count,
+        ]);
+    }
+}

resources/views/dashboard/index.blade.php

@@ -5,158 +5,10 @@
         </h2>
     </x-slot>
 
-    <!-- Display Statistics of Todo Completion -->
-    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 mt-4">
-        <h2 class="text-2xl font-semibold mb-4 text-indigo-500 dark:text-indigo-400">
-            <!-- Icon for Target board -->
-            <svg class="inline-block h-6 w-6 text-indigo-500 dark:text-indigo-400"
-                 xmlns="http://www.w3.org/2000/svg"
-                 fill="none"
-                 viewBox="0 0 24 24"
-                 stroke="currentColor">
-                <path stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M9 9v6m0 0v6m0-6h6m-6 0H3"/>
-            </svg>
-            Your Stats
-        </h2>
-        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-            <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
-                <h3 class="text-xl font-semibold mb-4 text-red-500 dark:text-red-400">
-                    <!-- SVG for Incomplete Todos -->
-                    <svg class="inline-block h-6 w-6 text-red-500 dark:text-red-400"
-                         xmlns="http://www.w3.org/2000/svg"
-                         fill="none"
-                         viewBox="0 0 24 24"
-                         stroke="currentColor">
-                        <path stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M6 18L18 6M6 6l12 12"/>
-                    </svg>
-                    Total incomplete Todos
-                </h3>
-                <p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
-                    {{ $incomplete_count }}
-                </p>
-            </div>
 
-            <!-- Todo Completed Count -->
+    <livewire:dashboard.stats/>
-            <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
-                <h3 class="text-xl font-semibold mb-4 text-green-500 dark:text-green-400">
-                    <!-- SVG for Completed Todos -->
-                    <svg class="inline-block h-6 w-6 text-green-500 dark:text-green-400"
-                         xmlns="http://www.w3.org/2000/svg"
-                         fill="none"
-                         viewBox="0 0 24 24"
-                         stroke="currentColor">
-                        <path stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M5 13l4 4L19 7"/>
-                    </svg>
-                    Total Completed Todos
-                </h3>
-                <p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
-                    {{ $todo_completed_count }}
-                </p>
-            </div>
 
-            <!-- Average Todo Count per Project -->
+    <livewire:todo.todays-todo/>
-            <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
-                <h3 class="text-xl font-semibold mb-4 text-yellow-500 dark:text-yellow-400">
-                    <!-- SVG for Average Todos -->
-                    <svg class="inline-block h-6 w-6 text-yellow-500 dark:text-yellow-400"
-                         xmlns="http://www.w3.org/2000/svg"
-                         fill="none"
-                         viewBox="0 0 24 24"
-                         stroke="currentColor">
-                        <path stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
-                    </svg>
-                    Average Todos per Project
-                </h3>
-                <p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
-                    {{ $ave_todo_count }}
-                </p>
-            </div>
 
-            <!-- Project Count -->
-            <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
-                <h3 class="text-xl font-semibold mb-4 text-blue-500 dark:text-blue-400">
-                    <!-- SVG for Project Count -->
-                    <svg class="inline-block h-6 w-6 text-blue-500 dark:text-blue-400"
-                         xmlns="http://www.w3.org/2000/svg"
-                         fill="none"
-                         viewBox="0 0 24 24"
-                         stroke="currentColor">
-                        <path stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
-                    </svg>
-                    Total Projects
-                </h3>
-                <p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
-                    {{ $project_count }}
-                </p>
-            </div>
-
-            <livewire:dashboard.pomo-count/>
-
-            <livewire:dashboard.pomo-time/>
-        </div>
-
-    </div>
-
-
-    <!-- List out Todos and their details (time left/ago) + checkbox in form to toggle completed -->
-    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 mt-4 py-3">
-        <h2 class="text-2xl font-semibold mb-4 text-green-500 dark:text-green-400">
-            Today's Todos
-            ({{ $incomplete_count }})
-        </h2>
-        <div class="space-y-4" id="todo-container">
-            @include('dashboard.load-todo')
-        </div>
-        <!-- Pagination with CSS -->
-        <div class="invisible">
-            {{ $todos->links() }}
-        </div>
-    </div>
-
-    <script>
-        $(document).ready(function () {
-            let nextPageUrl = '{{ $todos->nextPageUrl() }}';
-
-            $(window).scroll(function () {
-                if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
-                    if (nextPageUrl) {
-                        loadMoreTodos();
-                    }
-                }
-            });
-
-            function loadMoreTodos() {
-                $.ajax({
-                    url: nextPageUrl,
-                    type: 'get',
-                    beforeSend: function () {
-                        nextPageUrl = '';
-                    },
-                    success: function (data) {
-                        nextPageUrl = data.nextPageUrl;
-                        $('#todo-container').append(data.view);
-                    },
-                    error: function (xhr, status, error) {
-                        console.error("Error loading more posts:", error);
-                    }
-                });
-            }
-        });
-    </script>
 
 </x-app-layout>

resources/views/dashboard/load-todo.blade.php

@@ -1,61 +1,63 @@
-@foreach ($todos as $todo)
+<div class="space-y-4" id="todo-container">
-<a href="{{ route('project.todo.edit', [$todo->project->id, $todo->id]) }}" class="block">
+    @foreach ($todos as $todo)
-    <div
+    <a href="{{ route('project.todo.edit', [$todo->project->id, $todo->id]) }}" class="block">
-        class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 flex items-center justify-between">
+        <div
-        <div class="flex items-center">
+            class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 flex items-center justify-between">
-            <form action="{{ route('project.todo.update', [$todo->project->id, $todo->id]) }}"
+            <div class="flex items-center">
-                  method="POST"
+                <form action="{{ route('project.todo.update', [$todo->project->id, $todo->id]) }}"
-                  class="toggle-completed-form">
+                      method="POST"
-                @csrf
+                      class="toggle-completed-form">
-                @method('PUT')
+                    @csrf
-                <label class="flex items-center cursor-pointer">
+                    @method('PUT')
-                    <input type="checkbox" name="completed_at" id="completed_at_{{ $todo->id }}"
+                    <label class="flex items-center cursor-pointer">
-                           class="w-4 h-4 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500 dark:focus:ring-green-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                        <input type="checkbox" name="completed_at" id="completed_at_{{ $todo->id }}"
-                           onchange="this.form.submit()" {{ $todo->completed_at ? 'checked' : ''
+                               class="w-4 h-4 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500 dark:focus:ring-green-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-                    }}>
+                               onchange="this.form.submit()" {{ $todo->completed_at ? 'checked' : ''
-                    <span class="ml-2 text-sm text-gray-700"></span>
+                        }}>
-                </label>
+                        <span class="ml-2 text-sm text-gray-700"></span>
-            </form>
+                    </label>
-            <span
+                </form>
-                class="ml-2 text-2xl font-bold text-gray-800 dark:text-gray-100">
+                <span
+                    class="ml-2 text-2xl font-bold text-gray-800 dark:text-gray-100">
                                         {{ $todo->title }}
                                     </span>
 
-        </div>
+            </div>
-        <div>
+            <div>
-            @php
+                @php
-            if ($todo->due_start && $todo->due_end) {
+                if ($todo->due_start && $todo->due_end) {
-            $due = \Carbon\Carbon::parse($todo->due_end);
+                $due = \Carbon\Carbon::parse($todo->due_end);
-            $now = now();
+                $now = now();
-            $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
+                $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
-            $due->diffForHumans($now,
+                $due->diffForHumans($now,
-            true);
+                true);
-            } elseif ($todo->due_start) {
+                } elseif ($todo->due_start) {
-            $due = \Carbon\Carbon::parse($todo->due_start);
+                $due = \Carbon\Carbon::parse($todo->due_start);
-            $now = now();
+                $now = now();
-            $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
+                $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
-            $due->diffForHumans($now,
+                $due->diffForHumans($now,
-            true);
+                true);
-            } elseif ($todo->due_end) {
+                } elseif ($todo->due_end) {
-            $due = \Carbon\Carbon::parse($todo->due_end);
+                $due = \Carbon\Carbon::parse($todo->due_end);
-            $now = now();
+                $now = now();
-            $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
+                $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
-            $due->diffForHumans($now,
+                $due->diffForHumans($now,
-            true);
+                true);
-            } else {
+                } else {
-            // If there is no due_start or due_end, set $timeRemaining to null
+                // If there is no due_start or due_end, set $timeRemaining to null
-            $timeRemaining = null;
+                $timeRemaining = null;
-            }
+                }
-            @endphp
+                @endphp
 
-            @if ($timeRemaining !== null)
+                @if ($timeRemaining !== null)
-            @if ($due->isFuture())
+                @if ($due->isFuture())
-            <p class="text-sm text-green-600">{{ $timeRemaining }} remaining</p>
+                <p class="text-sm text-green-600">{{ $timeRemaining }} remaining</p>
-            @else
+                @else
-            <p class="text-sm text-red-600">{{ $timeRemaining }} ago</p>
+                <p class="text-sm text-red-600">{{ $timeRemaining }} ago</p>
-            @endif
+                @endif
-            @endif
+                @endif
+            </div>
         </div>
-    </div>
+    </a>
-</a>
+    @endforeach
-@endforeach
+</div>

resources/views/livewire/dashboard/ave-todo-per-project.blade.php

@@ -0,0 +1,19 @@
+<div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
+    <h3 class="text-xl font-semibold mb-4 text-yellow-500 dark:text-yellow-400">
+        <!-- SVG for Average Todos -->
+        <svg class="inline-block h-6 w-6 text-yellow-500 dark:text-yellow-400"
+             xmlns="http://www.w3.org/2000/svg"
+             fill="none"
+             viewBox="0 0 24 24"
+             stroke="currentColor">
+            <path stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
+        </svg>
+        Average Todos per Project
+    </h3>
+    <p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
+        {{ $ave_todo_count }}
+    </p>
+</div>

resources/views/livewire/dashboard/completed-todo.blade.php

@@ -0,0 +1,19 @@
+<div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
+    <h3 class="text-xl font-semibold mb-4 text-green-500 dark:text-green-400">
+        <!-- SVG for Completed Todos -->
+        <svg class="inline-block h-6 w-6 text-green-500 dark:text-green-400"
+             xmlns="http://www.w3.org/2000/svg"
+             fill="none"
+             viewBox="0 0 24 24"
+             stroke="currentColor">
+            <path stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M5 13l4 4L19 7"/>
+        </svg>
+        Total Completed Todos
+    </h3>
+    <p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
+        {{ $todo_completed_count }}
+    </p>
+</div>

resources/views/livewire/dashboard/incomplete-todo.blade.php

@@ -0,0 +1,19 @@
+<div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
+    <h3 class="text-xl font-semibold mb-4 text-red-500 dark:text-red-400">
+        <!-- SVG for Incomplete Todos -->
+        <svg class="inline-block h-6 w-6 text-red-500 dark:text-red-400"
+             xmlns="http://www.w3.org/2000/svg"
+             fill="none"
+             viewBox="0 0 24 24"
+             stroke="currentColor">
+            <path stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M6 18L18 6M6 6l12 12"/>
+        </svg>
+        Total incomplete Todos
+    </h3>
+    <p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
+        {{ $incomplete_count }}
+    </p>
+</div>

resources/views/livewire/dashboard/project-count.blade.php

@@ -0,0 +1,19 @@
+<div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
+    <h3 class="text-xl font-semibold mb-4 text-blue-500 dark:text-blue-400">
+        <!-- SVG for Project Count -->
+        <svg class="inline-block h-6 w-6 text-blue-500 dark:text-blue-400"
+             xmlns="http://www.w3.org/2000/svg"
+             fill="none"
+             viewBox="0 0 24 24"
+             stroke="currentColor">
+            <path stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
+        </svg>
+        Total Projects
+    </h3>
+    <p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
+        {{ $project_count }}
+    </p>
+</div>

resources/views/livewire/dashboard/stats.blade.php

@@ -0,0 +1,34 @@
+<!-- Display Statistics of Todo Completion -->
+<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 mt-4">
+    <h2 class="text-2xl font-semibold mb-4 text-indigo-500 dark:text-indigo-400">
+        <!-- Icon for Target board -->
+        <svg class="inline-block h-6 w-6 text-indigo-500 dark:text-indigo-400"
+             xmlns="http://www.w3.org/2000/svg"
+             fill="none"
+             viewBox="0 0 24 24"
+             stroke="currentColor">
+            <path stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 9v6m0 0v6m0-6h6m-6 0H3"/>
+        </svg>
+        Your Stats
+    </h2>
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+
+       <livewire:dashboard.incomplete-todo/>
+
+        <livewire:dashboard.completed-todo/>
+
+        <!-- Average Todo Count per Project -->
+        <livewire:dashboard.ave-todo-per-project/>
+
+        <!-- Project Count -->
+        <livewire:dashboard.project-count/>
+
+        <livewire:dashboard.pomo-count/>
+
+        <livewire:dashboard.pomo-time/>
+    </div>
+
+</div>

resources/views/livewire/pomo/load-pomo.blade.php

@@ -45,6 +45,12 @@
     </button>
 </div>
 
+<div wire:loading>
+    <div class="text-blue-900 dark:text-gray-100 font-bold py-2 px-4 rounded flex justify-center">
+        Loading...
+    </div>
+</div>
+
 <!-- Livewire script to trigger the load more button after user scrolls to the bottom of the page -->
 <script>
     window.onscroll = function(ev) {

resources/views/livewire/pomo/timer.blade.php

@@ -10,6 +10,13 @@
             wire:click="stopTimer">
             Stop
         </button>
+
+        <button
+            class="bg-yellow-500 hover:bg-yellow-600
+            text-white font-bold py-2 px-4 rounded"
+            wire:click="resetPomo">
+            Reset
+        </button>
     </div>
 
     <div class="flex justify-center items-center mt-8">

resources/views/livewire/todo/todays-todo.blade.php

@@ -0,0 +1,101 @@
+<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 mt-4 py-3">
+    <h2 class="text-2xl font-semibold mb-4 text-green-500 dark:text-green-400">
+        Today's Todos
+        ({{ $incomplete_count }})
+    </h2>
+    <div class="space-y-4" id="todo-container">
+        @foreach ($todos as $todo)
+
+        <a href="{{ route('project.todo.edit', [$todo->project->id, $todo->id]) }}" class="block">
+            <div
+                class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 flex items-center justify-between">
+                <div class="flex items-center">
+                    <form action="{{ route('project.todo.update', [$todo->project->id, $todo->id]) }}"
+                          method="POST"
+                          class="toggle-completed-form">
+                        @csrf
+                        @method('PUT')
+                        <label class="flex items-center cursor-pointer">
+                            <input type="checkbox" name="completed_at" id="completed_at_{{ $todo->id }}"
+                                   class="w-4 h-4 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500 dark:focus:ring-green-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                                   onchange="this.form.submit()" {{ $todo->completed_at ? 'checked' : ''
+                            }}>
+                            <span class="ml-2 text-sm text-gray-700"></span>
+                        </label>
+                    </form>
+                    <span
+                        class="ml-2 text-2xl font-bold text-gray-800 dark:text-gray-100">
+                                        {{ $todo->title }}
+                                    </span>
+
+                </div>
+                <div>
+                    @php
+                    if ($todo->due_start && $todo->due_end) {
+                    $due = \Carbon\Carbon::parse($todo->due_end);
+                    $now = now();
+                    $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
+                    $due->diffForHumans($now,
+                    true);
+                    } elseif ($todo->due_start) {
+                    $due = \Carbon\Carbon::parse($todo->due_start);
+                    $now = now();
+                    $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
+                    $due->diffForHumans($now,
+                    true);
+                    } elseif ($todo->due_end) {
+                    $due = \Carbon\Carbon::parse($todo->due_end);
+                    $now = now();
+                    $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
+                    $due->diffForHumans($now,
+                    true);
+                    } else {
+                    // If there is no due_start or due_end, set $timeRemaining to null
+                    $timeRemaining = null;
+                    }
+                    @endphp
+
+                    @if ($timeRemaining !== null)
+                    @if ($due->isFuture())
+                    <p class="text-sm text-green-600">{{ $timeRemaining }} remaining</p>
+                    @else
+                    <p class="text-sm text-red-600">{{ $timeRemaining }} ago</p>
+                    @endif
+                    @endif
+                </div>
+            </div>
+        </a>
+        @endforeach
+    </div>
+
+    @if($todos->hasMorePages())
+    <div class="invisible">
+        <button wire:click.prevent="loadMore"
+                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Load more
+        </button>
+    </div>
+
+    <div wire:loading>
+        <div class="text-blue-900 dark:text-gray-100 font-bold py-2 px-4 rounded flex justify-center">
+            Loading...
+        </div>
+    </div>
+
+    <!-- Livewire script to trigger the load more button after user scrolls to the bottom of the page -->
+    <script>
+        window.onscroll = function (ev) {
+            if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
+                Livewire.emit('load-more');
+                console.log('Load more');
+            }
+        };
+    </script>
+
+    @else
+    <!-- If there are no more pages, show this message -->
+    <div class="text-blue-900 dark:text-gray-100 font-bold py-2 px-4 rounded flex justify-center">
+        Congratulations! You've reached the end of the list.
+    </div>
+    @endif
+
+</div>