From 311b202085af843949962f5ea31230b023a22a8d Mon Sep 17 00:00:00 2001
From: Sue-Holding <sue.holding55@gmail.com>
Date: Tue, 4 Feb 2025 19:39:32 +0100
Subject: [PATCH 1/9] updated views admin-dashboard, admin-settings,
 user-dashboard and user-settings with component styles

---
 resources/views/admin-dashboard.blade.php |  63 ++---------
 resources/views/admin-settings.blade.php  | 116 +++-----------------
 resources/views/user-dashboard.blade.php  |  62 ++++-------
 resources/views/user-settings.blade.php   | 127 ++++------------------
 4 files changed, 64 insertions(+), 304 deletions(-)
diff --git a/resources/views/admin-dashboard.blade.php b/resources/views/admin-dashboard.blade.php
index f0a30f9..a5ef7b1 100644
--- a/resources/views/admin-dashboard.blade.php
+++ b/resources/views/admin-dashboard.blade.php
@@ -1,71 +1,26 @@
 @extends('layouts.app')
 
 @section('content')
-<body class="h-screen bg-gray-900">
+<body>
     <div class="flex h-full">
+    <div class="flex h-screen">
 
-        <!-- Sidebar -->
-        <aside class="w-1/4 bg-blue-600 text-white p-6">
-            <ul class="space-y-4">
-                <li><a href="#" class="block hover:bg-blue-500 p-2 rounded">Home</a></li>
-                <li><a href="{{ route('user_settings') }}" class="block hover:bg-blue-500 p-2 rounded">Profile Setting</a></li>
-                <li><a href="#" class="block hover:bg-blue-500 p-2 rounded">Reviews</a></li>
-                <li><a href="#" class="block hover:bg-blue-500 p-2 rounded">Films</a></li>
-                <li><a href="{{ route('admin_settings') }}" class="block hover:bg-blue-500 p-2 rounded">Users</a></li>
-            </ul>
-        </aside>
+    <!-- Sidebar -->
+    <x-admin-sidebar>
+    </x-admin-sidebar>  
 
+    
         <!-- Main Content Area -->
         <main class="flex-1 p-6 flex flex-col items-center w-full">
 
             <!-- H1 Centered at the Top -->
             <h2 class="text-2xl font-semibold text-white mb-4 text-center">Welcome, John Doe</h2>
     
-            <!-- Pending Reviews Title -->
-            <h2 class="text-2xl font-semibold text-white mb-4 w-full text-center">Pending Reviews</h2>
-
-            <!-- Full-Screen Reviews Table -->
-            <div class="w-full flex-grow bg-black rounded-lg shadow-lg overflow-hidden">
-                <table class="w-full border-collapse">
-                    <!-- Table Header -->
-                    <thead>
-                        <tr class="bg-blue-600 text-white text-left">
-                            <th class="p-4">Review</th>
-                            <th class="p-4">Film Name</th>
-                            <th class="p-4">Rating</th>
-                            <th class="p-4">User ID</th>
-                            <th class="p-4 text-center">Actions</th>
-                        </tr>
-                    </thead>
-                    <!-- Table Body -->
-                    <tbody class="text-white">
-                        <tr class="border-b border-gray-700">
-                            <td class="p-4">Amazing movie, loved it!</td>
-                            <td class="p-4">Inception</td>
-                            <td class="p-4">5/5</td>
-                            <td class="p-4">User123</td>
-                            <td class="p-4 flex justify-center space-x-2">
-                                <button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Approve</button>
-                                <button class="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600">Edit</button>
-                                <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">Delete</button>
-                            </td>
-                        </tr>
-                        <tr class="border-b border-gray-700">
-                            <td class="p-4">Best Batman movie!</td>
-                            <td class="p-4">The Dark Knight</td>
-                            <td class="p-4">4.8/5</td>
-                            <td class="p-4">User456</td>
-                            <td class="p-4 flex justify-center space-x-2">
-                                <button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Approve</button>
-                                <button class="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600">Edit</button>
-                                <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">Delete</button>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+    <x-pending-reviews-table>
+    </x-pending-reiviews-table>    
 
         </main>
+    </div>   
     </div>
 </body>
 
diff --git a/resources/views/admin-settings.blade.php b/resources/views/admin-settings.blade.php
index 65cbaeb..03860c1 100644
--- a/resources/views/admin-settings.blade.php
+++ b/resources/views/admin-settings.blade.php
@@ -1,113 +1,27 @@
 @extends('layouts.app')
 
 @section('content')
-<body class="h-screen bg-gray-900">
+<body>
     <div class="flex h-full">
+    <div class="flex h-screen">
         
-        <!-- Sidebar -->
-        <aside class="w-1/4 bg-blue-600 text-white p-6">
-            <ul class="space-y-4">
-                <li><a href="#" class="block hover:bg-blue-500 p-2 rounded">Home</a></li>
-                <li><a href="#" class="block hover:bg-blue-500 p-2 rounded">Profile Settings</a></li>
-                <li><a href="#" class="block hover:bg-blue-500 p-2 rounded">Reviews</a></li>
-                <li><a href="#" class="block hover:bg-blue-500 p-2 rounded">Films</a></li>
-                <li><a href="#" class="block hover:bg-blue-500 p-2 rounded">Users</a></li>
-            </ul>
-        </aside>
+      <!-- Sidebar -->
+    <x-admin-sidebar>
+    </x-admin-sidebar> 
 
-        <!-- Main Content -->
-        <main class="flex-1 p-6">
-            <h2 class="text-2xl font-semibold text-white mb-4 text-center">Welcome, John Doe</h2>
-            <h2 class="text-2xl font-semibold text-white mb-4 text-center">Users List</h2>
+    <!-- Main Content -->
+    <main class="flex-1 p-6">
+        <h2 class="text-2xl font-semibold text-white mb-4 text-center">Welcome, John Doe</h2>
+        <h2 class="text-2xl font-semibold text-white mb-4 text-center">Users List</h2>
 
-             <!-- Search Section -->
-             <div class="mb-4 text-center">
-                <form class="flex justify-center gap-4">
-                    <input type="text" placeholder="Search by Name" class="p-3 border rounded w-1/3" id="search" name="search">
-                    <button type="submit" class="bg-blue-600 text-black px-6 py-3 rounded hover:bg-blue-700">
-                        Search
-                    </button>
-                </form>
-            </div>
-            
-            <!-- Users Table -->
-            <div class="w-full bg-white rounded-lg shadow-lg overflow-hidden mb-6">
-                <table class="w-full text-left border-collapse">
-                    <thead>
-                        <tr class="bg-blue-600 text-black">
-                            <th class="p-4" style="display: none;">User ID</th>
-                            <th class="p-4">First Name</th>
-                            <th class="p-4">Last Name</th>
-                            <th class="p-4">Role</th>
-                            <th class="p-4 text-center">Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody class="text-gray-700">
-                        <tr class="border-b hover:bg-gray-100">
-                            <td class="p-4" style="display: none;">1</td> <!-- Hidden User ID -->
-                            <td class="p-4">John</td>
-                            <td class="p-4">Doe</td>
-                            <td class="p-4">Admin</td>
-                            <td class="p-4 text-center">
-                                <button class="bg-yellow-500 text-black px-4 py-2 rounded hover:bg-yellow-600">Edit</button>
-                                <button class="bg-red-500 text-black px-4 py-2 rounded hover:bg-red-600">Delete</button>
-                            </td>
-                        </tr>
-                        <tr class="border-b hover:bg-gray-100">
-                            <td class="p-4" style="display: none;">1</td> <!-- Hidden User ID -->
-                            <td class="p-4">Jane</td>
-                            <td class="p-4">Smith</td>
-                            <td class="p-4">User</td>
-                            <td class="p-4 text-center">
-                                <button class="bg-yellow-500 text-black px-4 py-2 rounded hover:bg-yellow-600">Edit</button>
-                                <button class="bg-red-500 text-black px-4 py-2 rounded hover:bg-red-600">Delete</button>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+    <x-search-user-table>
+    </x-search-user-table>   
 
-            <!-- Create New User -->
-            <h2 class="text-2xl font-semibold text-white mb-4 text-center">Create New User</h2>
+    <x-create-new-user-form>  
+    </x-create-new-user-form>      
 
-            <div class="p-6 bg-white rounded-lg shadow-lg w-full mx-auto">
-                <form name="create-new-admin-user" id="create-new-admin-user" method="post" action="" 
-                      class="flex w-full gap-6">
-                    @csrf
-
-                    <!-- First Name -->
-                    <div class="flex-1">
-                        <label class="block text-gray-700 font-semibold mb-2">First Name</label>
-                        <input type="text" placeholder="First Name" id="firstName" name="firstName" 
-                               class="p-3 border rounded w-full" required>
-                    </div>
-
-                    <!-- Last Name -->
-                    <div class="flex-1">
-                        <label class="block text-gray-700 font-semibold mb-2">Last Name</label>
-                        <input type="text" placeholder="Last Name" id="lastName" name="lastName" 
-                               class="p-3 border rounded w-full" required>
-                    </div>
-
-                    <!-- Role Selection -->
-                    <div class="flex-1">
-                        <label class="block text-gray-700 font-semibold mb-2">Role</label>
-                        <select name="role" id="role" class="p-3 border rounded w-full">
-                            <option value="admin">Admin</option>
-                            <option value="user">User</option>
-                        </select>
-                    </div>
-
-                    <!-- Submit Button -->
-                    <div class="flex-1 flex items-end">
-                        <button type="submit" class="bg-blue-600 text-black px-6 py-3 rounded hover:bg-blue-700 w-full">
-                            Create User
-                        </button>
-                    </div>
-                </form>
-            </div>
-
-        </main>
+    </main>
+    </div>
     </div>
 </body>
 @endsection
\ No newline at end of file
diff --git a/resources/views/user-dashboard.blade.php b/resources/views/user-dashboard.blade.php
index c1b8071..1a9eeba 100644
--- a/resources/views/user-dashboard.blade.php
+++ b/resources/views/user-dashboard.blade.php
@@ -1,52 +1,32 @@
 @extends('layouts.app')
 
 @section('content')
-<body class="h-screen bg-gray-900">
+<body>
     <div class="flex h-full">
-        
-        <!-- Sidebar -->
-        <aside class="w-1/4 bg-blue-600 text-white p-6 h-full">
-            <h2 class="mb-6 ml-2 text-black text-3xl">WATCHLIST</h2>
-            <ul class="space-y-4">
-                <li><a href="#" class="block hover:bg-blue-500 p-2 rounded">Home</a></li>
-                <li><a href="{{ route('user_settings') }}" class="block hover:bg-blue-500 p-2 rounded">Profile Settings</a></li>
-                <li><a href="#" class="block hover:bg-blue-500 p-2 rounded">Create Watchlist</a></li>
-            </ul>
-        </aside>
+    <div class="flex h-screen">
+     
+    <!-- Sidebar -->
+    <x-user-sidebar>
+    </x-user-sidebar>
 
-        <!-- Main Content Area -->
-        <main class="flex-1 p-6 flex">
-        <!-- <main class="flex-1 p-6 flex flex-col items-center w-full"> -->
+    <!-- Main Content Area -->
+    <main class="flex-1 p-6 flex flex-col items-center w-full">
+        
+        <!-- H2 Centered at the Top -->
         <h2 class="text-2xl font-semibold text-white mb-4 text-center">Welcome, John Doe</h2>
-            
-            <!-- Profile Image Section -->
-            <div class="w-1/4 flex flex-col items-center space-y-4">
-                <img src="https://via.placeholder.com/300" 
-                     alt="Profile Picture" 
-                     class="rounded-lg shadow-lg w-64 h-64 object-cover">
-                <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
-                    Change Profile Image
-                </button>
-            </div>
+         
+            <div class="flex w-full items-start">
 
-            <!-- Watchlist Gallery (Fixed 3x3 Grid) -->
-            <div class="flex-1 pl-6">
-                <h2 class="text-2xl font-semibold text-white mb-4">Your Watchlist</h2>
-                
-                <div class="grid grid-cols-3 gap-4">
-                    <div><img src="https://via.placeholder.com/300" alt="Gallery Image" class="rounded-lg shadow-lg w-full"></div>
-                    <div><img src="https://via.placeholder.com/300" alt="Gallery Image" class="rounded-lg shadow-lg w-full"></div>
-                    <div><img src="https://via.placeholder.com/300" alt="Gallery Image" class="rounded-lg shadow-lg w-full"></div>
-                    <div><img src="https://via.placeholder.com/300" alt="Gallery Image" class="rounded-lg shadow-lg w-full"></div>
-                    <div><img src="https://via.placeholder.com/300" alt="Gallery Image" class="rounded-lg shadow-lg w-full"></div>
-                    <div><img src="https://via.placeholder.com/300" alt="Gallery Image" class="rounded-lg shadow-lg w-full"></div>
-                    <div><img src="https://via.placeholder.com/300" alt="Gallery Image" class="rounded-lg shadow-lg w-full"></div>
-                    <div><img src="https://via.placeholder.com/300" alt="Gallery Image" class="rounded-lg shadow-lg w-full"></div>
-                    <div><img src="https://via.placeholder.com/300" alt="Gallery Image" class="rounded-lg shadow-lg w-full"></div>
-                </div>
-            </div>
+    <!-- Profile Image -->
+    <x-profile-photo>
+    </x-profile-photo>  
+        
+    <x-watchlist-gallery>
+    </x-watchlist-gallery>      
 
-        </main>
+            </div>
+    </main>
+    </div>
     </div>
 </body>
 @endsection
diff --git a/resources/views/user-settings.blade.php b/resources/views/user-settings.blade.php
index 72b6d82..7d7c235 100644
--- a/resources/views/user-settings.blade.php
+++ b/resources/views/user-settings.blade.php
@@ -3,121 +3,32 @@
 @section('content')
 <body>
     <div class="flex h-full">
-
     <div class="flex h-screen">
-        {{-- Sidebar --}}
-        <aside class="w-1/4 bg-blue-600 text-white p-6">
-            <h2 class="mb-6 ml-2 text-black 3xl">WATCHLIST</h2>
-            <ul class="space-y-4">
-                <li><a href="#" class="block hover:bg-blue-500 p-2 rounded">Home</a></li>
-                <li><a href="#" class="block hover:bg-blue-500 p-2 rounded">Profile Settings</a></li>
-                <li><a href="#" class="block hover:bg-blue-500 p-2 rounded">Create watchlist</a></li>
-            </ul>
-        </aside>
 
-        <!-- Main Content Area (Right Column) -->
-        <main class="flex-1 p-6 flex flex-col items-center">
-        <div class=""> 
-            <!-- H1 Centered at the Top -->
-            <h2 class="text-2xl font-semibold text-white mb-4 text-center">Welcome, John Doe</h2>
+    <!-- Sidebar -->
+    <x-user-sidebar>    
+    </x-user-sidebar>
+       
+    <!-- Main Content Area (Right Column) -->
+    <main class="flex-1 p-6 flex flex-col items-center w-full">
+        
+        <!-- H2 Centered at the Top -->
+        <h2 class="text-2xl font-semibold text-white mb-4 text-center">Welcome, John Doe</h2>
     
             <div class="flex w-full items-start">
             
-                <!-- Profile Image -->
-                <div class="w-1/3 flex flex-col items-center space-y-4">
-                    <img src="https://via.placeholder.com/300" 
-                         alt="Profile Picture" 
-                        class="rounded-lg shadow-lg w-64 h-64 object-cover">
-    
-                    <button class="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600">
-                        Change Profile Image
-                    </button>
-                </div>
+    <!-- Profile Image -->
+    <x-profile-photo>
+    </x-profile-photo> 
+               
             
-            <div class="mt-8 p-6 bg-white rounded-lg shadow-lg max-w-4xl ml-12">
-
-                <!-- update username form -->
-                <form name="username-settings-update" id="username-settings-update" method="post" action class="flex items-center space-x-4">
-                    @csrf
-
-                     <!-- user Name -->
-                    <div class="form-group">
-                        <label name="">Username</label>
-                        <input type="text" placeholder="Your current username" id="userName" name="userName" 
-                                class="p-3 border rounded w-full" required="">
-                    </div>
-
-                    <!-- update user Name -->
-                    <div class="form-group">
-                        <label name="">New username</label>
-                        <input type="text" placeholder="Type new username" id="newUserName" name="newUserName" 
-                                class="p-3 border rounded w-full" required="">
-                    </div>
-
-                    <!-- Submit Button (Centered) -->
-                    <div class="col-span-2 flex justify-center">
-                        <button type="submit" class="bg-blue-600 text-black px-4 py-2 rounded hover:bg-blue-700">
-                        Update Username
-                        </button>
-                    </div>
-                </form>
-
-                <!-- update email form -->
-                <form name="email-settings-update" id="email-settings-update" method="post" action class="flex items-center space-x-4">
-                    @csrf
-
-                     <!-- email -->
-                    <div class="form-group">
-                        <label name="">Email</label>
-                        <input type="text" placeholder="Your current email" id="email" name="email" 
-                                class="p-3 border rounded w-full" required="">
-                    </div>
-
-                    <!-- update email -->
-                    <div class="form-group">
-                        <label name="">New email</label>
-                        <input type="text" placeholder="Type new email" id="newEmail" name="newEmail" 
-                                class="p-3 border rounded w-full" required="">
-                    </div>
+    <x-profile-settings-form>
+    </x-profile-settings-form>
+            </div>
 
-                    <!-- Submit Button (Centered) -->
-                    <div class="col-span-2 flex justify-center">
-                        <button type="submit" class="bg-blue-600 text-black px-4 py-2 rounded hover:bg-blue-700">
-                        Update Email adress
-                        </button>
-                    </div>
-                </form>
-
-                <!-- request new password form -->
-                <form name="password-update" id="password-update" method="post" action class="flex items-center space-x-4">
-                    @csrf
-
-                     <!-- password -->
-                    <div class="form-group">
-                        <label name="">Password</label>
-                        <input type="text" placeholder="Your current password" id="password" name="password" 
-                                class="p-3 border rounded w-full" required="">
-                    </div>
-
-                    <!-- update password -->
-                    <div class="form-group">
-                        <label name="">New password</label>
-                        <input type="text" placeholder="Type new password" id="newPassword" name="newPassword" 
-                                class="p-3 border rounded w-full" required="">
-                    </div>
-
-                    <!-- Submit Button (Centered) -->
-                    <div class="col-span-2 flex justify-center">
-                        <button type="submit" class="bg-blue-600 text-black px-4 py-2 rounded hover:bg-blue-700">
-                        Update Password
-                        </button>
-                    </div>
-                </form>
-
-        </div>
-
-        </div>
-        </main>
+    </main>
+    
+    </div>
     </div>
 </body>         
 @endsection
\ No newline at end of file

From 0d13cd0168ced1c5cbeea6c511bd0e0a127c87b0 Mon Sep 17 00:00:00 2001
From: Sue-Holding <sue.holding55@gmail.com>
Date: Tue, 4 Feb 2025 19:40:27 +0100
Subject: [PATCH 2/9] updated route path on user-dashboard and admin-dashboard

---
 routes/web.php | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/routes/web.php b/routes/web.php
index 7eb95c2..cc09db8 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -58,19 +58,19 @@
 
 Route::get('/user-dashboard', function () {
     return view ('user-dashboard');
-});
+})->name('user-dashboard');
 
 Route::get('/admin-dashboard', function () {
     return view ('admin-dashboard');
-});
+})->name('admin-dashboard');
 
-Route::get('/actors', function () {
-    return view ('actors');
-});
+// Route::get('/actors', function () {
+//     return view ('actors');
+// });
 
-Route::get('/actorpage', function () {
-    return view ('actorpage');
-});
+// Route::get('/actorpage', function () {
+//     return view ('actorpage');
+// });
 
 Route::get('/admin-settings', function () {
     return view ('admin-settings');

From 47e3e4e9bd9e9829ceeabcd4430a11595bbdfa11 Mon Sep 17 00:00:00 2001
From: Sue-Holding <sue.holding55@gmail.com>
Date: Tue, 4 Feb 2025 19:41:15 +0100
Subject: [PATCH 3/9] components for buttons- create, approve, edit, delete

---
 resources/views/components/approve-button.blade.php | 1 +
 resources/views/components/create-button.blade.php  | 3 +++
 resources/views/components/delete-button.blade.php  | 1 +
 resources/views/components/edit-button.blade.php    | 1 +
 4 files changed, 6 insertions(+)
 create mode 100644 resources/views/components/approve-button.blade.php
 create mode 100644 resources/views/components/create-button.blade.php
 create mode 100644 resources/views/components/delete-button.blade.php
 create mode 100644 resources/views/components/edit-button.blade.php

diff --git a/resources/views/components/approve-button.blade.php b/resources/views/components/approve-button.blade.php
new file mode 100644
index 0000000..56a55d8
--- /dev/null
+++ b/resources/views/components/approve-button.blade.php
@@ -0,0 +1 @@
+<button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Approve</button>
\ No newline at end of file
diff --git a/resources/views/components/create-button.blade.php b/resources/views/components/create-button.blade.php
new file mode 100644
index 0000000..a83773f
--- /dev/null
+++ b/resources/views/components/create-button.blade.php
@@ -0,0 +1,3 @@
+<button type="submit" class="bg-blue-600 text-black px-6 py-3 rounded hover:bg-blue-700 w-full">
+                Create User
+            </button>
\ No newline at end of file
diff --git a/resources/views/components/delete-button.blade.php b/resources/views/components/delete-button.blade.php
new file mode 100644
index 0000000..cfb85e5
--- /dev/null
+++ b/resources/views/components/delete-button.blade.php
@@ -0,0 +1 @@
+<button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">Delete</button>
\ No newline at end of file
diff --git a/resources/views/components/edit-button.blade.php b/resources/views/components/edit-button.blade.php
new file mode 100644
index 0000000..62f4b7c
--- /dev/null
+++ b/resources/views/components/edit-button.blade.php
@@ -0,0 +1 @@
+<button class="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600">Edit</button>
\ No newline at end of file

From ad0deea7eeeac51a149b243cdf7b9dd608ca7bac Mon Sep 17 00:00:00 2001
From: Sue-Holding <sue.holding55@gmail.com>
Date: Tue, 4 Feb 2025 19:41:48 +0100
Subject: [PATCH 4/9] sidebar component for user and admin pages

---
 .../views/components/admin-sidebar.blade.php  | 13 +++++++++++++
 .../views/components/user-sidebar.blade.php   | 19 +++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 resources/views/components/admin-sidebar.blade.php
 create mode 100644 resources/views/components/user-sidebar.blade.php

diff --git a/resources/views/components/admin-sidebar.blade.php b/resources/views/components/admin-sidebar.blade.php
new file mode 100644
index 0000000..5490fc6
--- /dev/null
+++ b/resources/views/components/admin-sidebar.blade.php
@@ -0,0 +1,13 @@
+    <!-- Admin's Sidebar sue's--> 
+    <aside class="w-1/4 h-full bg-blue-950 p-6 text-white">
+    <h1 class="text-2xl font-bold">WATCHLIST</h1>
+        <ul class="space-y-4">
+            <li><a href="{{ route('home') }}" class="block hover:bg-blue-500 p-2 rounded">Home</a></li>
+            <li><a href="{{ route('admin-dashboard') }}" class="block hover:bg-blue-500 p-2 rounded">Admin Page</a></li>
+            <li><a href="{{ route('user_settings') }}" class="block hover:bg-blue-500 p-2 rounded">Profile Settings</a></li>
+            <li><a href="{{ route('review') }}" class="block hover:bg-blue-500 p-2 rounded">Reviews</a></li>
+            <li><a href="#" class="block hover:bg-blue-500 p-2 rounded">Films</a></li>
+            <li><a href="{{ route('admin_settings') }}" class="block hover:bg-blue-500 p-2 rounded">Users</a></li>
+
+        </ul>
+</aside>
\ No newline at end of file
diff --git a/resources/views/components/user-sidebar.blade.php b/resources/views/components/user-sidebar.blade.php
new file mode 100644
index 0000000..ca1f818
--- /dev/null
+++ b/resources/views/components/user-sidebar.blade.php
@@ -0,0 +1,19 @@
+     <!-- User's Sidebar sue's--> 
+     <aside class="w-1/4 h-full bg-blue-950 p-6 text-white">
+    <h1 class="text-2xl font-bold">WATCHLIST</h1>
+        <ul class="space-y-4">
+            <li><a href="{{ route('home') }}" class="block hover:bg-blue-500 p-2 rounded">Home</a></li>
+            <li><a href="{{ route('user-dashboard') }}" class="block hover:bg-blue-500 p-2 rounded">Profile Page</a></li>
+            <li><a href="{{ route('user_settings') }}" class="block hover:bg-blue-500 p-2 rounded">Profile Settings</a></li>
+            <li><a href="{{ route('review') }}" class="block hover:bg-blue-500 p-2 rounded">Reviews</a></li>
+            <li><a href="#" class="block hover:bg-blue-500 p-2 rounded">Films</a></li>
+            <!-- <li><a href="{{ route('admin_settings') }}" class="block hover:bg-blue-500 p-2 rounded">Users</a></li> -->
+
+    <h2 class="mt-6 text-gray-400">Create Watchlist</h2>
+        <div class="mt-2 bg-black text-white px-4 py-2 rounded flex items-center">🎬 Movies by Tom Cruise
+        </div>
+            <div class="mt-4 flex items-center">
+            </div>
+
+        </ul>
+</aside>
\ No newline at end of file

From 141c7a5f0ba6f74fbedd323a1d5689e422593132 Mon Sep 17 00:00:00 2001
From: Sue-Holding <sue.holding55@gmail.com>
Date: Tue, 4 Feb 2025 19:42:18 +0100
Subject: [PATCH 5/9] components for profile photo and profile settings

---
 .../views/components/profile-photo.blade.php  |  9 +++
 .../profile-settings-form.blade.php           | 69 +++++++++++++++++++
 2 files changed, 78 insertions(+)
 create mode 100644 resources/views/components/profile-photo.blade.php
 create mode 100644 resources/views/components/profile-settings-form.blade.php

diff --git a/resources/views/components/profile-photo.blade.php b/resources/views/components/profile-photo.blade.php
new file mode 100644
index 0000000..98ccb99
--- /dev/null
+++ b/resources/views/components/profile-photo.blade.php
@@ -0,0 +1,9 @@
+<div class="w-1/3 flex flex-col items-center space-y-4">
+    <img src="https://via.placeholder.com/300" 
+        alt="Profile Picture" 
+        class="rounded-lg shadow-lg w-64 h-64 object-cover">
+    
+    <button class="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600">
+        Change Profile Image
+    </button>
+</div>
\ No newline at end of file
diff --git a/resources/views/components/profile-settings-form.blade.php b/resources/views/components/profile-settings-form.blade.php
new file mode 100644
index 0000000..224852d
--- /dev/null
+++ b/resources/views/components/profile-settings-form.blade.php
@@ -0,0 +1,69 @@
+<div class="mt-8 p-6 bg-white rounded-lg shadow-lg max-w-4xl ml-12">
+
+    <!-- update username form -->
+<form name="username-settings-update" id="username-settings-update" method="post" action class="flex items-center space-x-4">
+    @csrf
+    
+    <!-- user Name -->
+    <div class="form-group">
+        <label name="">Username</label>
+        <input type="text" placeholder="Your current username" id="userName" name="userName" class="p-3 border rounded w-full" required="">
+    </div>
+
+    <!-- update user Name -->
+    <div class="form-group">
+        <label name="">New username</label>
+        <input type="text" placeholder="Type new username" id="newUserName" name="newUserName" class="p-3 border rounded w-full" required="">
+    </div>
+
+    <!-- Submit Button (Centered) -->
+    <div class="col-span-2 flex justify-center">
+        <button type="submit" class="bg-blue-600 text-black px-4 py-2 rounded hover:bg-blue-700">Update Username</button>
+    </div>
+</form>
+
+    <!-- update email form -->
+<form name="email-settings-update" id="email-settings-update" method="post" action class="flex items-center space-x-4">
+    @csrf
+
+    <!-- email -->
+    <div class="form-group">
+        <label name="">Email</label>
+        <input type="text" placeholder="Your current email" id="email" name="email" class="p-3 border rounded w-full" required="">
+    </div>
+
+    <!-- update email -->
+    <div class="form-group">
+        <label name="">New email</label>
+        <input type="text" placeholder="Type new email" id="newEmail" name="newEmail" class="p-3 border rounded w-full" required="">
+    </div>
+
+    <!-- Submit Button (Centered) -->
+    <div class="col-span-2 flex justify-center">
+        <button type="submit" class="bg-blue-600 text-black px-4 py-2 rounded hover:bg-blue-700">Update Email adress</button>
+    </div>
+</form>
+
+    <!-- request new password form -->
+<form name="password-update" id="password-update" method="post" action class="flex items-center space-x-4">
+    @csrf
+
+    <!-- password -->
+    <div class="form-group">
+        <label name="">Password</label>
+        <input type="text" placeholder="Your current password" id="password" name="password" class="p-3 border rounded w-full" required="">
+    </div>
+
+    <!-- update password -->
+    <div class="form-group">
+        <label name="">New password</label>
+        <input type="text" placeholder="Type new password" id="newPassword" name="newPassword" class="p-3 border rounded w-full" required="">
+    </div>
+
+    <!-- Submit Button (Centered) -->
+    <div class="col-span-2 flex justify-center">
+        <button type="submit" class="bg-blue-600 text-black px-4 py-2 rounded hover:bg-blue-700">Update Password</button>
+    </div>
+</form>
+
+</div>
\ No newline at end of file

From 60d1b85f6c44bd0cf3291c074f7e888f554a9736 Mon Sep 17 00:00:00 2001
From: Sue-Holding <sue.holding55@gmail.com>
Date: Tue, 4 Feb 2025 19:43:00 +0100
Subject: [PATCH 6/9] components for create new user form and search user

---
 .../components/create-new-user-form.blade.php | 41 +++++++++++++++
 .../components/search-user-table.blade.php    | 52 +++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 resources/views/components/create-new-user-form.blade.php
 create mode 100644 resources/views/components/search-user-table.blade.php

diff --git a/resources/views/components/create-new-user-form.blade.php b/resources/views/components/create-new-user-form.blade.php
new file mode 100644
index 0000000..e176b98
--- /dev/null
+++ b/resources/views/components/create-new-user-form.blade.php
@@ -0,0 +1,41 @@
+<!-- Create New User -->
+<h2 class="text-2xl font-semibold text-white mb-4 text-center">Create New User</h2>
+
+<div class="p-6 bg-white rounded-lg shadow-lg w-full mx-auto">
+    <form name="create-new-admin-user" id="create-new-admin-user" method="post" action="" 
+          class="flex w-full gap-6">
+        @csrf
+
+        <!-- First Name -->
+        <div class="flex-1">
+            <label class="block text-gray-700 font-semibold mb-2">First Name</label>
+            <input type="text" placeholder="First Name" id="firstName" name="firstName" 
+                   class="p-3 border rounded w-full" required>
+        </div>
+
+        <!-- Last Name -->
+        <div class="flex-1">
+            <label class="block text-gray-700 font-semibold mb-2">Last Name</label>
+            <input type="text" placeholder="Last Name" id="lastName" name="lastName" 
+                   class="p-3 border rounded w-full" required>
+        </div>
+
+        <!-- Role Selection -->
+        <div class="flex-1">
+            <label class="block text-gray-700 font-semibold mb-2">Role</label>
+            <select name="role" id="role" class="p-3 border rounded w-full">
+                <option value="admin">Admin</option>
+                <option value="user">User</option>
+            </select>
+        </div>
+
+        <!-- Submit Button -->
+        <div class="flex-1 flex items-end">
+            <x-create-button>
+            </x-create-button>
+            <!-- <button type="submit" class="bg-blue-600 text-black px-6 py-3 rounded hover:bg-blue-700 w-full">
+                Create User
+            </button> -->
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/resources/views/components/search-user-table.blade.php b/resources/views/components/search-user-table.blade.php
new file mode 100644
index 0000000..433eaa6
--- /dev/null
+++ b/resources/views/components/search-user-table.blade.php
@@ -0,0 +1,52 @@
+<!-- Search Section -->
+<div class="mb-4 text-center">
+    <form class="flex justify-center gap-4">
+        <input type="text" placeholder="Search by Name" class="p-3 border rounded w-1/3" id="search" name="search">
+        <button type="submit" class="bg-blue-600 text-black px-6 py-3 rounded hover:bg-blue-700">Search</button>
+    </form>
+</div>
+            
+<!-- Users Table -->
+    <div class="w-full bg-white rounded-lg shadow-lg overflow-hidden mb-6">
+        <table class="w-full text-left border-collapse">
+            <thead>
+                <tr class="bg-blue-600 text-black">
+                    <th class="p-4" style="display: none;">User ID</th>
+                    <th class="p-4">First Name</th>
+                    <th class="p-4">Last Name</th>
+                    <th class="p-4">Role</th>
+                    <th class="p-4 text-center">Actions</th>
+                </tr>
+            </thead>
+            <tbody class="text-gray-700">
+                <tr class="border-b hover:bg-gray-100">
+                    <td class="p-4" style="display: none;">1</td> <!-- Hidden User ID -->
+                    <td class="p-4">John</td>
+                    <td class="p-4">Doe</td>
+                    <td class="p-4">Admin</td>
+                    <td class="p-4 text-center">
+                        <x-edit-button>
+                        </x-edit-button>
+                        <x-delete-button>
+                        </x-delete-button>
+                        <!-- <button class="bg-yellow-500 text-black px-4 py-2 rounded hover:bg-yellow-600">Edit</button>
+                        <button class="bg-red-500 text-black px-4 py-2 rounded hover:bg-red-600">Delete</button> -->
+                    </td>
+                </tr>
+                <tr class="border-b hover:bg-gray-100">
+                    <td class="p-4" style="display: none;">1</td> <!-- Hidden User ID -->
+                    <td class="p-4">Jane</td>
+                    <td class="p-4">Smith</td>
+                    <td class="p-4">User</td>
+                    <td class="p-4 text-center">
+                    <x-edit-button>
+                        </x-edit-button>
+                        <x-delete-button>
+                        </x-delete-button>
+                        <!-- <button class="bg-yellow-500 text-black px-4 py-2 rounded hover:bg-yellow-600">Edit</button>
+                        <button class="bg-red-500 text-black px-4 py-2 rounded hover:bg-red-600">Delete</button> -->
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
\ No newline at end of file

From 388033559a7778c0d4b1cfc8dcd4218a8a06f4a6 Mon Sep 17 00:00:00 2001
From: Sue-Holding <sue.holding55@gmail.com>
Date: Tue, 4 Feb 2025 19:43:23 +0100
Subject: [PATCH 7/9] component for pending reviews table display

---
 .../pending-reviews-table.blade.php           | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 resources/views/components/pending-reviews-table.blade.php

diff --git a/resources/views/components/pending-reviews-table.blade.php b/resources/views/components/pending-reviews-table.blade.php
new file mode 100644
index 0000000..3a7f453
--- /dev/null
+++ b/resources/views/components/pending-reviews-table.blade.php
@@ -0,0 +1,49 @@
+<!-- Pending Reviews Title -->
+<h2 class="text-2xl font-semibold text-white mb-4 w-full text-center">Pending Reviews</h2>
+
+<!-- Full-Screen Reviews Table -->
+<div class="w-full flex-grow bg-black rounded-lg shadow-lg overflow-hidden">
+    <table class="w-full border-collapse">
+        <!-- Table Header -->
+        <thead>
+            <tr class="bg-blue-600 text-white text-left">
+                <th class="p-4">Review</th>
+                <th class="p-4">Film Name</th>
+                <th class="p-4">Rating</th>
+                <th class="p-4">User ID</th>
+                <th class="p-4 text-center">Actions</th>
+            </tr>
+        </thead>
+        <!-- Table Body -->
+        <tbody class="text-white">
+            <tr class="border-b border-gray-700">
+                <td class="p-4">Amazing movie, loved it!</td>
+                <td class="p-4">Inception</td>
+                <td class="p-4">5/5</td>
+                <td class="p-4">User123</td>
+                <td class="p-4 flex justify-center space-x-2">
+                    <x-approve-button>
+                    </x-approve-button>
+                    <x-edit-button>
+                    </x-edit-button>
+                    <x-delete-button>
+                    </x-delete-button>
+                    <!-- <button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Approve</button>
+                    <button class="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600">Edit</button>
+                    <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">Delete</button> -->
+                </td>
+            </tr>
+            <tr class="border-b border-gray-700">
+                <td class="p-4">Best Batman movie!</td>
+                <td class="p-4">The Dark Knight</td>
+                <td class="p-4">4.8/5</td>
+                <td class="p-4">User456</td>
+                <td class="p-4 flex justify-center space-x-2">
+                    <button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Approve</button>
+                    <button class="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600">Edit</button>
+                    <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">Delete</button>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
\ No newline at end of file

From 45a71805ed32935e051dfa0e766050edc89369a3 Mon Sep 17 00:00:00 2001
From: Sue-Holding <sue.holding55@gmail.com>
Date: Tue, 4 Feb 2025 19:43:50 +0100
Subject: [PATCH 8/9] component for watchlist gallery for profile page

---
 .../views/components/watchlist-gallery.blade.php | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 resources/views/components/watchlist-gallery.blade.php

diff --git a/resources/views/components/watchlist-gallery.blade.php b/resources/views/components/watchlist-gallery.blade.php
new file mode 100644
index 0000000..d8fd87c
--- /dev/null
+++ b/resources/views/components/watchlist-gallery.blade.php
@@ -0,0 +1,16 @@
+<!-- Watchlist Gallery (Fixed 3x3 Grid) -->
+<div class="flex-1 pl-6">
+    <h2 class="text-2xl font-semibold text-white mb-4">Your Watchlist</h2>
+                
+        <div class="grid grid-cols-3 gap-4">
+                <div><img src="https://via.placeholder.com/300" alt="Gallery Image" class="rounded-lg shadow-lg w-full"></div>
+                <div><img src="https://via.placeholder.com/300" alt="Gallery Image" class="rounded-lg shadow-lg w-full"></div>
+                <div><img src="https://via.placeholder.com/300" alt="Gallery Image" class="rounded-lg shadow-lg w-full"></div>
+                <div><img src="https://via.placeholder.com/300" alt="Gallery Image" class="rounded-lg shadow-lg w-full"></div>
+                <div><img src="https://via.placeholder.com/300" alt="Gallery Image" class="rounded-lg shadow-lg w-full"></div>
+                <div><img src="https://via.placeholder.com/300" alt="Gallery Image" class="rounded-lg shadow-lg w-full"></div>
+                <div><img src="https://via.placeholder.com/300" alt="Gallery Image" class="rounded-lg shadow-lg w-full"></div>
+                <div><img src="https://via.placeholder.com/300" alt="Gallery Image" class="rounded-lg shadow-lg w-full"></div>
+                <div><img src="https://via.placeholder.com/300" alt="Gallery Image" class="rounded-lg shadow-lg w-full"></div>
+        </div>
+</div>
\ No newline at end of file

From 089f48149114d67d75a2312096690d8e0bdf54e4 Mon Sep 17 00:00:00 2001
From: Sue-Holding <sue.holding55@gmail.com>
Date: Wed, 5 Feb 2025 07:54:31 +0100
Subject: [PATCH 9/9] Updated code based on PR feedback

---
 resources/views/admin-dashboard.blade.php     | 11 ++++------
 resources/views/admin-settings.blade.php      | 22 +++++++++----------
 .../views/components/create-button.blade.php  |  4 +---
 resources/views/user-dashboard.blade.php      | 10 ++++-----
 resources/views/user-settings.blade.php       | 16 +++++---------
 5 files changed, 25 insertions(+), 38 deletions(-)

diff --git a/resources/views/admin-dashboard.blade.php b/resources/views/admin-dashboard.blade.php
index a5ef7b1..f8bae2c 100644
--- a/resources/views/admin-dashboard.blade.php
+++ b/resources/views/admin-dashboard.blade.php
@@ -1,9 +1,8 @@
 @extends('layouts.app')
 
 @section('content')
-<body>
-    <div class="flex h-full">
-    <div class="flex h-screen">
+<div class="flex h-full">
+<div class="flex h-screen">
 
     <!-- Sidebar -->
     <x-admin-sidebar>
@@ -20,8 +19,6 @@
     </x-pending-reiviews-table>    
 
         </main>
-    </div>   
-    </div>
-</body>
-
+</div>   
+</div>
 @endsection
diff --git a/resources/views/admin-settings.blade.php b/resources/views/admin-settings.blade.php
index 03860c1..a7fd8ec 100644
--- a/resources/views/admin-settings.blade.php
+++ b/resources/views/admin-settings.blade.php
@@ -1,27 +1,25 @@
 @extends('layouts.app')
 
 @section('content')
-<body>
-    <div class="flex h-full">
-    <div class="flex h-screen">
+<div class="flex h-full">
+<div class="flex h-screen">
         
       <!-- Sidebar -->
-    <x-admin-sidebar>
-    </x-admin-sidebar> 
+  <x-admin-sidebar>
+  </x-admin-sidebar> 
 
     <!-- Main Content -->
     <main class="flex-1 p-6">
         <h2 class="text-2xl font-semibold text-white mb-4 text-center">Welcome, John Doe</h2>
         <h2 class="text-2xl font-semibold text-white mb-4 text-center">Users List</h2>
 
-    <x-search-user-table>
-    </x-search-user-table>   
+  <x-search-user-table>
+  </x-search-user-table>   
 
-    <x-create-new-user-form>  
-    </x-create-new-user-form>      
+  <x-create-new-user-form>  
+  </x-create-new-user-form>      
 
     </main>
-    </div>
-    </div>
-</body>
+</div>
+</div>
 @endsection
\ No newline at end of file
diff --git a/resources/views/components/create-button.blade.php b/resources/views/components/create-button.blade.php
index a83773f..44d913d 100644
--- a/resources/views/components/create-button.blade.php
+++ b/resources/views/components/create-button.blade.php
@@ -1,3 +1 @@
-<button type="submit" class="bg-blue-600 text-black px-6 py-3 rounded hover:bg-blue-700 w-full">
-                Create User
-            </button>
\ No newline at end of file
+<button type="submit" class="bg-blue-600 text-black px-6 py-3 rounded hover:bg-blue-700 w-full">Create User</button>
\ No newline at end of file
diff --git a/resources/views/user-dashboard.blade.php b/resources/views/user-dashboard.blade.php
index 1a9eeba..6e3dfa0 100644
--- a/resources/views/user-dashboard.blade.php
+++ b/resources/views/user-dashboard.blade.php
@@ -1,9 +1,8 @@
 @extends('layouts.app')
 
 @section('content')
-<body>
-    <div class="flex h-full">
-    <div class="flex h-screen">
+<div class="flex h-full">
+<div class="flex h-screen">
      
     <!-- Sidebar -->
     <x-user-sidebar>
@@ -26,7 +25,6 @@
 
             </div>
     </main>
-    </div>
-    </div>
-</body>
+</div>
+</div>
 @endsection
diff --git a/resources/views/user-settings.blade.php b/resources/views/user-settings.blade.php
index 7d7c235..94c80a2 100644
--- a/resources/views/user-settings.blade.php
+++ b/resources/views/user-settings.blade.php
@@ -1,9 +1,8 @@
 @extends('layouts.app')
 
 @section('content')
-<body>
-    <div class="flex h-full">
-    <div class="flex h-screen">
+<div class="flex h-full">
+<div class="flex h-screen">
 
     <!-- Sidebar -->
     <x-user-sidebar>    
@@ -20,15 +19,12 @@
     <!-- Profile Image -->
     <x-profile-photo>
     </x-profile-photo> 
-               
-            
+                      
     <x-profile-settings-form>
     </x-profile-settings-form>
             </div>
 
-    </main>
-    
-    </div>
-    </div>
-</body>         
+    </main>  
+</div>
+</div>        
 @endsection
\ No newline at end of file

Review	Film Name	Rating	User ID	Actions
Amazing movie, loved it!	Inception	5/5	User123	- - - -
Best Batman movie!	The Dark Knight	4.8/5	User456	- - - -