diff --git a/app/Http/Controllers/Crud/ClientAdmin/MeetingController.php b/app/Http/Controllers/Crud/ClientAdmin/MeetingController.php
new file mode 100644
index 0000000..a626a07
--- /dev/null
+++ b/app/Http/Controllers/Crud/ClientAdmin/MeetingController.php
@@ -0,0 +1,182 @@
+<?php
+
+namespace App\Http\Controllers\Crud\ClientAdmin;
+
+use App\Http\Controllers\Controller;
+use App\Models\Meeting;
+use App\Models\User;
+use App\Models\Task;
+use App\Models\Agenda;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class MeetingController extends Controller
+{
+    public function index()
+    {
+        $clientId = auth()->user()->client->id;
+
+        $meetings = Meeting::where('client_id', $clientId)
+            ->with(['users' => function ($query) use ($clientId) {
+                $query->where('users.client_id', $clientId)
+                    ->select('users.id', 'users.name', 'users.email');
+            }])
+            ->with(['tasks' => function ($query) use ($clientId) {
+                $query->where('tasks.client_id', $clientId)
+                    ->select('tasks.id', 'tasks.name', 'tasks.status')
+                    ->withPivot('meeting_id');
+            }])
+            ->get();
+
+        $availableUsers = User::where('client_id', $clientId)
+            ->select('id', 'name', 'email')
+            ->get();
+
+        $availableTasks = Task::where('client_id', $clientId)
+            ->select('id', 'name', 'status')
+            ->get();
+
+        return Inertia::render('admin/admin-meeting-list', [
+            'meetings' => $meetings,
+            'users' => $availableUsers,
+            'tasks' => $availableTasks
+        ]);
+    }
+
+    public function store(Request $request)
+    {   
+        $request->validate([
+            'title' => 'required|string|max:255',
+            'date' => 'required|date',
+            'type' => 'required|string|max:255',
+            'agenda_text' => 'required|string',
+            'users' => 'nullable|array',
+            'users.*' => 'exists:users,id',
+            'tasks' => 'nullable|array',
+            'tasks.*' => 'exists:tasks,id'
+        ]);
+        
+        $clientId = auth()->user()->client->id;
+
+        // Create agenda first
+        $agenda = Agenda::create([
+            'text' => $request->agenda_text,
+            'client_id' => $clientId,
+        ]);
+
+        $meeting = Meeting::create([
+            'title' => $request->title,
+            'date' => $request->date,
+            'type' => $request->type,
+            'agenda_id' => $agenda->id,
+            'client_id' => $clientId,
+        ]);
+
+        if ($request->has('users')) {
+            $meeting->users()->attach($request->users);
+        }
+
+        if ($request->has('tasks')) {
+            $meeting->tasks()->attach($request->tasks);
+        }
+
+        session()->flash('success', 'Meeting created successfully!');
+        return back();
+    }
+
+    public function show(Meeting $meeting)
+    {
+        $clientId = auth()->user()->client->id;
+
+        // Ensure the meeting belongs to the client
+        if ($meeting->client_id !== $clientId) {
+            abort(403);
+        }
+
+        // Load the meeting with its relationships and agenda
+        $meeting->load(['users' => function ($query) use ($clientId) {
+            $query->where('users.client_id', $clientId)
+                ->select('users.id', 'users.name', 'users.email');
+        }])
+        ->load(['tasks' => function ($query) use ($clientId) {
+            $query->where('tasks.client_id', $clientId)
+                ->select('tasks.id', 'tasks.name', 'tasks.status');
+        }])
+        ->load('agenda');
+
+        // Add agenda_text to the meeting data
+        $meeting->agenda_text = $meeting->agenda->text;
+
+        // Get all available users and tasks for the form
+        $availableUsers = User::where('client_id', $clientId)
+            ->select('id', 'name', 'email')
+            ->get();
+
+        $availableTasks = Task::where('client_id', $clientId)
+            ->select('id', 'name', 'status')
+            ->get();
+
+        return Inertia::render('admin/admin-meeting-details', [
+            'meeting' => $meeting,
+            'users' => $availableUsers,
+            'tasks' => $availableTasks
+        ]);
+    }
+
+    public function update(Request $request, Meeting $meeting)
+    {
+        // Ensure the meeting belongs to the client
+        if ($meeting->client_id !== auth()->user()->client->id) {
+            abort(403, 'Unauthorized');
+        }
+
+        $request->validate([
+            'title' => 'required|string|max:255',
+            'date' => 'required|date',
+            'type' => 'required|string|max:255',
+            'agenda_text' => 'required|string',
+            'users' => 'nullable|array',
+            'users.*' => 'exists:users,id',
+            'tasks' => 'nullable|array',
+            'tasks.*' => 'exists:tasks,id'
+        ]);
+
+        // Update the meeting
+        $meeting->update([
+            'title' => $request->title,
+            'date' => $request->date,
+            'type' => $request->type,
+        ]);
+
+        // Update the agenda
+        $meeting->agenda()->update([
+            'text' => $request->agenda_text
+        ]);
+
+        // Sync users and tasks if they are provided
+        if ($request->has('users')) {
+            $meeting->users()->sync($request->users);
+        }
+
+        if ($request->has('tasks')) {
+            $meeting->tasks()->sync($request->tasks);
+        }
+
+        session()->flash('success', 'Meeting updated successfully!');
+        return back();
+    }
+
+    public function destroy(Meeting $meeting)
+    {
+        // Ensure the meeting belongs to the client
+        if ($meeting->client_id !== auth()->user()->client->id) {
+            abort(403, 'Unauthorized');
+        }
+
+        // Delete the meeting (this will cascade delete the agenda due to the relationship)
+        $meeting->delete();
+
+        session()->flash('success', 'Meeting deleted successfully!');
+        return redirect()->route('admin.meetings.index');
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Crud/ClientAdmin/TaskController.php b/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
new file mode 100644
index 0000000..1302bed
--- /dev/null
+++ b/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
@@ -0,0 +1,126 @@
+<?php
+
+namespace App\Http\Controllers\Crud\ClientAdmin;
+
+use App\Http\Controllers\Controller;
+use App\Models\Task;
+use App\Models\User;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class TaskController extends Controller
+{
+    public function index()
+    {
+        $clientId = auth()->user()->client->id;
+
+        $tasks = Task::where('client_id', $clientId)
+            ->with(['users' => function ($query) use ($clientId) {
+                $query->where('users.client_id', $clientId)
+                    ->select('users.id', 'users.name', 'users.email');
+            }])
+            ->get();
+
+        $users = User::where('client_id', $clientId)
+            ->select('id', 'name', 'email')
+            ->get();
+
+        return Inertia::render('admin/admin-task-list', [
+            'tasks' => $tasks,
+            'users' => $users
+        ]);
+    }
+
+    public function store(Request $request)
+    {
+        $request->validate([
+            'name' => 'required|string|max:255',
+            'description' => 'required|string|max:255',
+            'status' => 'required|in:pending,in_progress,completed',
+            'priority' => 'required|in:low,medium,high',
+            'due_date' => 'nullable|date',
+            'users' => 'array',
+            'users.*' => 'exists:users,id'
+        ]);
+
+        $task = Task::create([
+            'name' => $request->name,
+            'description' => $request->description,
+            'status' => $request->status,
+            'priority' => $request->priority,
+            'due_date' => $request->due_date,
+            'client_id' => auth()->user()->client->id
+        ]);
+
+        if ($request->has('users')) {
+            $task->users()->attach($request->users);
+        }
+        session()->flash('success', 'Task created successfully!');
+        return back();
+    }   
+
+    public function show(Task $task)
+    {
+        // Ensure the task belongs to the user's client
+        if ($task->client_id !== auth()->user()->client->id) {
+            abort(403, 'Unauthorized');
+        }
+
+        $clientId = auth()->user()->client->id;
+
+        // Get all users for the client, for the task details page (to assign users to the task)
+        $all_users = User::where('client_id', $clientId)
+            ->select('id', 'name', 'email')
+            ->get();
+
+        return Inertia::render('admin/admin-task-details', [
+            'task' => $task->load(['users' => function ($query) use ($clientId) {
+                $query->where('users.client_id', $clientId)
+                    ->select('users.id', 'users.name', 'users.email');
+            }]),
+            'all_users' => $all_users
+        ]);
+    }
+
+    public function update(Request $request, Task $task)
+    {
+        // Ensure the task belongs to the user's client
+        if ($task->client_id !== auth()->user()->client->id) {
+            abort(403, 'Unauthorized');
+        }
+
+        $request->validate([
+            'name' => 'required|string|max:255',
+            'description' => 'required|string|max:255',
+            'status' => 'required|in:pending,in_progress,completed',
+            'priority' => 'required|in:low,medium,high',
+            'due_date' => 'nullable|date',
+            'users' => 'array',
+            'users.*' => 'exists:users,id'
+        ]);
+
+        $task->update($request->only(['name', 'description', 'status', 'priority', 'due_date']));
+
+        if ($request->has('users')) {
+            $task->users()->sync($request->users);
+        }
+
+        session()->flash('success', 'Task updated successfully!');
+        return back();
+    }
+
+    public function destroy(Task $task)
+    {
+        // Ensure the task belongs to the user's client
+        if ($task->client_id !== auth()->user()->client->id) {
+            abort(403, 'Unauthorized');
+        }
+
+        $task->delete();
+        session()->flash('success', 'Task deleted successfully!');
+        return redirect()->route('admin.tasks.index');
+    }
+    
+    
+       
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Crud/ClientAdmin/UserController.php b/app/Http/Controllers/Crud/ClientAdmin/UserController.php
index 02c4c74..46a13c1 100644
--- a/app/Http/Controllers/Crud/ClientAdmin/UserController.php
+++ b/app/Http/Controllers/Crud/ClientAdmin/UserController.php
@@ -15,8 +15,10 @@ class UserController extends Controller
 {
     public function index()
     {
-        $users = User::where('client_id', auth()->user()->client_id)->get();
-        return Inertia::render('Users/user-list', [
+        $users = User::where('client_id', auth()->user()->client_id)
+            ->with('role:id,name')
+            ->get();
+        return Inertia::render('admin/admin-user-list', [
             'users' => $users,
             'roles' => Role::all(['id', 'name'])->except(1)//exclude the system admin role
         ]);        
@@ -43,7 +45,7 @@ public function store(Request $request)
             'client_id' => $request->client_id,
             'role_id' => $request->role_id,
         ]);
-
+        session()->flash('success', 'User created successfully!');
         return back();
     }
     
@@ -66,6 +68,7 @@ public function update(Request $request, User $user)
 
 
         $user->update($validated);
+        session()->flash('success', 'User updated successfully!');
         return back();
     }
 
@@ -75,7 +78,7 @@ public function show(User $user)
             abort(403, 'Unauthorized');
         }
 
-        return Inertia::render('Users/user-details', [
+        return Inertia::render('admin/admin-user-details', [
             'user' => $user
         ]);
     }
@@ -83,7 +86,8 @@ public function show(User $user)
     public function destroy(User $user)
     {
         $user->delete();
-        return redirect()->route('users.index');
+        session()->flash('success', 'User deleted successfully!');
+        return redirect()->route('admin.users.index');
     }
     
     
diff --git a/app/Models/Role.php b/app/Models/Role.php
index 20c2b46..2da315e 100644
--- a/app/Models/Role.php
+++ b/app/Models/Role.php
@@ -3,9 +3,12 @@
 namespace App\Models;
 
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
 
 class Role extends Model
 {
+    use SoftDeletes;
+
     protected $fillable = ['name', 'description'];
 
     public function users()
diff --git a/app/Models/Task.php b/app/Models/Task.php
index 8f6819b..bf07704 100644
--- a/app/Models/Task.php
+++ b/app/Models/Task.php
@@ -3,6 +3,9 @@
 namespace App\Models;
 
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 
 class Task extends Model
 {
@@ -14,20 +17,21 @@ class Task extends Model
         'status',
         'priority',
         'due_date',
+        'client_id'
     ];
 
-    public function users()
+    public function client(): BelongsTo
     {
-        return $this->belongsToMany(User::class);
+        return $this->belongsTo(Client::class);
     }
 
-    public function meetings()
+    public function users(): BelongsToMany
     {
-        return $this->belongsToMany(Meeting::class);
+        return $this->belongsToMany(User::class);
     }
 
-    public function clients()
+    public function meetings()
     {
-        return $this->belongsToMany(Client::class);
+        return $this->belongsToMany(Meeting::class);
     }
 }
diff --git a/app/Models/User.php b/app/Models/User.php
index 3727e95..67d495d 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -8,11 +8,12 @@
 use Illuminate\Notifications\Notifiable;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
+use Illuminate\Database\Eloquent\SoftDeletes;
 
 class User extends Authenticatable
 {
     /** @use HasFactory<\Database\Factories\UserFactory> */
-    use HasFactory, Notifiable;
+    use HasFactory, Notifiable, SoftDeletes;
 
     /**
      * The attributes that are mass assignable.
@@ -69,4 +70,5 @@ public function role(): BelongsTo
     {
         return $this->belongsTo(Role::class);
     }
+
 }
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 452e6b6..eaf988a 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -3,6 +3,7 @@
 namespace App\Providers;
 
 use Illuminate\Support\ServiceProvider;
+use Inertia\Inertia;
 
 class AppServiceProvider extends ServiceProvider
 {
@@ -19,6 +20,12 @@ public function register(): void
      */
     public function boot(): void
     {
-        //
+        Inertia::share([
+            'flash' => function () {
+                return [
+                    'success' => session('success'),
+                ];
+            },
+        ]);
     }
 }
diff --git a/database/migrations/0001_01_01_000000_create_users_table.php b/database/migrations/0001_01_01_000000_create_users_table.php
index e273a0c..3dad911 100644
--- a/database/migrations/0001_01_01_000000_create_users_table.php
+++ b/database/migrations/0001_01_01_000000_create_users_table.php
@@ -19,6 +19,7 @@ public function up(): void
             $table->string('password');
             $table->boolean('password_set')->default(false);
             $table->rememberToken();
+            $table->softDeletes();
             $table->timestamps();
         });
 
diff --git a/database/migrations/2025_04_29_063856_create_tasks_table.php b/database/migrations/2025_04_29_063856_create_tasks_table.php
index 7eaf60b..42f88b8 100644
--- a/database/migrations/2025_04_29_063856_create_tasks_table.php
+++ b/database/migrations/2025_04_29_063856_create_tasks_table.php
@@ -13,6 +13,7 @@ public function up(): void
     {
         Schema::create('tasks', function (Blueprint $table) {
             $table->id();
+            $table->foreignId('client_id')->constrained()->onDelete('cascade');
             $table->string('name');
             $table->string('description');
             $table->enum('status', ['pending', 'in_progress', 'completed']);
diff --git a/database/migrations/2025_04_30_181719_create_client_task_table.php b/database/migrations/2025_04_30_181719_create_client_task_table.php
deleted file mode 100644
index dae705f..0000000
--- a/database/migrations/2025_04_30_181719_create_client_task_table.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php
-
-use Illuminate\Database\Migrations\Migration;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Support\Facades\Schema;
-use Illuminate\Database\Eloquent\SoftDeletes;
-
-return new class extends Migration
-{
-    /**
-     * Run the migrations.
-     */
-    public function up(): void
-    {
-        Schema::create('client_task', function (Blueprint $table) {
-            $table->id();
-            $table->foreignId('client_id')->constrained('clients');
-            $table->foreignId('task_id')->constrained('tasks');
-            $table->timestamps();
-            $table->softDeletes();
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     */
-    public function down(): void
-    {
-        Schema::dropIfExists('client_task');
-    }
-};
diff --git a/database/seeders/AdditionalUsersSeeder.php b/database/seeders/AdditionalUsersSeeder.php
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/database/seeders/AdditionalUsersSeeder.php
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/database/seeders/AgendaSeeder.php b/database/seeders/AgendaSeeder.php
new file mode 100644
index 0000000..5cdf1bd
--- /dev/null
+++ b/database/seeders/AgendaSeeder.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
+use Carbon\Carbon;
+use App\Models\Agenda;
+
+class AgendaSeeder extends Seeder
+{
+    public function run()
+    {
+        Agenda::create([
+            'text' => 'Agenda 1',
+        ]);
+
+        Agenda::create([
+            'text' => 'Agenda 2',
+        ]);
+
+        Agenda::create([
+            'text' => 'Agenda 3',
+        ]);
+    }
+}
diff --git a/database/seeders/ClientSeeder.php b/database/seeders/ClientSeeder.php
index 94c401e..0f90a4f 100644
--- a/database/seeders/ClientSeeder.php
+++ b/database/seeders/ClientSeeder.php
@@ -12,7 +12,7 @@ class ClientSeeder extends Seeder
     public function run()
     {
         Client::create([
-            'name' => 'Starplot',
+            'name' => 'Equippers',
         ]);
     }
 }
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 680f325..de6af81 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -16,6 +16,9 @@ public function run(): void
             ClientSeeder::class,
             SystemAdminSeeder::class,
             UserSeeder::class,
+            TaskSeeder::class,
+            AgendaSeeder::class,
+            MeetingSeeder::class,
         ]);
     }
 }
diff --git a/database/seeders/MeetingSeeder.php b/database/seeders/MeetingSeeder.php
new file mode 100644
index 0000000..1dcbeca
--- /dev/null
+++ b/database/seeders/MeetingSeeder.php
@@ -0,0 +1,60 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
+use Carbon\Carbon;
+use App\Models\Meeting;
+use App\Models\User;
+use App\Models\Task;
+
+class MeetingSeeder extends Seeder
+{
+    public function run()
+    {
+        // Get some users to assign to tasks
+        $users = User::where('client_id', 1)->take(5)->get();
+
+        // Get some tasks to assign to meetings
+        $tasks = Task::where('client_id', 1)->take(5)->get();
+
+        $meetings = [
+            [
+                'title' => 'Meeting 1',
+                'date' => Carbon::now(),
+                'type' => 'Online Meeting ',
+                'agenda_id' => 1,
+                'client_id' => 1,
+            ],
+            [
+                'title' => 'Meeting 2',
+                'date' => Carbon::now(),
+                'type' => 'In-Person Meeting',
+                'agenda_id' => 2,
+                'client_id' => 1,
+            ],
+            [
+                'title' => 'Meeting 3',
+                'date' => Carbon::now(),
+                'type' => 'In-Person Meeting',
+                'agenda_id' => 3,
+                'client_id' => 1,
+            ],
+        ];
+
+        foreach ($meetings as $meeting) {
+            $meeting = Meeting::create($meeting);
+
+            $meeting->users()->attach(
+                $users->random(2)->pluck('id')->toArray(),
+                ['created_at' => now(), 'updated_at' => now()]
+            );
+
+            $meeting->tasks()->attach(
+                $tasks->random(2)->pluck('id')->toArray(),
+                ['created_at' => now(), 'updated_at' => now()]
+            );
+        }
+    }
+}
diff --git a/database/seeders/TaskSeeder.php b/database/seeders/TaskSeeder.php
new file mode 100644
index 0000000..0b49895
--- /dev/null
+++ b/database/seeders/TaskSeeder.php
@@ -0,0 +1,73 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Seeder;
+use App\Models\Task;
+use App\Models\User;
+use App\Models\Client;
+use App\Models\Role;
+
+class TaskSeeder extends Seeder
+{
+    public function run(): void
+    {
+
+        // Get some users to assign to tasks
+        $users = User::where('client_id', 1)->take(3)->get();
+
+        // Create 5 tasks for client 1
+        $tasks = [
+            [
+                'name' => 'Implement User Authentication',
+                'description' => 'Set up secure user authentication system with JWT tokens',
+                'status' => 'in_progress',
+                'priority' => 'high',
+                'due_date' => now()->addDays(7),
+                'client_id' => 1,
+            ],
+            [
+                'name' => 'Design Database Schema',
+                'description' => 'Create and optimize database schema for the application',
+                'status' => 'completed',
+                'priority' => 'high',
+                'due_date' => now()->subDays(2),
+                'client_id' => 1,
+            ],
+            [
+                'name' => 'Create API Documentation',
+                'description' => 'Write comprehensive API documentation for all endpoints',
+                'status' => 'pending',
+                'priority' => 'medium',
+                'due_date' => now()->addDays(14),
+                'client_id' => 1,
+            ],
+            [
+                'name' => 'Implement Task Management',
+                'description' => 'Build task management system with CRUD operations',
+                'status' => 'in_progress',
+                'priority' => 'high',
+                'due_date' => now()->addDays(5),
+                'client_id' => 1,
+            ],
+            [
+                'name' => 'Setup CI/CD Pipeline',
+                'description' => 'Configure continuous integration and deployment pipeline',
+                'status' => 'pending',
+                'priority' => 'medium',
+                'due_date' => now()->addDays(10),
+                'client_id' => 1,
+            ],
+        ];
+
+        foreach ($tasks as $taskData) {
+            $task = Task::create($taskData);
+            
+            // Assign 2 random users to each task
+            $task->users()->attach(
+                $users->random(2)->pluck('id')->toArray(),
+                ['created_at' => now(), 'updated_at' => now()]
+            );
+        }
+    }
+} 
\ No newline at end of file
diff --git a/database/seeders/UserSeeder.php b/database/seeders/UserSeeder.php
index fef625f..65ed2ab 100644
--- a/database/seeders/UserSeeder.php
+++ b/database/seeders/UserSeeder.php
@@ -12,28 +12,119 @@ class UserSeeder extends Seeder
 {
     public function run()
     {
-        
-        User::create([
-            # client admin
-            'name' => 'Ryan Mueller',
-            'password' => Hash::make('password'),
-            'email' => 'ryan@starplot.ai',
-            'password_set' => true,
-            'email_verified_at' => now(),
-            'client_id' => 1,
-            'role_id' => 2,
+        $users = [
+            [
+                'name' => 'Ryan Mueller',
+                'email' => 'ryan@equippers.com',
+                'role_id' => 2, // Client-Admin
+            ],
+            [
+                'name' => 'Andrew McDowell',
+                'email' => 'andrew@equippers.com',
+                'role_id' => 3, // Member
+            ],
+            [
+                'name' => 'Allison Port',
+                'email' => 'allison@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'George Kalafatis',
+                'email' => 'george@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'John Doe',
+                'email' => 'john@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Sarah Johnson',
+                'email' => 'sarah@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Michael Chen',
+                'email' => 'michael@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Emma Wilson',
+                'email' => 'emma@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'David Brown',
+                'email' => 'david@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Lisa Anderson',
+                'email' => 'lisa@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'James Taylor',
+                'email' => 'james@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Rachel Martinez',
+                'email' => 'rachel@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Thomas White',
+                'email' => 'thomas@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Olivia Lee',
+                'email' => 'olivia@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Daniel Kim',
+                'email' => 'daniel@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Sophia Garcia',
+                'email' => 'sophia@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'William Clark',
+                'email' => 'william@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Ava Rodriguez',
+                'email' => 'ava@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Ethan Moore',
+                'email' => 'ethan@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Isabella Thompson',
+                'email' => 'isabella@equippers.com',
+                'role_id' => 3,
+            ],
+        ];
 
-        ]);
-
-        User::create([
-            # client member
-            'name' => 'Andrew McDowell',
-            'password' => Hash::make('password'),
-            'email' => 'andrew@starplot.ai',
-            'password_set' => true,
-            'email_verified_at' => now(),
-            'client_id' => 1,
-            'role_id' => 3,
-        ]);
+        foreach ($users as $userData) {
+            User::create([
+                'name' => $userData['name'],
+                'email' => $userData['email'],
+                'password' => Hash::make('password'),
+                'password_set' => true,
+                'email_verified_at' => now(),
+                'client_id' => 1,
+                'role_id' => $userData['role_id'],
+            ]);
+        }
     }
 }
diff --git a/package-lock.json b/package-lock.json
index ddc58af..58dd788 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,10 +10,12 @@
                 "@radix-ui/react-avatar": "^1.1.3",
                 "@radix-ui/react-checkbox": "^1.1.4",
                 "@radix-ui/react-collapsible": "^1.1.3",
-                "@radix-ui/react-dialog": "^1.1.6",
+                "@radix-ui/react-dialog": "^1.1.14",
                 "@radix-ui/react-dropdown-menu": "^2.1.6",
                 "@radix-ui/react-label": "^2.1.2",
                 "@radix-ui/react-navigation-menu": "^1.2.5",
+                "@radix-ui/react-popover": "^1.1.14",
+                "@radix-ui/react-progress": "^1.1.7",
                 "@radix-ui/react-select": "^2.1.6",
                 "@radix-ui/react-separator": "^1.1.2",
                 "@radix-ui/react-slot": "^1.1.2",
@@ -27,7 +29,9 @@
                 "@vitejs/plugin-react": "^4.3.4",
                 "class-variance-authority": "^0.7.1",
                 "clsx": "^2.1.1",
+                "cmdk": "^1.1.1",
                 "concurrently": "^9.0.1",
+                "date-fns": "^4.1.0",
                 "globals": "^15.14.0",
                 "laravel-vite-plugin": "^1.0",
                 "lucide-react": "^0.475.0",
@@ -1302,23 +1306,23 @@
             }
         },
         "node_modules/@radix-ui/react-dialog": {
-            "version": "1.1.6",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.6.tgz",
-            "integrity": "sha512-/IVhJV5AceX620DUJ4uYVMymzsipdKBzo3edo+omeskCKGm9FRHM0ebIdbPnlQVJqyuHbuBltQUOG2mOTq2IYw==",
-            "license": "MIT",
-            "dependencies": {
-                "@radix-ui/primitive": "1.1.1",
-                "@radix-ui/react-compose-refs": "1.1.1",
-                "@radix-ui/react-context": "1.1.1",
-                "@radix-ui/react-dismissable-layer": "1.1.5",
-                "@radix-ui/react-focus-guards": "1.1.1",
-                "@radix-ui/react-focus-scope": "1.1.2",
-                "@radix-ui/react-id": "1.1.0",
-                "@radix-ui/react-portal": "1.1.4",
-                "@radix-ui/react-presence": "1.1.2",
-                "@radix-ui/react-primitive": "2.0.2",
-                "@radix-ui/react-slot": "1.1.2",
-                "@radix-ui/react-use-controllable-state": "1.1.0",
+            "version": "1.1.14",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.14.tgz",
+            "integrity": "sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.2",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-context": "1.1.2",
+                "@radix-ui/react-dismissable-layer": "1.1.10",
+                "@radix-ui/react-focus-guards": "1.1.2",
+                "@radix-ui/react-focus-scope": "1.1.7",
+                "@radix-ui/react-id": "1.1.1",
+                "@radix-ui/react-portal": "1.1.9",
+                "@radix-ui/react-presence": "1.1.4",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-slot": "1.2.3",
+                "@radix-ui/react-use-controllable-state": "1.2.2",
                 "aria-hidden": "^1.2.4",
                 "react-remove-scroll": "^2.6.3"
             },
@@ -1337,6 +1341,283 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/primitive": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+            "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
+            "license": "MIT"
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-compose-refs": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+            "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-context": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+            "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": {
+            "version": "1.1.10",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz",
+            "integrity": "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.2",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-callback-ref": "1.1.1",
+                "@radix-ui/react-use-escape-keydown": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-guards": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
+            "integrity": "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-scope": {
+            "version": "1.1.7",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+            "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-callback-ref": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-id": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+            "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-portal": {
+            "version": "1.1.9",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+            "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-presence": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz",
+            "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-primitive": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+            "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-slot": "1.2.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+            "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-callback-ref": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+            "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-controllable-state": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+            "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-effect-event": "0.0.2",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-escape-keydown": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+            "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-callback-ref": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-layout-effect": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+            "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-direction": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
@@ -1352,17 +1633,464 @@
                 }
             }
         },
-        "node_modules/@radix-ui/react-dismissable-layer": {
-            "version": "1.1.5",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz",
-            "integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==",
+        "node_modules/@radix-ui/react-dismissable-layer": {
+            "version": "1.1.5",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz",
+            "integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.1",
+                "@radix-ui/react-compose-refs": "1.1.1",
+                "@radix-ui/react-primitive": "2.0.2",
+                "@radix-ui/react-use-callback-ref": "1.1.0",
+                "@radix-ui/react-use-escape-keydown": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dropdown-menu": {
+            "version": "2.1.6",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.6.tgz",
+            "integrity": "sha512-no3X7V5fD487wab/ZYSHXq3H37u4NVeLDKI/Ks724X/eEFSSEFYZxWgsIlr1UBeEyDaM29HM5x9p1Nv8DuTYPA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.1",
+                "@radix-ui/react-compose-refs": "1.1.1",
+                "@radix-ui/react-context": "1.1.1",
+                "@radix-ui/react-id": "1.1.0",
+                "@radix-ui/react-menu": "2.1.6",
+                "@radix-ui/react-primitive": "2.0.2",
+                "@radix-ui/react-use-controllable-state": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-focus-guards": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+            "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-focus-scope": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.2.tgz",
+            "integrity": "sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.1",
+                "@radix-ui/react-primitive": "2.0.2",
+                "@radix-ui/react-use-callback-ref": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-id": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+            "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-layout-effect": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-label": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.2.tgz",
+            "integrity": "sha512-zo1uGMTaNlHehDyFQcDZXRJhUPDuukcnHz0/jnrup0JA6qL+AFpAnty+7VKa9esuU5xTblAZzTGYJKSKaBxBhw==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-primitive": "2.0.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-menu": {
+            "version": "2.1.6",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.6.tgz",
+            "integrity": "sha512-tBBb5CXDJW3t2mo9WlO7r6GTmWV0F0uzHZVFmlRmYpiSK1CDU5IKojP1pm7oknpBOrFZx/YgBRW9oorPO2S/Lg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.1",
+                "@radix-ui/react-collection": "1.1.2",
+                "@radix-ui/react-compose-refs": "1.1.1",
+                "@radix-ui/react-context": "1.1.1",
+                "@radix-ui/react-direction": "1.1.0",
+                "@radix-ui/react-dismissable-layer": "1.1.5",
+                "@radix-ui/react-focus-guards": "1.1.1",
+                "@radix-ui/react-focus-scope": "1.1.2",
+                "@radix-ui/react-id": "1.1.0",
+                "@radix-ui/react-popper": "1.2.2",
+                "@radix-ui/react-portal": "1.1.4",
+                "@radix-ui/react-presence": "1.1.2",
+                "@radix-ui/react-primitive": "2.0.2",
+                "@radix-ui/react-roving-focus": "1.1.2",
+                "@radix-ui/react-slot": "1.1.2",
+                "@radix-ui/react-use-callback-ref": "1.1.0",
+                "aria-hidden": "^1.2.4",
+                "react-remove-scroll": "^2.6.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-navigation-menu": {
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.5.tgz",
+            "integrity": "sha512-myMHHQUZ3ZLTi8W381/Vu43Ia0NqakkQZ2vzynMmTUtQQ9kNkjzhOwkZC9TAM5R07OZUVIQyHC06f/9JZJpvvA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.1",
+                "@radix-ui/react-collection": "1.1.2",
+                "@radix-ui/react-compose-refs": "1.1.1",
+                "@radix-ui/react-context": "1.1.1",
+                "@radix-ui/react-direction": "1.1.0",
+                "@radix-ui/react-dismissable-layer": "1.1.5",
+                "@radix-ui/react-id": "1.1.0",
+                "@radix-ui/react-presence": "1.1.2",
+                "@radix-ui/react-primitive": "2.0.2",
+                "@radix-ui/react-use-callback-ref": "1.1.0",
+                "@radix-ui/react-use-controllable-state": "1.1.0",
+                "@radix-ui/react-use-layout-effect": "1.1.0",
+                "@radix-ui/react-use-previous": "1.1.0",
+                "@radix-ui/react-visually-hidden": "1.1.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover": {
+            "version": "1.1.14",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.14.tgz",
+            "integrity": "sha512-ODz16+1iIbGUfFEfKx2HTPKizg2MN39uIOV8MXeHnmdd3i/N9Wt7vU46wbHsqA0xoaQyXVcs0KIlBdOA2Y95bw==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.2",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-context": "1.1.2",
+                "@radix-ui/react-dismissable-layer": "1.1.10",
+                "@radix-ui/react-focus-guards": "1.1.2",
+                "@radix-ui/react-focus-scope": "1.1.7",
+                "@radix-ui/react-id": "1.1.1",
+                "@radix-ui/react-popper": "1.2.7",
+                "@radix-ui/react-portal": "1.1.9",
+                "@radix-ui/react-presence": "1.1.4",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-slot": "1.2.3",
+                "@radix-ui/react-use-controllable-state": "1.2.2",
+                "aria-hidden": "^1.2.4",
+                "react-remove-scroll": "^2.6.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/primitive": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+            "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
+            "license": "MIT"
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-arrow": {
+            "version": "1.1.7",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+            "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-primitive": "2.1.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-compose-refs": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+            "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-context": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+            "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-dismissable-layer": {
+            "version": "1.1.10",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz",
+            "integrity": "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.2",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-callback-ref": "1.1.1",
+                "@radix-ui/react-use-escape-keydown": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-focus-guards": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
+            "integrity": "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-focus-scope": {
+            "version": "1.1.7",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+            "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-callback-ref": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-id": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+            "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-popper": {
+            "version": "1.2.7",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.7.tgz",
+            "integrity": "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@floating-ui/react-dom": "^2.0.0",
+                "@radix-ui/react-arrow": "1.1.7",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-context": "1.1.2",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-callback-ref": "1.1.1",
+                "@radix-ui/react-use-layout-effect": "1.1.1",
+                "@radix-ui/react-use-rect": "1.1.1",
+                "@radix-ui/react-use-size": "1.1.1",
+                "@radix-ui/rect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-portal": {
+            "version": "1.1.9",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+            "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-presence": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz",
+            "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==",
             "license": "MIT",
             "dependencies": {
-                "@radix-ui/primitive": "1.1.1",
-                "@radix-ui/react-compose-refs": "1.1.1",
-                "@radix-ui/react-primitive": "2.0.2",
-                "@radix-ui/react-use-callback-ref": "1.1.0",
-                "@radix-ui/react-use-escape-keydown": "1.1.0"
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
             },
             "peerDependencies": {
                 "@types/react": "*",
@@ -1379,19 +2107,13 @@
                 }
             }
         },
-        "node_modules/@radix-ui/react-dropdown-menu": {
-            "version": "2.1.6",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.6.tgz",
-            "integrity": "sha512-no3X7V5fD487wab/ZYSHXq3H37u4NVeLDKI/Ks724X/eEFSSEFYZxWgsIlr1UBeEyDaM29HM5x9p1Nv8DuTYPA==",
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-primitive": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+            "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
             "license": "MIT",
             "dependencies": {
-                "@radix-ui/primitive": "1.1.1",
-                "@radix-ui/react-compose-refs": "1.1.1",
-                "@radix-ui/react-context": "1.1.1",
-                "@radix-ui/react-id": "1.1.0",
-                "@radix-ui/react-menu": "2.1.6",
-                "@radix-ui/react-primitive": "2.0.2",
-                "@radix-ui/react-use-controllable-state": "1.1.0"
+                "@radix-ui/react-slot": "1.2.3"
             },
             "peerDependencies": {
                 "@types/react": "*",
@@ -1408,11 +2130,14 @@
                 }
             }
         },
-        "node_modules/@radix-ui/react-focus-guards": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
-            "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+            "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
             "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2"
+            },
             "peerDependencies": {
                 "@types/react": "*",
                 "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
@@ -1423,38 +2148,29 @@
                 }
             }
         },
-        "node_modules/@radix-ui/react-focus-scope": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.2.tgz",
-            "integrity": "sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==",
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-callback-ref": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+            "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
             "license": "MIT",
-            "dependencies": {
-                "@radix-ui/react-compose-refs": "1.1.1",
-                "@radix-ui/react-primitive": "2.0.2",
-                "@radix-ui/react-use-callback-ref": "1.1.0"
-            },
             "peerDependencies": {
                 "@types/react": "*",
-                "@types/react-dom": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
             },
             "peerDependenciesMeta": {
                 "@types/react": {
                     "optional": true
-                },
-                "@types/react-dom": {
-                    "optional": true
                 }
             }
         },
-        "node_modules/@radix-ui/react-id": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
-            "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-controllable-state": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+            "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
             "license": "MIT",
             "dependencies": {
-                "@radix-ui/react-use-layout-effect": "1.1.0"
+                "@radix-ui/react-use-effect-event": "0.0.2",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
             },
             "peerDependencies": {
                 "@types/react": "*",
@@ -1466,105 +2182,81 @@
                 }
             }
         },
-        "node_modules/@radix-ui/react-label": {
-            "version": "2.1.2",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.2.tgz",
-            "integrity": "sha512-zo1uGMTaNlHehDyFQcDZXRJhUPDuukcnHz0/jnrup0JA6qL+AFpAnty+7VKa9esuU5xTblAZzTGYJKSKaBxBhw==",
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-escape-keydown": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+            "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
             "license": "MIT",
             "dependencies": {
-                "@radix-ui/react-primitive": "2.0.2"
+                "@radix-ui/react-use-callback-ref": "1.1.1"
             },
             "peerDependencies": {
                 "@types/react": "*",
-                "@types/react-dom": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
             },
             "peerDependenciesMeta": {
                 "@types/react": {
                     "optional": true
-                },
-                "@types/react-dom": {
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-layout-effect": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+            "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
                     "optional": true
                 }
             }
         },
-        "node_modules/@radix-ui/react-menu": {
-            "version": "2.1.6",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.6.tgz",
-            "integrity": "sha512-tBBb5CXDJW3t2mo9WlO7r6GTmWV0F0uzHZVFmlRmYpiSK1CDU5IKojP1pm7oknpBOrFZx/YgBRW9oorPO2S/Lg==",
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-rect": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+            "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
             "license": "MIT",
             "dependencies": {
-                "@radix-ui/primitive": "1.1.1",
-                "@radix-ui/react-collection": "1.1.2",
-                "@radix-ui/react-compose-refs": "1.1.1",
-                "@radix-ui/react-context": "1.1.1",
-                "@radix-ui/react-direction": "1.1.0",
-                "@radix-ui/react-dismissable-layer": "1.1.5",
-                "@radix-ui/react-focus-guards": "1.1.1",
-                "@radix-ui/react-focus-scope": "1.1.2",
-                "@radix-ui/react-id": "1.1.0",
-                "@radix-ui/react-popper": "1.2.2",
-                "@radix-ui/react-portal": "1.1.4",
-                "@radix-ui/react-presence": "1.1.2",
-                "@radix-ui/react-primitive": "2.0.2",
-                "@radix-ui/react-roving-focus": "1.1.2",
-                "@radix-ui/react-slot": "1.1.2",
-                "@radix-ui/react-use-callback-ref": "1.1.0",
-                "aria-hidden": "^1.2.4",
-                "react-remove-scroll": "^2.6.3"
+                "@radix-ui/rect": "1.1.1"
             },
             "peerDependencies": {
                 "@types/react": "*",
-                "@types/react-dom": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
             },
             "peerDependenciesMeta": {
                 "@types/react": {
                     "optional": true
-                },
-                "@types/react-dom": {
-                    "optional": true
                 }
             }
         },
-        "node_modules/@radix-ui/react-navigation-menu": {
-            "version": "1.2.5",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.5.tgz",
-            "integrity": "sha512-myMHHQUZ3ZLTi8W381/Vu43Ia0NqakkQZ2vzynMmTUtQQ9kNkjzhOwkZC9TAM5R07OZUVIQyHC06f/9JZJpvvA==",
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-size": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+            "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
             "license": "MIT",
             "dependencies": {
-                "@radix-ui/primitive": "1.1.1",
-                "@radix-ui/react-collection": "1.1.2",
-                "@radix-ui/react-compose-refs": "1.1.1",
-                "@radix-ui/react-context": "1.1.1",
-                "@radix-ui/react-direction": "1.1.0",
-                "@radix-ui/react-dismissable-layer": "1.1.5",
-                "@radix-ui/react-id": "1.1.0",
-                "@radix-ui/react-presence": "1.1.2",
-                "@radix-ui/react-primitive": "2.0.2",
-                "@radix-ui/react-use-callback-ref": "1.1.0",
-                "@radix-ui/react-use-controllable-state": "1.1.0",
-                "@radix-ui/react-use-layout-effect": "1.1.0",
-                "@radix-ui/react-use-previous": "1.1.0",
-                "@radix-ui/react-visually-hidden": "1.1.2"
+                "@radix-ui/react-use-layout-effect": "1.1.1"
             },
             "peerDependencies": {
                 "@types/react": "*",
-                "@types/react-dom": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
             },
             "peerDependenciesMeta": {
                 "@types/react": {
                     "optional": true
-                },
-                "@types/react-dom": {
-                    "optional": true
                 }
             }
         },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/rect": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+            "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+            "license": "MIT"
+        },
         "node_modules/@radix-ui/react-popper": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz",
@@ -1668,6 +2360,101 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-progress": {
+            "version": "1.1.7",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz",
+            "integrity": "sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-context": "1.1.2",
+                "@radix-ui/react-primitive": "2.1.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-compose-refs": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+            "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-context": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+            "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-primitive": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+            "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-slot": "1.2.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-slot": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+            "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-roving-focus": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.2.tgz",
@@ -1904,6 +2691,39 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-use-effect-event": {
+            "version": "0.0.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+            "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-effect-event/node_modules/@radix-ui/react-use-layout-effect": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+            "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-use-escape-keydown": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
@@ -3429,6 +4249,22 @@
                 "node": ">=6"
             }
         },
+        "node_modules/cmdk": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.1.1.tgz",
+            "integrity": "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "^1.1.1",
+                "@radix-ui/react-dialog": "^1.1.6",
+                "@radix-ui/react-id": "^1.1.0",
+                "@radix-ui/react-primitive": "^2.0.2"
+            },
+            "peerDependencies": {
+                "react": "^18 || ^19 || ^19.0.0-rc",
+                "react-dom": "^18 || ^19 || ^19.0.0-rc"
+            }
+        },
         "node_modules/color-convert": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3572,6 +4408,16 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/date-fns": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+            "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/kossnocorp"
+            }
+        },
         "node_modules/debug": {
             "version": "4.4.0",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
diff --git a/package.json b/package.json
index 693fd0e..1656df4 100644
--- a/package.json
+++ b/package.json
@@ -28,10 +28,12 @@
         "@radix-ui/react-avatar": "^1.1.3",
         "@radix-ui/react-checkbox": "^1.1.4",
         "@radix-ui/react-collapsible": "^1.1.3",
-        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-dialog": "^1.1.14",
         "@radix-ui/react-dropdown-menu": "^2.1.6",
         "@radix-ui/react-label": "^2.1.2",
         "@radix-ui/react-navigation-menu": "^1.2.5",
+        "@radix-ui/react-popover": "^1.1.14",
+        "@radix-ui/react-progress": "^1.1.7",
         "@radix-ui/react-select": "^2.1.6",
         "@radix-ui/react-separator": "^1.1.2",
         "@radix-ui/react-slot": "^1.1.2",
@@ -45,7 +47,9 @@
         "@vitejs/plugin-react": "^4.3.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
         "concurrently": "^9.0.1",
+        "date-fns": "^4.1.0",
         "globals": "^15.14.0",
         "laravel-vite-plugin": "^1.0",
         "lucide-react": "^0.475.0",
diff --git a/resources/js/components/app-sidebar.tsx b/resources/js/components/app-sidebar.tsx
index 05ba0e8..298b41a 100644
--- a/resources/js/components/app-sidebar.tsx
+++ b/resources/js/components/app-sidebar.tsx
@@ -3,7 +3,7 @@ import { NavUser } from '@/components/nav-user';
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
 import { type NavItem } from '@/types';
 import { Link } from '@inertiajs/react';
-import { LayoutGrid, SquareCheckBig, Users } from 'lucide-react';
+import { LayoutGrid, SquareCheckBig, Users, Calendar } from 'lucide-react';
 import AppLogo from './app-logo';
 
 const mainNavItems: NavItem[] = [
@@ -22,6 +22,12 @@ const mainNavItems: NavItem[] = [
         href: '/users',
         icon: Users,
     },
+
+    {
+        title: 'Meetings',
+        href: '/meetings',
+        icon: Calendar,
+    },
 ];
 
 export function AppSidebar() {
diff --git a/resources/js/components/data-table.tsx b/resources/js/components/data-table.tsx
index d704a70..d8d19a7 100644
--- a/resources/js/components/data-table.tsx
+++ b/resources/js/components/data-table.tsx
@@ -46,6 +46,7 @@ interface DataTableProps<TData> {
   searchPlaceholder?: string
   searchColumn?: string
   onRowClick?: (row: TData) => void; // allow for row click to lead to action
+  addButton?: React.ReactNode // optional add button
 }
 
 export function DataTable<TData>({
@@ -54,6 +55,7 @@ export function DataTable<TData>({
   searchPlaceholder = "Filter...",
   searchColumn = "email",
   onRowClick,
+  addButton,
 }: DataTableProps<TData>) {
   const [sorting, setSorting] = React.useState<SortingState>([])
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
@@ -81,7 +83,7 @@ export function DataTable<TData>({
 
   return (
     <div className="w-full">
-      <div className="flex items-center py-4">
+      <div className="flex items-center pt-1 pb-4">
         <Input
           placeholder={searchPlaceholder}
           value={(table.getColumn(searchColumn)?.getFilterValue() as string) ?? ""}
@@ -90,32 +92,7 @@ export function DataTable<TData>({
           }
           className="max-w-sm"
         />
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline" className="ml-auto">
-              Columns <ChevronDown className="ml-2 h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            {table
-              .getAllColumns()
-              .filter((column) => column.getCanHide())
-              .map((column) => {
-                return (
-                  <DropdownMenuCheckboxItem
-                    key={column.id}
-                    className="capitalize"
-                    checked={column.getIsVisible()}
-                    onCheckedChange={(value) =>
-                      column.toggleVisibility(!!value)
-                    }
-                  >
-                    {column.id}
-                  </DropdownMenuCheckboxItem>
-                )
-              })}
-          </DropdownMenuContent>
-        </DropdownMenu>
+        {addButton && <div className="ml-auto">{addButton}</div>}
       </div>
       <div className="rounded-md border">
         <Table>
@@ -180,6 +157,7 @@ export function DataTable<TData>({
             size="sm"
             onClick={() => table.previousPage()}
             disabled={!table.getCanPreviousPage()}
+            className="cursor-pointer"
           >
             Previous
           </Button>
@@ -188,6 +166,7 @@ export function DataTable<TData>({
             size="sm"
             onClick={() => table.nextPage()}
             disabled={!table.getCanNextPage()}
+            className="cursor-pointer"
           >
             Next
           </Button>
diff --git a/resources/js/components/meetings/create-meeting-dialog.tsx b/resources/js/components/meetings/create-meeting-dialog.tsx
new file mode 100644
index 0000000..32eb988
--- /dev/null
+++ b/resources/js/components/meetings/create-meeting-dialog.tsx
@@ -0,0 +1,120 @@
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { useForm } from "@inertiajs/react"
+import { User, Task } from "@/types/task"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { MultiSelect } from "@/components/ui/multi-select"
+
+interface CreateMeetingDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    users: User[]
+    tasks: Task[]
+}
+
+export function CreateMeetingDialog({ open, onOpenChange, users, tasks }: CreateMeetingDialogProps) {
+    const { data, setData, post, processing, errors, reset } = useForm({
+        title: '',
+        date: '',
+        type: '',
+        agenda_text: '',
+        users: [] as number[],
+        tasks: [] as number[],
+    })
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault()
+        post('/meetings', {
+            onSuccess: () => {
+                reset()
+                onOpenChange(false)
+            }
+        })
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[800px] max-h-[90vh]">
+                <form onSubmit={handleSubmit}>
+                    <DialogHeader>
+                        <DialogTitle>Create New Meeting</DialogTitle>
+                        <DialogDescription>
+                            Add a new meeting and assign attendees and tasks.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div className="grid grid-cols-2 gap-8 py-4">
+                        <div className="space-y-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="title">Title</Label>
+                                <Input
+                                    id="title"
+                                    value={data.title}
+                                    onChange={e => setData('title', e.target.value)}
+                                    error={errors.title}
+                                />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="date">Date & Time</Label>
+                                <Input
+                                    id="date"
+                                    type="datetime-local"
+                                    value={data.date}
+                                    onChange={e => setData('date', e.target.value)}
+                                    error={errors.date}
+                                />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="type">Meeting Type</Label>
+                                <Input
+                                    id="type"
+                                    value={data.type}
+                                    onChange={e => setData('type', e.target.value)}
+                                    error={errors.type}
+                                    placeholder="Type (e.g. Internal, Client, etc.)"
+                                />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="agenda">Agenda</Label>
+                                <Input
+                                    id="agenda"
+                                    value={data.agenda_text}
+                                    onChange={e => setData('agenda_text', e.target.value)}
+                                    error={errors.agenda_text}
+                                    placeholder="Meeting agenda or description"
+                                />
+                            </div>
+                        </div>
+                        <div className="space-y-6" >
+                            <MultiSelect
+                                items={users}
+                                selectedIds={data.users}
+                                onSelectionChange={(ids) => setData('users', ids)}
+                                placeholder="Select users..."
+                                label="Attendees"
+                                error={errors.users}
+                            />
+                            <MultiSelect
+                                items={tasks}
+                                selectedIds={data.tasks}
+                                onSelectionChange={(ids) => setData('tasks', ids)}
+                                placeholder="Select tasks..."
+                                label="Related Tasks"
+                                error={errors.tasks}
+                            />
+                        </div>
+                    </div>
+                    <DialogFooter>
+                        <Button variant="outline" onClick={() => onOpenChange(false)} className="cursor-pointer">
+                            Cancel
+                        </Button>
+                        <Button type="submit" disabled={processing} className="cursor-pointer">
+                            Create Meeting
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    )
+} 
\ No newline at end of file
diff --git a/resources/js/components/meetings/meeting-summary.tsx b/resources/js/components/meetings/meeting-summary.tsx
new file mode 100644
index 0000000..1ba02b5
--- /dev/null
+++ b/resources/js/components/meetings/meeting-summary.tsx
@@ -0,0 +1,66 @@
+import { Meeting } from "@/types/meeting"
+import { Card } from "@/components/ui/card"
+import { Users, Calendar, Clock } from "lucide-react"
+
+interface MeetingSummaryProps {
+    meetings: Meeting[]
+}
+
+export function MeetingSummary({ meetings }: MeetingSummaryProps) {
+    const now = new Date()
+    const upcomingCount = meetings.filter(m => new Date(m.date) > now).length
+    const pastCount = meetings.filter(m => new Date(m.date) <= now).length
+    const totalCount = meetings.length
+
+    const totalAttendees = meetings.reduce((acc, meeting) => acc + meeting.users.length, 0)
+    const averageAttendees = totalCount > 0 ? Math.round(totalAttendees / totalCount) : 0
+
+    return (
+        <Card className="px-6 py-3">
+            <div className="flex items-center justify-center gap-8">
+                <div className="flex items-center gap-6">
+                    <div className="flex flex-col items-center">
+                        <div className="flex items-center gap-2 group">
+                            <Clock className="h-4 w-4 text-blue-500 group-hover:scale-125 transition-transform" />
+                            <span className="font-medium text-blue-600 group-hover:text-blue-700 transition-colors">
+                                {upcomingCount}
+                            </span>
+                        </div>
+                        <span className="text-xs text-muted-foreground">Upcoming</span>
+                    </div>
+
+                    <div className="flex flex-col items-center">
+                        <div className="flex items-center gap-2 group">
+                            <Calendar className="h-4 w-4 text-purple-500 group-hover:scale-125 transition-transform" />
+                            <span className="font-medium text-purple-600 group-hover:text-purple-700 transition-colors">
+                                {pastCount}
+                            </span>
+                        </div>
+                        <span className="text-xs text-muted-foreground">Past</span>
+                    </div>
+
+                    <div className="flex flex-col items-center">
+                        <div className="flex items-center gap-2 group">
+                            <Users className="h-4 w-4 text-green-500 group-hover:scale-125 transition-transform" />
+                            <span className="font-medium text-green-600 group-hover:text-green-700 transition-colors">
+                                {averageAttendees}
+                            </span>
+                        </div>
+                        <span className="text-xs text-muted-foreground">Avg. Attendees</span>
+                    </div>
+
+                    <div className="h-12 w-px bg-border" />
+
+                    <div className="flex flex-col items-center">
+                        <div className="flex items-center gap-2 group">
+                            <span className="text-lg font-semibold text-foreground">
+                                {totalCount}
+                            </span>
+                        </div>
+                        <span className="text-xs text-muted-foreground">Total Meetings</span>
+                    </div>
+                </div>
+            </div>
+        </Card>
+    )
+} 
\ No newline at end of file
diff --git a/resources/js/components/tasks/admin-task-stats.tsx b/resources/js/components/tasks/admin-task-stats.tsx
new file mode 100644
index 0000000..145985a
--- /dev/null
+++ b/resources/js/components/tasks/admin-task-stats.tsx
@@ -0,0 +1,12 @@
+import { Task } from "@/types/task"
+import { TaskSummary } from "@/components/tasks/task-summary"
+
+interface AdminTaskStatsProps {
+    tasks: Task[]
+}
+
+export function AdminTaskStats({ tasks }: AdminTaskStatsProps) {
+    return (
+        <TaskSummary tasks={tasks} />
+    )
+} 
\ No newline at end of file
diff --git a/resources/js/components/tasks/create-task-dialog.tsx b/resources/js/components/tasks/create-task-dialog.tsx
new file mode 100644
index 0000000..445ba97
--- /dev/null
+++ b/resources/js/components/tasks/create-task-dialog.tsx
@@ -0,0 +1,147 @@
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { useForm } from "@inertiajs/react"
+import { TaskStatus, TaskPriority, User } from "@/types/task"
+import { MultiSelect } from "@/components/ui/multi-select"
+
+interface CreateTaskDialogProps {
+    users: User[];
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+
+export function CreateTaskDialog({ users, open, onOpenChange }: CreateTaskDialogProps) {
+    const { data, setData, post, processing, errors, reset } = useForm({
+        name: '',
+        description: '',
+        status: 'pending' as TaskStatus,
+        priority: 'medium' as TaskPriority,
+        due_date: '',
+        users: [] as number[]
+    });
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        post('/tasks', {
+            onSuccess: () => {
+                reset();
+                onOpenChange(false);
+            }
+        });
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[800px] max-h-[90vh]">
+                <DialogHeader>
+                    <DialogTitle>Create New Task</DialogTitle>
+                    <DialogDescription>
+                        Add a new task to your project. Fill in the details below.
+                    </DialogDescription>
+                </DialogHeader>
+                <form onSubmit={handleSubmit} className="space-y-6">
+                    <div className="grid grid-cols-2 gap-8">
+                        <div className="space-y-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="name">Task Name</Label>
+                                <Input
+                                    id="name"
+                                    value={data.name}
+                                    onChange={e => setData('name', e.target.value)}
+                                    error={errors.name}
+                                />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="description">Description</Label>
+                                <Textarea
+                                    id="description"
+                                    value={data.description}
+                                    onChange={e => setData('description', e.target.value)}
+                                    error={errors.description}
+                                    className="min-h-[100px]"
+                                />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="status">Status</Label>
+                                <Select
+                                    value={data.status}
+                                    onValueChange={(value) => setData('status', value as TaskStatus)}
+                                >
+                                    <SelectTrigger>
+                                        <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="pending">Pending</SelectItem>
+                                        <SelectItem value="in_progress">In Progress</SelectItem>
+                                        <SelectItem value="completed">Completed</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="priority">Priority</Label>
+                                <Select
+                                    value={data.priority}
+                                    onValueChange={(value) => setData('priority', value as TaskPriority)}
+                                >
+                                    <SelectTrigger>
+                                        <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="low">Low</SelectItem>
+                                        <SelectItem value="medium">Medium</SelectItem>
+                                        <SelectItem value="high">High</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="due_date">Due Date</Label>
+                                <Input
+                                    type="date"
+                                    id="due_date"
+                                    value={data.due_date}
+                                    onChange={e => setData('due_date', e.target.value)}
+                                    error={errors.due_date}
+                                />
+                            </div>
+                        </div>
+
+                        <div className="space-y-6">
+                            <MultiSelect
+                                items={users}
+                                selectedIds={data.users}
+                                onSelectionChange={(ids) => setData('users', ids)}
+                                placeholder="Select users..."
+                                label="Assign Users"
+                                error={errors.users}
+                            />
+                        </div>
+                    </div>
+
+                    <DialogFooter>
+                        <Button variant="outline" onClick={() => onOpenChange(false)} className="cursor-pointer">
+                            Cancel
+                        </Button>
+                        <Button type="submit" disabled={processing} className="cursor-pointer">
+                            Create Task
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/resources/js/components/tasks/task-progress.tsx b/resources/js/components/tasks/task-progress.tsx
new file mode 100644
index 0000000..84702d6
--- /dev/null
+++ b/resources/js/components/tasks/task-progress.tsx
@@ -0,0 +1,25 @@
+import { Task } from "@/types/task"
+import { Progress } from "@/components/ui/progress"
+
+interface TaskProgressProps {
+    tasks: Task[]
+}
+
+export function TaskProgress({ tasks }: TaskProgressProps) {
+    const completedCount = tasks.filter(t => t.status === 'completed').length
+    const totalCount = tasks.length
+    const progress = totalCount > 0 ? (completedCount / totalCount) * 100 : 0
+
+    return (
+        <div className="flex flex-col gap-2 w-40">
+            <div className="flex justify-between items-center">
+                <span className="text-sm font-medium">Progress</span>
+                <span className="text-sm font-semibold text-green-600">{Math.round(progress)}%</span>
+            </div>
+            <Progress 
+                value={progress} 
+                className="h-3 bg-muted [&>div]:bg-gradient-to-r [&>div]:from-green-500 [&>div]:to-green-600 [&>div]:transition-all [&>div]:duration-500"
+            />
+        </div>
+    )
+} 
\ No newline at end of file
diff --git a/resources/js/components/tasks/task-summary.tsx b/resources/js/components/tasks/task-summary.tsx
new file mode 100644
index 0000000..cb2d319
--- /dev/null
+++ b/resources/js/components/tasks/task-summary.tsx
@@ -0,0 +1,64 @@
+import { Task } from "@/types/task"
+import { Card } from "@/components/ui/card"
+import { TaskProgress } from "./task-progress"
+
+interface TaskSummaryProps {
+    tasks: Task[]
+}
+
+export function TaskSummary({ tasks }: TaskSummaryProps) {
+    const pendingCount = tasks.filter(t => t.status === 'pending').length
+    const inProgressCount = tasks.filter(t => t.status === 'in_progress').length
+    const completedCount = tasks.filter(t => t.status === 'completed').length
+    const totalCount = tasks.length
+
+    return (
+        <Card className="px-6 py-3">
+            <div className="flex items-center justify-center gap-8">
+                <div className="flex items-center gap-6">
+                    <div className="flex flex-col items-center">
+                        <div className="flex items-center gap-2 group">
+                            <div className="h-3 w-3 rounded-full bg-yellow-500 group-hover:scale-125 transition-transform" />
+                            <span className="font-medium text-yellow-600 group-hover:text-yellow-700 transition-colors">
+                                {pendingCount}
+                            </span>
+                        </div>
+                        <span className="text-xs text-muted-foreground">Pending</span>
+                    </div>
+
+                    <div className="flex flex-col items-center">
+                        <div className="flex items-center gap-2 group">
+                            <div className="h-3 w-3 rounded-full bg-blue-500 group-hover:scale-125 transition-transform" />
+                            <span className="font-medium text-blue-600 group-hover:text-blue-700 transition-colors">
+                                {inProgressCount}
+                            </span>
+                        </div>
+                        <span className="text-xs text-muted-foreground">In Progress</span>
+                    </div>
+
+                    <div className="flex flex-col items-center">
+                        <div className="flex items-center gap-2 group">
+                            <div className="h-3 w-3 rounded-full bg-green-500 group-hover:scale-125 transition-transform" />
+                            <span className="font-medium text-green-600 group-hover:text-green-700 transition-colors">
+                                {completedCount}
+                            </span>
+                        </div>
+                        <span className="text-xs text-muted-foreground">Completed</span>
+                    </div>
+                </div>
+
+                <div className="h-12 w-px bg-border" />
+
+                <div className="flex items-center gap-6">
+                    <TaskProgress tasks={tasks} />
+                    <div className="flex flex-col items-center">
+                        <span className="text-lg font-semibold text-foreground">
+                            {totalCount}
+                        </span>
+                        <span className="text-xs text-muted-foreground">Total Tasks</span>
+                    </div>
+                </div>
+            </div>
+        </Card>
+    )
+} 
\ No newline at end of file
diff --git a/resources/js/components/ui/command.tsx b/resources/js/components/ui/command.tsx
new file mode 100644
index 0000000..5360f6d
--- /dev/null
+++ b/resources/js/components/ui/command.tsx
@@ -0,0 +1,175 @@
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/resources/js/components/ui/create-user-dialog.tsx b/resources/js/components/ui/create-user-dialog.tsx
deleted file mode 100644
index 6295ada..0000000
--- a/resources/js/components/ui/create-user-dialog.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { useForm, usePage } from '@inertiajs/react';
-import { FormEventHandler } from 'react';
-import { Plus, LoaderCircle } from 'lucide-react';
-import type { PageProps as InertiaPageProps } from '@inertiajs/core';
-
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Button } from '@/components/ui/button';
-import InputError from '@/components/input-error';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-
-interface PageProps extends InertiaPageProps {
-    auth: {
-        user: {
-            client_id: number;
-        };
-    };
-    roles: Array<{
-        id: number;
-        name: string;
-    }>;
-}
-
-export default function CreateUserDialog() {
-    const { auth, roles } = usePage<PageProps>().props;
-    const clientId = auth.user.client_id;
-
-    const { data, setData, post, processing, errors, reset } = useForm({
-        name: '',
-        email: '',
-        password: '',
-        password_confirmation: '',
-        client_id: clientId,
-        role_id: roles.find(r => r.name === 'member')?.id || '',
-    });
-
-    const submit: FormEventHandler = (e) => {
-        e.preventDefault();
-        post(route('users.store'), {
-            onSuccess: () => {
-                reset();
-                window.location.href = route('users.index');
-            },
-        });
-    };
-
-    return (
-        <Dialog>
-            <DialogTrigger asChild>
-                <Button>
-                    <Plus className="mr-2 h-4 w-4" />
-                    New User
-                </Button>
-            </DialogTrigger>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>Create New User</DialogTitle>
-                    <DialogDescription>
-                        Add a new user to the system
-                    </DialogDescription>
-                </DialogHeader>
-                <form onSubmit={submit}>
-                    <div className="grid gap-4">
-                        <div className="grid gap-2">
-                            <Label htmlFor="name">Name</Label>
-                            <Input
-                                id="name"
-                                value={data.name}
-                                onChange={e => setData('name', e.target.value)}
-                                placeholder="Full name"
-                            />
-                            <InputError message={errors.name} />
-                        </div>
-
-                        <div className="grid gap-2">
-                            <Label htmlFor="email">Email</Label>
-                            <Input
-                                id="email"
-                                type="email"
-                                value={data.email}
-                                onChange={e => setData('email', e.target.value)}
-                                placeholder="email@example.com"
-                            />
-                            <InputError message={errors.email} />
-                        </div>
-
-                        <div className="grid gap-2">
-                            <Label htmlFor="password">Password</Label>
-                            <Input
-                                id="password"
-                                type="password"
-                                value={data.password}
-                                onChange={e => setData('password', e.target.value)}
-                                placeholder="Password"
-                            />
-                            <InputError message={errors.password} />
-                        </div>
-
-                        <div className="grid gap-2">
-                            <Label htmlFor="password_confirmation">Confirm Password</Label>
-                            <Input
-                                id="password_confirmation"
-                                type="password"
-                                value={data.password_confirmation}
-                                onChange={e => setData('password_confirmation', e.target.value)}
-                                placeholder="Confirm password"
-                            />
-                            <InputError message={errors.password_confirmation} />
-                        </div>
-
-                        <div className="grid gap-2">
-                            <Label htmlFor="role_id">Role</Label>
-                            <Select
-                                value={data.role_id.toString()}
-                                onValueChange={(value) => setData('role_id', parseInt(value))}
-                            >
-                                <SelectTrigger id="role_id">
-                                    <SelectValue placeholder="Select a role" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    {roles.map((role) => (
-                                        <SelectItem key={role.id} value={role.id.toString()}>
-                                            {role.name}
-                                        </SelectItem>
-                                    ))}
-                                </SelectContent>
-                            </Select>
-                            <InputError message={errors.role_id} />
-                        </div>
-                    </div>
-
-                    <DialogFooter className="mt-4">
-                        <Button type="submit" disabled={processing}>
-                            {processing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
-                            Create User
-                        </Button>
-                    </DialogFooter>
-                </form>
-            </DialogContent>
-        </Dialog>
-    );
-}
\ No newline at end of file
diff --git a/resources/js/components/ui/data-table.tsx b/resources/js/components/ui/data-table.tsx
new file mode 100644
index 0000000..5b600d4
--- /dev/null
+++ b/resources/js/components/ui/data-table.tsx
@@ -0,0 +1,75 @@
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+} from "@tanstack/react-table"
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
+    searchable?: boolean
+    searchPlaceholder?: string
+}
+
+export function DataTable<TData, TValue>({
+    columns,
+    data,
+}: DataTableProps<TData, TValue>) {
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    })
+
+    return (
+        <div className="rounded-md border">
+            <Table>
+                <TableHeader>
+                    {table.getHeaderGroups().map((headerGroup) => (
+                        <TableRow key={headerGroup.id}>
+                            {headerGroup.headers.map((header) => (
+                                <TableHead key={header.id}>
+                                    {header.isPlaceholder
+                                        ? null
+                                        : flexRender(
+                                            header.column.columnDef.header,
+                                            header.getContext()
+                                        )}
+                                </TableHead>
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableHeader>
+                <TableBody>
+                    {table.getRowModel().rows?.length ? (
+                        table.getRowModel().rows.map((row) => (
+                            <TableRow key={row.id}>
+                                {row.getVisibleCells().map((cell) => (
+                                    <TableCell key={cell.id}>
+                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        ))
+                    ) : (
+                        <TableRow>
+                            <TableCell colSpan={columns.length} className="h-24 text-center">
+                                No results.
+                            </TableCell>
+                        </TableRow>
+                    )}
+                </TableBody>
+            </Table>
+        </div>
+    )
+} 
\ No newline at end of file
diff --git a/resources/js/components/ui/delete-confirmation.tsx b/resources/js/components/ui/delete-confirmation.tsx
new file mode 100644
index 0000000..3901219
--- /dev/null
+++ b/resources/js/components/ui/delete-confirmation.tsx
@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+
+interface DeleteConfirmationProps {
+  onConfirm: () => void;
+  children: React.ReactNode;
+  itemType: string;
+  itemName?: string;
+  disabled?: boolean;
+}
+
+export function DeleteConfirmation({ onConfirm, children, itemType, itemName, disabled }: DeleteConfirmationProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <span onClick={() => !disabled && setOpen(true)} style={{ display: "inline-block" }}>
+        {children}
+      </span>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete {itemType.charAt(0).toUpperCase() + itemType.slice(1)}</DialogTitle>
+          </DialogHeader>
+          <div className="py-2">
+            Are you sure you want to delete this {itemType}
+            {itemName ? <>: <span className="font-semibold">{itemName}</span></> : null}?
+            <br />
+            This action cannot be undone.
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setOpen(false)} className="cursor-pointer">
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={() => { setOpen(false); onConfirm(); }} className="cursor-pointer">
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+} 
\ No newline at end of file
diff --git a/resources/js/components/ui/input.tsx b/resources/js/components/ui/input.tsx
index 4bfe9cc..49c6887 100644
--- a/resources/js/components/ui/input.tsx
+++ b/resources/js/components/ui/input.tsx
@@ -1,21 +1,28 @@
+// resources/js/components/ui/input.tsx
 import * as React from "react"
-
 import { cn } from "@/lib/utils"
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
-      )}
-      {...props}
-    />
-  )
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  error?: string;
 }
 
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, error, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          error && "border-red-500",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
 export { Input }
diff --git a/resources/js/components/ui/multi-select.tsx b/resources/js/components/ui/multi-select.tsx
new file mode 100644
index 0000000..8c2839d
--- /dev/null
+++ b/resources/js/components/ui/multi-select.tsx
@@ -0,0 +1,142 @@
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Check, ChevronsUpDown } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { useState, useCallback, useEffect } from "react"
+import { Badge } from "@/components/ui/badge"
+
+interface Item {
+    id: number
+    name: string
+}
+
+interface MultiSelectProps {
+    items?: Item[]
+    selectedIds?: number[]
+    onSelectionChange: (ids: number[]) => void
+    placeholder?: string
+    label?: string
+    error?: string
+}
+
+export function MultiSelect({
+    items = [],
+    selectedIds = [],
+    onSelectionChange,
+    placeholder = "Select items...",
+    label,
+    error
+}: MultiSelectProps) {
+    const [isOpen, setIsOpen] = useState(false)
+    const [filteredItems, setFilteredItems] = useState<Item[]>(items)
+
+    useEffect(() => {
+        setFilteredItems(items)
+    }, [items])
+
+    const handleSearch = useCallback((searchTerm: string) => {
+        const filtered = items.filter(item => 
+            item.name.toLowerCase().includes(searchTerm.toLowerCase())
+        )
+        setFilteredItems(filtered)
+    }, [items])
+
+    const handleSelect = useCallback((itemId: number) => {
+        const currentIds = [...selectedIds]
+        const index = currentIds.indexOf(itemId)
+        
+        if (index === -1) {
+            currentIds.push(itemId)
+        } else {
+            currentIds.splice(index, 1)
+        }
+        
+        onSelectionChange(currentIds)
+    }, [selectedIds, onSelectionChange])
+
+    const handleDropdownToggle = (e: React.MouseEvent) => {
+        e.preventDefault()
+        e.stopPropagation()
+        setIsOpen(prev => !prev)
+    }
+
+    const handleDropdownClick = (e: React.MouseEvent) => {
+        e.stopPropagation()
+    }
+
+    return (
+        <div className="space-y-2">
+            {label && <label className="text-sm font-medium">{label}</label>}
+            <div className="relative">
+                <Button
+                    type="button"
+                    variant="outline"
+                    role="combobox"
+                    className="w-full justify-between cursor-pointer"
+                    onClick={handleDropdownToggle}
+                >
+                    {selectedIds.length > 0
+                        ? `${selectedIds.length} items selected`
+                        : placeholder}
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+                {isOpen && (
+                    <div 
+                        className="absolute z-50 w-full mt-1 bg-white border rounded-md shadow-lg"
+                        onClick={handleDropdownClick}
+                    >
+                        <div className="p-2 border-b">
+                            <Input 
+                                type="text"
+                                placeholder="Search..." 
+                                className="border-0 focus-visible:ring-0"
+                                onClick={handleDropdownClick}
+                                onChange={(e) => handleSearch(e.target.value)}
+                            />
+                        </div>
+                        <div className="max-h-[200px] overflow-y-auto">
+                            {(filteredItems.length > 0 ? filteredItems : items).map((item) => (
+                                <div
+                                    key={item.id}
+                                    className="flex items-center px-4 py-2 hover:bg-accent cursor-pointer"
+                                    onClick={(e) => {
+                                        e.preventDefault()
+                                        e.stopPropagation()
+                                        handleSelect(item.id)
+                                    }}
+                                >
+                                    <Check
+                                        className={cn(
+                                            "mr-2 h-4 w-4",
+                                            selectedIds.includes(item.id) ? "opacity-100" : "opacity-0"
+                                        )}
+                                    />
+                                    {item.name}
+                                </div>
+                            ))}
+                            {filteredItems.length === 0 && (
+                                <div className="px-4 py-2 text-sm text-muted-foreground">
+                                    No items found.
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                )}
+            </div>
+            {selectedIds.length > 0 && (
+                <div className="flex flex-wrap gap-1">
+                    {items
+                        .filter(item => selectedIds.includes(item.id))
+                        .map(item => (
+                            <Badge key={item.id} variant="secondary">
+                                {item.name}
+                            </Badge>
+                        ))}
+                </div>
+            )}
+            {error && (
+                <p className="text-sm text-red-500">{error}</p>
+            )}
+        </div>
+    )
+} 
\ No newline at end of file
diff --git a/resources/js/components/ui/popover.tsx b/resources/js/components/ui/popover.tsx
new file mode 100644
index 0000000..6d51b6c
--- /dev/null
+++ b/resources/js/components/ui/popover.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/resources/js/components/ui/progress.tsx b/resources/js/components/ui/progress.tsx
new file mode 100644
index 0000000..10af7e6
--- /dev/null
+++ b/resources/js/components/ui/progress.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }
diff --git a/resources/js/components/ui/single-select.tsx b/resources/js/components/ui/single-select.tsx
new file mode 100644
index 0000000..09116ed
--- /dev/null
+++ b/resources/js/components/ui/single-select.tsx
@@ -0,0 +1,102 @@
+import { useState, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ChevronsUpDown, Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface Item {
+  id: number;
+  name: string;
+}
+
+interface SingleSelectProps {
+  items: Item[];
+  selectedId: number | null;
+  onChange: (id: number) => void;
+  placeholder?: string;
+  label?: string;
+  error?: string;
+}
+
+export function SingleSelect({
+  items,
+  selectedId,
+  onChange,
+  placeholder = "Select...",
+  label,
+  error,
+}: SingleSelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  const filteredItems = useMemo(
+    () =>
+      items.filter((item) =>
+        item.name.toLowerCase().includes(search.toLowerCase())
+      ),
+    [items, search]
+  );
+
+  const selectedItem = items.find((item) => item.id === selectedId);
+
+  return (
+    <div className="space-y-2">
+      {label && <label className="text-sm font-medium">{label}</label>}
+      <div className="relative">
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          className="w-full justify-between"
+          onClick={() => setIsOpen((v) => !v)}
+        >
+          {selectedItem ? selectedItem.name : placeholder}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+        {isOpen && (
+          <div className="absolute z-50 w-full mt-1 bg-white border rounded-md shadow-lg">
+            <div className="p-2 border-b">
+              <Input
+                type="text"
+                placeholder="Search..."
+                className="border-0 focus-visible:ring-0"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+            </div>
+            <div className="max-h-[200px] overflow-y-auto">
+              {filteredItems.length > 0 ? (
+                filteredItems.map((item) => (
+                  <div
+                    key={item.id}
+                    className={cn(
+                      "flex items-center px-4 py-2 hover:bg-accent cursor-pointer",
+                      selectedId === item.id && "bg-accent"
+                    )}
+                    onClick={() => {
+                      setIsOpen(false);
+                      onChange(item.id);
+                    }}
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 h-4 w-4",
+                        selectedId === item.id ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                    {item.name}
+                  </div>
+                ))
+              ) : (
+                <div className="px-4 py-2 text-sm text-muted-foreground">
+                  No items found.
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+      {error && <p className="text-sm text-red-500">{error}</p>}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/resources/js/components/ui/textarea.tsx b/resources/js/components/ui/textarea.tsx
new file mode 100644
index 0000000..b747bb5
--- /dev/null
+++ b/resources/js/components/ui/textarea.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  error?: string;
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, error, ...props }, ref) => {
+    return (
+      <textarea
+        data-slot="textarea"
+        className={cn(
+          "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          error && "border-red-500",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/resources/js/components/ui/toast.tsx b/resources/js/components/ui/toast.tsx
new file mode 100644
index 0000000..345197a
--- /dev/null
+++ b/resources/js/components/ui/toast.tsx
@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+
+export function Toast({ message }: { message: string }) {
+  const [show, setShow] = useState(true);
+
+  useEffect(() => {
+    if (show) {
+      const timer = setTimeout(() => setShow(false), 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [show]);
+
+  if (!show) return null;
+
+  return (
+    <div className="fixed top-6 right-6 z-50 bg-green-600 text-white px-4 py-2 rounded shadow">
+      {message}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/resources/js/components/users/create-user-dialog.tsx b/resources/js/components/users/create-user-dialog.tsx
new file mode 100644
index 0000000..d0a081e
--- /dev/null
+++ b/resources/js/components/users/create-user-dialog.tsx
@@ -0,0 +1,150 @@
+import { useForm, usePage } from '@inertiajs/react';
+import { FormEventHandler } from 'react';
+import { LoaderCircle } from 'lucide-react';
+import { PageProps } from '@/types';
+
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import InputError from '@/components/input-error';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Card, CardContent } from '@/components/ui/card';
+import { SingleSelect } from '@/components/ui/single-select';
+
+type DialogProps = {
+    auth: {
+        user: {
+            client_id: number;
+        };
+    };
+    roles: Array<{
+        id: number;
+        name: string;
+    }>;
+}
+
+interface CreateUserDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+
+export default function CreateUserDialog({ open, onOpenChange }: CreateUserDialogProps) {
+    const { auth, roles } = usePage<PageProps<DialogProps>>().props;
+    const clientId = auth.user.client_id;
+
+    const { data, setData, post, processing, errors, reset } = useForm({
+        name: '',
+        email: '',
+        password: '',
+        password_confirmation: '',
+        client_id: clientId,
+        role_id: roles.find(r => r.name === 'member')?.id || '',
+    });
+
+    const submit: FormEventHandler = (e) => {
+        e.preventDefault();
+        post(route('admin.users.store'), {
+            onSuccess: () => {
+                reset();
+                onOpenChange(false);
+            },
+        });
+    };
+
+    const formatRoleName = (name: string) => {
+        return name === "Client-Admin" ? "Admin" : name;
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>Create New User</DialogTitle>
+                    <DialogDescription>
+                        Add a new user to the system
+                    </DialogDescription>
+                </DialogHeader>
+                <form onSubmit={submit}>
+                    <Card>
+                        <CardContent className="pt-6">
+                            <div className="grid gap-4">
+                                <div className="grid gap-2">
+                                    <Label htmlFor="name">Name</Label>
+                                    <Input
+                                        id="name"
+                                        value={data.name}
+                                        onChange={e => setData('name', e.target.value)}
+                                        placeholder="Full name"
+                                        className="w-full"
+                                    />
+                                    <InputError message={errors.name} />
+                                </div>
+
+                                <div className="grid gap-2">
+                                    <Label htmlFor="email">Email</Label>
+                                    <Input
+                                        id="email"
+                                        type="email"
+                                        value={data.email}
+                                        onChange={e => setData('email', e.target.value)}
+                                        placeholder="email@example.com"
+                                        className="w-full"
+                                    />
+                                    <InputError message={errors.email} />
+                                </div>
+
+                                <div className="grid gap-2">
+                                    <Label htmlFor="password">Password</Label>
+                                    <Input
+                                        id="password"
+                                        type="password"
+                                        value={data.password}
+                                        onChange={e => setData('password', e.target.value)}
+                                        placeholder="Password"
+                                        className="w-full"
+                                    />
+                                    <InputError message={errors.password} />
+                                </div>
+
+                                <div className="grid gap-2">
+                                    <Label htmlFor="password_confirmation">Confirm Password</Label>
+                                    <Input
+                                        id="password_confirmation"
+                                        type="password"
+                                        value={data.password_confirmation}
+                                        onChange={e => setData('password_confirmation', e.target.value)}
+                                        placeholder="Confirm password"
+                                        className="w-full"
+                                    />
+                                    <InputError message={errors.password_confirmation} />
+                                </div>
+
+                                <div className="grid gap-2">
+                                    <SingleSelect
+                                        items={roles.map(r => ({ id: r.id, name: formatRoleName(r.name) }))}
+                                        selectedId={data.role_id ? Number(data.role_id) : null}
+                                        onChange={id => setData('role_id', id)}
+                                        placeholder="Select a role"
+                                        label="Role"
+                                        error={errors.role_id}
+                                    />
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    <DialogFooter className="mt-4">
+                        <Button variant="outline" onClick={() => onOpenChange(false)} className="cursor-pointer">
+                            Cancel
+                        </Button>
+                        <Button type="submit" disabled={processing} className="w-full sm:w-auto cursor-pointer">
+                            {processing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
+                            Create User
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}
\ No newline at end of file
diff --git a/resources/js/components/users/user-summary.tsx b/resources/js/components/users/user-summary.tsx
new file mode 100644
index 0000000..9d56cf0
--- /dev/null
+++ b/resources/js/components/users/user-summary.tsx
@@ -0,0 +1,54 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { Users, UserCheck, UserX } from 'lucide-react';
+
+interface User {
+    id: number;
+    name: string;
+    email: string;
+    role: {
+        id: number;
+        name: string;
+    };
+}
+
+interface UserSummaryProps {
+    users: User[];
+}
+
+export function UserSummary({ users }: UserSummaryProps) {
+    const totalUsers = users.length;
+    const adminCount = users.filter(user => user.role.name === 'Client-Admin').length;
+    const regularUserCount = totalUsers - adminCount;
+
+    return (
+        <Card className="px-6 py-3">
+            <CardContent className="p-0">
+                <div className="flex items-center justify-center gap-8">
+                    <div className="flex items-center gap-6">
+                        <div className="flex flex-col items-center">
+                            <div className="flex items-center gap-2">
+                                <Users className="h-4 w-4 text-muted-foreground" />
+                                <span className="font-medium text-foreground text-base">{totalUsers}</span>
+                            </div>
+                            <span className="text-xs text-muted-foreground">Users</span>
+                        </div>
+                        <div className="flex flex-col items-center">
+                            <div className="flex items-center gap-2">
+                                <UserCheck className="h-4 w-4 text-purple-500" />
+                                <span className="font-medium text-purple-600 text-base">{adminCount}</span>
+                            </div>
+                            <span className="text-xs text-muted-foreground">Admins</span>
+                        </div>
+                        <div className="flex flex-col items-center">
+                            <div className="flex items-center gap-2">
+                                <UserX className="h-4 w-4 text-blue-500" />
+                                <span className="font-medium text-blue-600 text-base">{regularUserCount}</span>
+                            </div>
+                            <span className="text-xs text-muted-foreground">Regular</span>
+                        </div>
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    );
+} 
\ No newline at end of file
diff --git a/resources/js/layouts/app-layout.tsx b/resources/js/layouts/app-layout.tsx
index 1457c51..773e4bf 100644
--- a/resources/js/layouts/app-layout.tsx
+++ b/resources/js/layouts/app-layout.tsx
@@ -1,14 +1,23 @@
 import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
 import { type BreadcrumbItem } from '@/types';
 import { type ReactNode } from 'react';
+import { usePage } from '@inertiajs/react';
+import { Toast } from '@/components/ui/toast';
 
 interface AppLayoutProps {
     children: ReactNode;
     breadcrumbs?: BreadcrumbItem[];
 }
 
-export default ({ children, breadcrumbs, ...props }: AppLayoutProps) => (
-    <AppLayoutTemplate breadcrumbs={breadcrumbs} {...props}>
-        {children}
-    </AppLayoutTemplate>
-);
+export default ({ children, breadcrumbs, ...props }: AppLayoutProps) => {
+    const { flash } = usePage().props as { flash?: { success?: string } };
+
+    return (
+        <>
+            {flash?.success && <Toast message={flash.success} />}
+            <AppLayoutTemplate breadcrumbs={breadcrumbs} {...props}>
+                {children}
+            </AppLayoutTemplate>
+        </>
+    );
+};
diff --git a/resources/js/pages/Users/user-list.tsx b/resources/js/pages/Users/user-list.tsx
deleted file mode 100644
index d19ee9d..0000000
--- a/resources/js/pages/Users/user-list.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { Head, router } from '@inertiajs/react';
-import AppLayout from '@/layouts/app-layout';
-import { type BreadcrumbItem } from '@/types';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Badge } from '@/components/ui/badge';
-
-import { Plus, ArrowUpDown } from 'lucide-react';
-import { DataTable } from '@/components/data-table';
-import { ColumnDef } from '@tanstack/react-table';
-import { PageProps } from '@/types';
-import CreateUserDialog from '@/components/ui/create-user-dialog';
-
-
-const breadcrumbs: BreadcrumbItem[] = [
-
-    {
-        title: 'Users',
-        href: '/users',
-    },
-];
-
-
-
-interface User {
-    id: number;
-    name: string;
-    email: string;
-}
-const columns: ColumnDef<User>[] = [
-    {
-        id: "select",
-        header: ({ table }) => (
-            <Checkbox
-                checked={
-                    table.getIsAllPageRowsSelected() ||
-                    (table.getIsSomePageRowsSelected() && "indeterminate")
-                }
-                onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-                aria-label="Select all"
-            />
-        ),
-        cell: ({ row }) => (
-            <Checkbox
-                checked={row.getIsSelected()}
-                onCheckedChange={(value) => row.toggleSelected(!!value)}
-                aria-label="Select row"
-            />
-        ),
-        enableSorting: false,
-        enableHiding: false,
-    },
-    {
-        accessorKey: "name",
-        header: ({ column }) => {
-            return (
-                <Button
-                    variant="ghost"
-                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-                >
-                    Name
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            )
-        },
-    },
-    {
-        accessorKey: "email",
-        header: ({ column }) => {
-            return (
-                <Button
-                    variant="ghost"
-                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-                >
-                    Email
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            )
-        },
-    },
-];
-
-export default function Users({ users }: PageProps<{ users: User[] }>) {
-    return (
-        <AppLayout breadcrumbs={breadcrumbs}>
-            <Head title="Users" />
-            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
-                <div className="border-sidebar-border/70 dark:border-sidebar-border relative min-h-[100vh] flex-1 overflow-hidden rounded-xl border md:min-h-min">
-                    <div className="flex h-full flex-1 flex-col gap-4 p-4">
-                        <div className="flex gap-4">
-                            <div className="flex-1">
-                                <Card>
-                                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                                        <div>
-                                            <CardTitle>User List</CardTitle>
-                                            <CardDescription>Manage your users and their permissions</CardDescription>
-                                        </div>
-                                        <CreateUserDialog />
-                                    </CardHeader>
-                                    <CardContent>
-                                        <DataTable
-                                            columns={columns}
-                                            data={users}
-                                            searchPlaceholder="Search users..."
-                                            searchColumn="name"
-                                            onRowClick={(user) => router.visit(`/users/${user.id}`)}
-                                        />
-                                    </CardContent>
-                                </Card>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </AppLayout>
-    );
-} 
\ No newline at end of file
diff --git a/resources/js/pages/admin/admin-meeting-details.tsx b/resources/js/pages/admin/admin-meeting-details.tsx
new file mode 100644
index 0000000..aabb08c
--- /dev/null
+++ b/resources/js/pages/admin/admin-meeting-details.tsx
@@ -0,0 +1,358 @@
+import { Head } from '@inertiajs/react';
+import AppLayout from '@/layouts/app-layout';
+import { type BreadcrumbItem } from '@/types';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Meeting } from '@/types/meeting';
+import { User, Task } from '@/types/task';
+import { useState } from 'react';
+import { router } from '@inertiajs/react';
+import { format } from 'date-fns';
+import { useForm } from '@inertiajs/react';
+import { Check, ChevronsUpDown, Trash2, Calendar, Users, ListTodo } from "lucide-react"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
+import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Meetings',
+        href: '/meetings',
+    },
+    {
+        title: 'Meeting Details',
+        href: '#',
+    },
+];
+
+interface PageProps {
+    meeting: Meeting;
+    users: User[];
+    tasks: Task[];
+}
+
+type MeetingType = 'internal' | 'client' | 'external';
+
+const typeColors: Record<MeetingType, string> = {
+    'internal': 'bg-blue-50/50 text-blue-600 border border-blue-100',
+    'client': 'bg-purple-50/50 text-purple-600 border border-purple-100',
+    'external': 'bg-green-50/50 text-green-600 border border-green-100'
+};
+
+export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
+    const [isEditing, setIsEditing] = useState(false);
+    const { data, setData, put, processing, errors } = useForm({
+        title: meeting.title,
+        date: meeting.date,
+        type: meeting.type,
+        agenda_text: meeting.agenda_text,
+        users: meeting.users.map(user => user.id),
+        tasks: meeting.tasks.map(task => task.id)
+    });
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        put(`/meetings/${meeting.id}`, {
+            onSuccess: () => {
+                setIsEditing(false);
+            }
+        });
+    };
+
+    const handleCancel = () => {
+        setIsEditing(false);
+    };
+
+    const handleDelete = () => {
+        if (confirm("Are you sure you want to delete this meeting?")) {
+            router.delete(`/meetings/${meeting.id}`);
+        }
+    };
+
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title={`Meeting: ${meeting.title}`} />
+            <div className="flex h-full flex-1 flex-col gap-6 p-6">
+                <div className="flex items-center justify-between">
+                    <div className="space-y-1">
+                        <h1 className="text-2xl font-semibold tracking-tight">{meeting.title}</h1>
+                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                            <Calendar className="h-4 w-4" />
+                            {meeting.date ? format(new Date(meeting.date), 'EEEE, MMMM d, yyyy • h:mm a') : 'No date set'}
+                        </div>
+                    </div>
+                    <div className="flex gap-2">
+                        {isEditing ? (
+                            <>
+                                <Button variant="outline" onClick={handleCancel} className="cursor-pointer">
+                                    Cancel
+                                </Button>
+                                <Button onClick={handleSubmit} disabled={processing} className="cursor-pointer">
+                                    Save Changes
+                                </Button>
+                            </>
+                        ) : (
+                            <>
+                                <Button onClick={() => setIsEditing(true)} className="cursor-pointer">
+                                    Edit Meeting
+                                </Button>
+                                
+                                <DeleteConfirmation
+                                    onConfirm={() => router.delete(`/meetings/${meeting.id}`)}
+                                    itemType="meeting"
+                                    itemName={meeting.title}
+                                >
+                                    <Button variant="destructive" className="cursor-pointer">
+                                        Delete Meeting
+                                    </Button>
+                                </DeleteConfirmation>
+                            </>
+                        )}
+                    </div>
+                </div>
+
+                <div className="grid grid-cols-3 gap-6">
+                    <Card className="col-span-2 shadow-sm">
+                        <CardHeader className="pb-4">
+                            <CardTitle className="text-lg font-medium">Meeting Details</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <form onSubmit={handleSubmit} className="space-y-8">
+                                <div className="grid grid-cols-2 gap-8">
+                                    <div className="space-y-2">
+                                        <Label htmlFor="title" className="text-sm font-medium">Meeting Title</Label>
+                                        {isEditing ? (
+                                            <Input
+                                                id="title"
+                                                value={data.title}
+                                                onChange={e => setData('title', e.target.value)}
+                                                error={errors.title}
+                                                className="h-10"
+                                            />
+                                        ) : (
+                                            <div className="text-lg font-medium mt-2 h-10 flex items-center text-foreground">{meeting.title}</div>
+                                        )}
+                                    </div>
+
+                                    <div className="space-y-2">
+                                        <Label htmlFor="type" className="text-sm font-medium">Meeting Type</Label>
+                                        {isEditing ? (
+                                            <Input
+                                                id="type"
+                                                value={data.type}
+                                                onChange={e => setData('type', e.target.value)}
+                                                error={errors.type}
+                                                className="h-10"
+                                                placeholder="Type (e.g. Internal, Client, etc.)"
+                                            />
+                                        ) : (
+                                            <div className="mt-2 h-10 flex items-center">
+                                                <Badge className={cn(typeColors[meeting.type as MeetingType], "text-sm font-medium px-3 py-1")}>
+                                                    {meeting.type}
+                                                </Badge>
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="date" className="text-sm font-medium">Date & Time</Label>
+                                    {isEditing ? (
+                                        <Input
+                                            type="datetime-local"
+                                            id="date"
+                                            value={data.date ? new Date(data.date).toISOString().slice(0, 16) : ''}
+                                            onChange={e => setData('date', e.target.value)}
+                                            error={errors.date}
+                                            className="h-10"
+                                        />
+                                    ) : (
+                                        <div className="flex items-center text-muted-foreground mt-2 h-10">
+                                            <Calendar className="h-4 w-4 mr-2" />
+                                            {meeting.date ? format(new Date(meeting.date), 'EEEE, MMMM d, yyyy • h:mm a') : 'No date set'}
+                                        </div>
+                                    )}
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="agenda_text" className="text-sm font-medium">Agenda</Label>
+                                    {isEditing ? (
+                                        <Textarea
+                                            id="agenda_text"
+                                            value={data.agenda_text}
+                                            onChange={e => setData('agenda_text', e.target.value)}
+                                            error={errors.agenda_text}
+                                            className="min-h-[200px]"
+                                        />
+                                    ) : (
+                                        <div className="text-muted-foreground bg-muted/30 p-4 rounded-md mt-2 min-h-[200px]">
+                                            {meeting.agenda_text || 'No agenda set'}
+                                        </div>
+                                    )}
+                                </div>
+                            </form>
+                        </CardContent>
+                    </Card>
+
+                    <div className="space-y-6">
+                        <Card className="shadow-sm">
+                            <CardHeader className="pb-4">
+                                <CardTitle className="text-lg font-medium">Attendees</CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                {isEditing ? (
+                                    <Popover>
+                                        <PopoverTrigger asChild>
+                                            <Button
+                                                variant="outline"
+                                                role="combobox"
+                                                className="w-full justify-between h-10"
+                                            >
+                                                {data.users.length > 0
+                                                    ? `${data.users.length} users selected`
+                                                    : "Select users..."}
+                                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                            </Button>
+                                        </PopoverTrigger>
+                                        <PopoverContent className="w-full p-0" align="start">
+                                            <Command className="max-h-[200px]">
+                                                <CommandInput placeholder="Search users..." />
+                                                <CommandEmpty>No users found.</CommandEmpty>
+                                                <CommandGroup className="overflow-y-auto">
+                                                    {users.map((user) => (
+                                                        <CommandItem
+                                                            key={user.id}
+                                                            onSelect={() => {
+                                                                const newUsers = data.users.includes(user.id)
+                                                                    ? data.users.filter(id => id !== user.id)
+                                                                    : [...data.users, user.id];
+                                                                setData('users', newUsers);
+                                                            }}
+                                                            className="flex items-center gap-2 px-2 py-1.5"
+                                                        >
+                                                            <Check
+                                                                className={cn(
+                                                                    "h-4 w-4",
+                                                                    data.users.includes(user.id) ? "opacity-100" : "opacity-0"
+                                                                )}
+                                                            />
+                                                            <span>{user.name}</span>
+                                                        </CommandItem>
+                                                    ))}
+                                                </CommandGroup>
+                                            </Command>
+                                        </PopoverContent>
+                                    </Popover>
+                                ) : (
+                                    <div className="space-y-4">
+                                        <div className="flex items-center text-muted-foreground">
+                                            <Users className="h-4 w-4 mr-2" />
+                                            {meeting.users.length > 0 
+                                                ? `${meeting.users.length} ${meeting.users.length === 1 ? 'Attendee' : 'Attendees'}`
+                                                : 'No Attendees'}
+                                        </div>
+                                        <div className="flex flex-wrap gap-1.5">
+                                            {meeting.users.length > 0 ? (
+                                                meeting.users.map((user) => (
+                                                    <Badge key={user.id} variant="secondary" className="text-sm bg-muted/50">
+                                                        {user.name}
+                                                    </Badge>
+                                                ))
+                                            ) : (
+                                                <span className="text-muted-foreground text-sm">None</span>
+                                            )}
+                                        </div>
+                                    </div>
+                                )}
+                            </CardContent>
+                        </Card>
+
+                        <Card className="shadow-sm">
+                            <CardHeader className="pb-4">
+                                <CardTitle className="text-lg font-medium">Related Tasks</CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                {isEditing ? (
+                                    <Popover>
+                                        <PopoverTrigger asChild>
+                                            <Button
+                                                variant="outline"
+                                                role="combobox"
+                                                className="w-full justify-between h-10"
+                                            >
+                                                {data.tasks.length > 0
+                                                    ? `${data.tasks.length} tasks selected`
+                                                    : "Select tasks..."}
+                                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                            </Button>
+                                        </PopoverTrigger>
+                                        <PopoverContent className="w-full p-0" align="start">
+                                            <Command className="max-h-[200px]">
+                                                <CommandInput placeholder="Search tasks..." />
+                                                <CommandEmpty>No tasks found.</CommandEmpty>
+                                                <CommandGroup className="overflow-y-auto">
+                                                    {tasks.map((task) => (
+                                                        <CommandItem
+                                                            key={task.id}
+                                                            onSelect={() => {
+                                                                const newTasks = data.tasks.includes(task.id)
+                                                                    ? data.tasks.filter(id => id !== task.id)
+                                                                    : [...data.tasks, task.id];
+                                                                setData('tasks', newTasks);
+                                                            }}
+                                                            className="flex items-center gap-2 px-2 py-1.5"
+                                                        >
+                                                            <Check
+                                                                className={cn(
+                                                                    "h-4 w-4",
+                                                                    data.tasks.includes(task.id) ? "opacity-100" : "opacity-0"
+                                                                )}
+                                                            />
+                                                            <span>{task.name}</span>
+                                                        </CommandItem>
+                                                    ))}
+                                                </CommandGroup>
+                                            </Command>
+                                        </PopoverContent>
+                                    </Popover>
+                                ) : (
+                                    <div className="space-y-4">
+                                        <div className="flex items-center text-muted-foreground">
+                                            <ListTodo className="h-4 w-4 mr-2" />
+                                            {meeting.tasks.length > 0 
+                                                ? `${meeting.tasks.length} ${meeting.tasks.length === 1 ? 'Task' : 'Tasks'}`
+                                                : 'No Tasks'}
+                                        </div>
+                                        <div className="flex flex-wrap gap-1.5">
+                                            {meeting.tasks.length > 0 ? (
+                                                meeting.tasks.map((task) => (
+                                                    <Badge key={task.id} variant="secondary" className="text-sm bg-muted/50">
+                                                        {task.name}
+                                                    </Badge>
+                                                ))
+                                            ) : (
+                                                <span className="text-muted-foreground text-sm">None</span>
+                                            )}
+                                        </div>
+                                    </div>
+                                )}
+                            </CardContent>
+                        </Card>
+                    </div>
+                </div>
+                <div className="mt-6">
+                    <Button variant="outline" onClick={() => router.visit('/meetings')} className="cursor-pointer">
+                        ← Back to Meetings List
+                    </Button>
+                </div>
+            </div>
+        </AppLayout>
+    );
+}
+
diff --git a/resources/js/pages/admin/admin-meeting-list.tsx b/resources/js/pages/admin/admin-meeting-list.tsx
new file mode 100644
index 0000000..c1ee69f
--- /dev/null
+++ b/resources/js/pages/admin/admin-meeting-list.tsx
@@ -0,0 +1,202 @@
+import { Head } from '@inertiajs/react';
+import AppLayout from '@/layouts/app-layout';
+import { type BreadcrumbItem } from '@/types';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Plus, ArrowUpDown } from 'lucide-react';
+import { DataTable } from '@/components/data-table';
+import { ColumnDef } from '@tanstack/react-table';
+import { useState } from 'react';
+import { router } from '@inertiajs/react';
+import { format } from 'date-fns';
+import { Meeting } from '@/types/meeting';
+import { Task, User } from '@/types/task';
+import { CreateMeetingDialog } from '@/components/meetings/create-meeting-dialog';
+import { MeetingSummary } from '@/components/meetings/meeting-summary';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Meetings',
+        href: '/meetings',
+    },
+];
+
+interface PageProps {
+    meetings: Meeting[];
+    users: User[];
+    tasks: Task[];
+}
+
+const columns: ColumnDef<Meeting>[] = [
+    {
+        accessorKey: "title",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Meeting
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const meeting = row.original
+            return (
+                <div>
+                    <div className="font-medium">{meeting.title}</div>
+                    <div className="text-sm text-muted-foreground">
+                        {meeting.type}
+                    </div>
+                </div>
+            )
+        },
+    },
+    {
+        accessorKey: "date",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Date
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const date = row.getValue("date")
+            if (!date) return '-'
+            try {
+                return format(new Date(date as string), 'MMM dd, yyyy - hh:mm a')
+            } catch (error) {
+                return '-'
+            }
+        },
+    },
+    {
+        accessorKey: "type",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Type
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            return (
+                <Badge variant="secondary">
+                    {row.getValue("type")}
+                </Badge>
+            )
+        },
+    },
+    {
+        accessorKey: "users",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Attendees
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const attendees = row.original.users || []
+            return (
+                <div className="flex flex-wrap gap-1">
+                    {attendees.map((user) => (
+                        <Badge key={user.id} variant="secondary">
+                            {user.name}
+                        </Badge>
+                    ))}
+                </div>
+            )
+        },
+    },
+    {
+        accessorKey: "tasks",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Related Tasks
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const tasks = row.original.tasks || []
+            return (
+                <div className="flex flex-wrap gap-1">
+                    {tasks.map((task) => (
+                        <Badge key={task.id} variant="outline">
+                            {task.name}
+                        </Badge>
+                    ))}
+                </div>
+            )
+        },
+    },
+];
+
+export default function Meetings({ meetings, users, tasks }: PageProps) {
+    const [isMeetingDialogOpen, setIsMeetingDialogOpen] = useState(false);
+
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title="Meetings" />
+            <div className="flex h-full flex-1 flex-col gap-4 p-4">
+                <div className="flex items-center justify-between">
+                    <h1 className="text-2xl font-semibold ml-5">Manage Your Meetings</h1>
+                    <div className="flex items-center gap-5">
+                        <MeetingSummary meetings={meetings} />
+                    </div>
+                </div>
+
+                <Card>
+                    <CardContent className="pt-6">
+                        <DataTable
+                            columns={columns}
+                            data={meetings}
+                            searchPlaceholder="Search meetings..."
+                            searchColumn="title"
+                            onRowClick={(meeting) => router.visit(`/meetings/${meeting.id}`)}
+                            addButton={
+                                <Button onClick={() => setIsMeetingDialogOpen(true)} className="cursor-pointer">
+                                    <Plus className="mr-2 h-4 w-4" />
+                                    Add Meeting
+                                </Button>
+                            }
+                        />
+                    </CardContent>
+                </Card>
+
+                <CreateMeetingDialog
+                    users={users}
+                    tasks={tasks}
+                    open={isMeetingDialogOpen}
+                    onOpenChange={setIsMeetingDialogOpen}
+                />
+            </div>
+        </AppLayout>
+    );
+}
+
diff --git a/resources/js/pages/admin/admin-task-details.tsx b/resources/js/pages/admin/admin-task-details.tsx
new file mode 100644
index 0000000..d3436b2
--- /dev/null
+++ b/resources/js/pages/admin/admin-task-details.tsx
@@ -0,0 +1,303 @@
+import { Head } from '@inertiajs/react';
+import AppLayout from '@/layouts/app-layout';
+import { type BreadcrumbItem } from '@/types';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Task, TaskStatus, TaskPriority, User } from '@/types/task';
+import { useState } from 'react';
+import { router } from '@inertiajs/react';
+import { format } from 'date-fns';
+import { useForm } from '@inertiajs/react';
+import { Check, ChevronsUpDown, Trash2, Calendar, Users, AlertCircle } from "lucide-react"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
+import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Tasks',
+        href: '/tasks',
+    },
+    {
+        title: 'Task Details',
+        href: '#',
+    },
+];
+
+interface PageProps {
+    task: Task;
+    all_users: User[];
+}
+
+const statusColors = {
+    'pending': 'bg-yellow-50 text-yellow-700 border border-yellow-200',
+    'in_progress': 'bg-blue-50 text-blue-700 border border-blue-200',
+    'completed': 'bg-green-50 text-green-700 border border-green-200'
+};
+
+const priorityColors = {
+    'low': 'bg-gray-50 text-gray-700 border border-gray-200',
+    'medium': 'bg-orange-50 text-orange-700 border border-orange-200',
+    'high': 'bg-red-50 text-red-700 border border-red-200'
+};
+
+export default function TaskDetails({ task, all_users }: PageProps) {
+    const [isEditing, setIsEditing] = useState(false);
+    const { data, setData, put, processing, errors } = useForm({
+        name: task.name,
+        description: task.description,
+        status: task.status,
+        priority: task.priority,
+        due_date: task.due_date,
+        users: task.users.map(user => user.id)
+    });
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        put(`/tasks/${task.id}`, {
+            onSuccess: () => {
+                setIsEditing(false);
+            }
+        });
+    };
+
+    const handleCancel = () => {
+        setIsEditing(false);
+    };
+
+
+
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title={`Task: ${task.name}`} />
+            <div className="flex h-full flex-1 flex-col gap-4 p-4">
+                <div className="flex items-center justify-between">
+                    <h1 className="text-2xl font-semibold">Task Details</h1>
+                    <div className="flex gap-2">
+                        {isEditing ? (
+                            <>
+                                <Button variant="outline" onClick={handleCancel} className="cursor-pointer">
+                                    Cancel
+                                </Button>
+                                <Button onClick={handleSubmit} disabled={processing} className="cursor-pointer">
+                                    Save Changes
+                                </Button>
+                            </>
+                        ) : (
+                            <>
+                                <Button onClick={() => setIsEditing(true)} className="cursor-pointer">
+                                    Edit Task
+                                </Button>
+                                <DeleteConfirmation
+                                    onConfirm={() => router.delete(`/tasks/${task.id}`)}
+                                    itemType="task"
+                                    itemName={task.name}
+                                >
+                                    <Button variant="destructive" className="cursor-pointer">
+                                        Delete Task
+                                    </Button>
+                                </DeleteConfirmation>
+                            </>
+                        )}
+                    </div>
+                </div>
+
+                <Card>
+                    <CardHeader>
+                        <CardTitle>Task Information</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <form onSubmit={handleSubmit} className="space-y-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="name">Task Name</Label>
+                                {isEditing ? (
+                                    <Input
+                                        id="name"
+                                        value={data.name}
+                                        onChange={e => setData('name', e.target.value)}
+                                        error={errors.name}
+                                        className="h-10"
+                                    />
+                                ) : (
+                                    <div className="text-lg font-medium mt-2 h-10 flex items-center">{task.name}</div>
+                                )}
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="description">Description</Label>
+                                {isEditing ? (
+                                    <Textarea
+                                        id="description"
+                                        value={data.description}
+                                        onChange={e => setData('description', e.target.value)}
+                                        error={errors.description}
+                                        className="min-h-[100px]"
+                                    />
+                                ) : (
+                                    <div className="text-muted-foreground bg-muted/50 p-3 rounded-md mt-2 min-h-[100px]">
+                                        {task.description}
+                                    </div>
+                                )}
+                            </div>
+
+                            <div className="grid grid-cols-2 gap-6">
+                                <div className="space-y-2">
+                                    <Label htmlFor="status">Status</Label>
+                                    {isEditing ? (
+                                        <Select
+                                            value={data.status}
+                                            onValueChange={(value) => {
+                                                setData('status', value as TaskStatus);
+                                            }}
+                                        >
+                                            <SelectTrigger className="h-10">
+                                                <SelectValue />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                <SelectItem value="pending">Pending</SelectItem>
+                                                <SelectItem value="in_progress">In Progress</SelectItem>
+                                                <SelectItem value="completed">Completed</SelectItem>
+                                            </SelectContent>
+                                        </Select>
+                                    ) : (
+                                        <div className="mt-2 h-10 flex items-center">
+                                            <Badge className={cn(statusColors[task.status], "text-sm font-medium px-3 py-1")}>
+                                                {task.status.replace('_', ' ')}
+                                            </Badge>
+                                        </div>
+                                    )}
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="priority">Priority</Label>
+                                    {isEditing ? (
+                                        <Select
+                                            value={data.priority}
+                                            onValueChange={(value) => {
+                                                setData('priority', value as TaskPriority);
+                                            }}
+                                        >
+                                            <SelectTrigger className="h-10">
+                                                <SelectValue />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                <SelectItem value="low">Low</SelectItem>
+                                                <SelectItem value="medium">Medium</SelectItem>
+                                                <SelectItem value="high">High</SelectItem>
+                                            </SelectContent>
+                                        </Select>
+                                    ) : (
+                                        <div className="mt-2 h-10 flex items-center">
+                                            <Badge className={cn(priorityColors[task.priority], "text-sm font-medium px-3 py-1")}>
+                                                {task.priority}
+                                            </Badge>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div className="grid grid-cols-2 gap-6">
+                                <div className="space-y-2">
+                                    <Label>Due Date</Label>
+                                    {isEditing ? (
+                                        <Input
+                                            type="date"
+                                            value={data.due_date ? new Date(data.due_date).toISOString().split('T')[0] : ''}
+                                            onChange={e => setData('due_date', e.target.value)}
+                                            error={errors.due_date}
+                                            className="h-10"
+                                        />
+                                    ) : (
+                                        <div className="flex items-center text-muted-foreground mt-2 h-10">
+                                            <Calendar className="h-4 w-4 mr-2" />
+                                            {task.due_date ? format(new Date(task.due_date), 'MMM dd, yyyy') : 'No due date'}
+                                        </div>
+                                    )}
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label>Assigned Users</Label>
+                                    {isEditing ? (
+                                        <Popover>
+                                            <PopoverTrigger asChild>
+                                                <Button
+                                                    variant="outline"
+                                                    role="combobox"
+                                                    className="w-full justify-between h-10"
+                                                >
+                                                    {data.users.length > 0
+                                                        ? `${data.users.length} users selected`
+                                                        : "Select users..."}
+                                                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                                </Button>
+                                            </PopoverTrigger>
+                                            <PopoverContent className="w-full p-0" align="start">
+                                                <Command className="max-h-[200px]">
+                                                    <CommandInput placeholder="Search users..." />
+                                                    <CommandEmpty>No users found.</CommandEmpty>
+                                                    <CommandGroup className="overflow-y-auto">
+                                                        {all_users.map((user) => (
+                                                            <CommandItem
+                                                                key={user.id}
+                                                                onSelect={() => {
+                                                                    const newUsers = data.users.includes(user.id)
+                                                                        ? data.users.filter(id => id !== user.id)
+                                                                        : [...data.users, user.id];
+                                                                    setData('users', newUsers);
+                                                                }}
+                                                                className="flex items-center gap-2 px-2 py-1.5"
+                                                            >
+                                                                <Check
+                                                                    className={cn(
+                                                                        "h-4 w-4",
+                                                                        data.users.includes(user.id) ? "opacity-100" : "opacity-0"
+                                                                    )}
+                                                                />
+                                                                <span>{user.name}</span>
+                                                            </CommandItem>
+                                                        ))}
+                                                    </CommandGroup>
+                                                </Command>
+                                            </PopoverContent>
+                                        </Popover>
+                                    ) : (
+                                        <div className="space-y-2 mt-2 min-h-[40px]">
+                                            <div className="flex items-center text-muted-foreground">
+                                                <Users className="h-4 w-4 mr-2" />
+                                                {task.users.length > 0 
+                                                    ? `${task.users.length} ${task.users.length === 1 ? 'User' : 'Users'} Assigned`
+                                                    : 'No Users Assigned'}
+                                            </div>
+                                            <div className="flex flex-wrap gap-1">
+                                                {task.users.length > 0 ? (
+                                                    task.users.map((user) => (
+                                                        <Badge key={user.id} variant="secondary" className="text-sm">
+                                                            {user.name}
+                                                        </Badge>
+                                                    ))
+                                                ) : (
+                                                    <span className="text-muted-foreground text-sm">None</span>
+                                                )}
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        </form>
+                    </CardContent>
+                </Card>
+                <div className="mt-6">
+                    <Button variant="outline" onClick={() => router.visit('/tasks')} className="cursor-pointer">
+                        ← Back to Tasks List
+                    </Button>
+                </div>
+            </div>
+        </AppLayout>
+    );
+}
\ No newline at end of file
diff --git a/resources/js/pages/admin/admin-task-list.tsx b/resources/js/pages/admin/admin-task-list.tsx
new file mode 100644
index 0000000..ce052da
--- /dev/null
+++ b/resources/js/pages/admin/admin-task-list.tsx
@@ -0,0 +1,176 @@
+import { Head } from '@inertiajs/react';
+import AppLayout from '@/layouts/app-layout';
+import { type BreadcrumbItem } from '@/types';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Plus, ArrowUpDown } from 'lucide-react';
+import { DataTable } from '@/components/data-table';
+import { ColumnDef } from '@tanstack/react-table';
+import { useState } from 'react';
+import { router } from '@inertiajs/react';
+import { format } from 'date-fns';
+import { Task, TaskStatus, User } from '@/types/task';
+import { CreateTaskDialog } from '@/components/tasks/create-task-dialog';
+import { AdminTaskStats } from '@/components/tasks/admin-task-stats';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Tasks',
+        href: '/tasks',
+    },
+];
+
+
+interface PageProps {
+    tasks: Task[];
+    users: User[];
+}
+
+const columns: ColumnDef<Task>[] = [
+    {
+        accessorKey: "name",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Task
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const task = row.original
+            return (
+                <div>
+                    <div className="font-medium">{task.name}</div>
+                    <div className="text-sm text-muted-foreground">{task.description}</div>
+                </div>
+            )
+        },
+    },
+    {
+        accessorKey: "status",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Status
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const status = row.getValue("status") as TaskStatus
+            const statusColors = {
+                'pending': 'bg-yellow-100 text-yellow-800',
+                'in_progress': 'bg-blue-100 text-blue-800',
+                'completed': 'bg-green-100 text-green-800'
+            }
+            return (
+                <Badge className={statusColors[status]}>
+                    {status.replace('_', ' ')}
+                </Badge>
+            )
+        },
+    },
+    {
+        accessorKey: "due_date",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Due Date
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const date = row.original.due_date
+            if (!date) return '-'
+            try {
+                return format(new Date(date), 'MMM dd, yyyy')
+            } catch (error) {
+                return '-'
+            }
+        },
+    },
+    {
+        accessorKey: "users",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Assigned To
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const assignedUsers = row.original.users || []
+            return (
+                <div className="flex flex-wrap gap-1">
+                    {assignedUsers.map((user) => (
+                        <Badge key={user.id} variant="secondary">
+                            {user.name}
+                        </Badge>
+                    ))}
+                </div>
+            )
+        },
+    },
+];
+
+export default function Tasks({ tasks, users }: PageProps) {
+    const [isTaskDialogOpen, setIsTaskDialogOpen] = useState(false);
+
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title="Tasks" />
+            <div className="flex h-full flex-1 flex-col gap-4 p-4">
+                <div className="flex items-center justify-between">
+                    <h1 className="text-2xl font-semibold ml-5">Manage Your Tasks</h1>
+                    <div className="flex items-center gap-5">
+                        <AdminTaskStats tasks={tasks} />
+                    </div>
+                </div>
+
+                <Card>
+                    <CardContent className="pt-6 ">
+                        <DataTable
+                            columns={columns}
+                            data={tasks}
+                            searchPlaceholder="Search tasks..."
+                            searchColumn="name"
+                            onRowClick={(task) => router.visit(`/tasks/${task.id}`)}
+                            addButton={
+                                <Button onClick={() => setIsTaskDialogOpen(true)} className="cursor-pointer">
+                                    <Plus className="mr-2 h-4 w-4" />
+                                    Add Task
+                                </Button>
+                            }
+                        />
+                    </CardContent>
+                </Card>
+
+                <CreateTaskDialog
+                    users={users}
+                    open={isTaskDialogOpen}
+                    onOpenChange={setIsTaskDialogOpen}
+                />
+            </div>
+        </AppLayout>
+    );
+}
\ No newline at end of file
diff --git a/resources/js/pages/Users/user-details.tsx b/resources/js/pages/admin/admin-user-details.tsx
similarity index 83%
rename from resources/js/pages/Users/user-details.tsx
rename to resources/js/pages/admin/admin-user-details.tsx
index 92a44e0..1e485e3 100644
--- a/resources/js/pages/Users/user-details.tsx
+++ b/resources/js/pages/admin/admin-user-details.tsx
@@ -7,6 +7,9 @@ import { Button } from '@/components/ui/button';
 import { User, Trash2 } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { PageProps } from '@/types';
+import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
+
 
 interface User {
     id: number;
@@ -14,30 +17,26 @@ interface User {
     email: string;
 }
 
-interface UserDetailsProps {
-    user: User;
-}
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Users',
+        href: '/users',
+    },
+    {
+        title: 'User Details',
+        href: '/users/details',
+    },
+];
 
-export default function UserDetails({ user: initialUser }: UserDetailsProps) {
+export default function UserDetails({ user }: PageProps<{ user: User }>) {
     const [isEditing, setIsEditing] = useState(false);
     const { data, setData, put, processing, errors, reset } = useForm({
-        name: initialUser.name,
-        email: initialUser.email,
+        name: user.name,
+        email: user.email,
     });
 
-    const breadcrumbs: BreadcrumbItem[] = [
-        {
-            title: 'Users',
-            href: '/users',
-        },
-        {
-            title: 'User Details',
-            href: `/users/${initialUser.id}`,
-        },
-    ];
-
     const handleSave = () => {
-        put(`/users/${initialUser.id}`, {
+        put(`/users/${user.id}`, {
             onSuccess: () => {
                 setIsEditing(false);
             },
@@ -49,12 +48,7 @@ export default function UserDetails({ user: initialUser }: UserDetailsProps) {
         setIsEditing(false);
     };
 
-    const handleDelete = () => {
-        if (confirm('Are you sure you want to delete this user?')) {
-            router.delete(`/users/${initialUser.id}`, {
-            });
-        }
-    };
+
 
 
     return (
@@ -78,12 +72,14 @@ export default function UserDetails({ user: initialUser }: UserDetailsProps) {
                                             variant="outline"
                                             onClick={handleCancel}
                                             disabled={processing}
+                                            className="cursor-pointer"
                                         >
                                             Cancel
                                         </Button>
                                         <Button
                                             onClick={handleSave}
                                             disabled={processing}
+                                            className="cursor-pointer"
                                         >
                                             {processing ? 'Saving...' : 'Save Changes'}
                                         </Button>
@@ -93,16 +89,19 @@ export default function UserDetails({ user: initialUser }: UserDetailsProps) {
                                         <Button
                                             variant="outline"
                                             onClick={() => setIsEditing(true)}
+                                            className="cursor-pointer"
                                         >
                                             Edit Profile
                                         </Button>
-                                        <Button
-                                            variant="destructive"
-                                            onClick={handleDelete}
+                                        <DeleteConfirmation
+                                            onConfirm={() => router.delete(`/users/${user.id}`)}
+                                            itemType="user"
+                                            itemName={user.name}
                                         >
-                                            <Trash2 className="h-4 w-4 mr-2" />
-                                            Delete User
-                                        </Button>
+                                            <Button variant="destructive" className="cursor-pointer">
+                                                Delete User
+                                            </Button>
+                                        </DeleteConfirmation>
                                     </div>
                                 )}
                             </div>
diff --git a/resources/js/pages/admin/admin-user-list.tsx b/resources/js/pages/admin/admin-user-list.tsx
new file mode 100644
index 0000000..7095dd8
--- /dev/null
+++ b/resources/js/pages/admin/admin-user-list.tsx
@@ -0,0 +1,153 @@
+import { Head, router } from '@inertiajs/react';
+import AppLayout from '@/layouts/app-layout';
+import { type BreadcrumbItem } from '@/types';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Plus, ArrowUpDown, Mail, Shield } from 'lucide-react';
+import { DataTable } from '@/components/data-table';
+import { ColumnDef } from '@tanstack/react-table';
+import { PageProps } from '@/types';
+import CreateUserDialog from '@/components/users/create-user-dialog';
+import { UserSummary } from '@/components/users/user-summary';
+import { useState } from 'react';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Users',
+        href: '/users',
+    },
+];
+
+interface User {
+    id: number;
+    name: string;
+    email: string;
+    role: {
+        id: number;
+        name: string;
+    };
+}
+
+const columns: ColumnDef<User>[] = [
+    {
+        accessorKey: "name",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Name
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const user = row.original;
+            return (
+                <div>
+                    <div className="font-medium">{user.name}</div>
+                </div>
+            )
+        },
+    },
+    {
+        accessorKey: "email",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Email
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const email = row.getValue("email") as string;
+            return (
+                <div className="flex items-center gap-2">
+                    <Mail className="h-4 w-4 text-muted-foreground" />
+                    <span>{email}</span>
+                </div>
+            )
+        },
+    },
+    {
+        accessorKey: "role.name",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Role
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const roleName = row.original.role.name;
+            const displayName = roleName === "Client-Admin" ? "Admin" : roleName;
+            const roleColors = {
+                'Admin': 'bg-purple-100 text-purple-800',
+                'User': 'bg-blue-100 text-blue-800',
+                'default': 'bg-gray-100 text-gray-800'
+            };
+            return (
+                <div className="flex items-center gap-2">
+                    <Shield className="h-4 w-4 text-muted-foreground" />
+                    <Badge className={roleColors[displayName as keyof typeof roleColors] || roleColors.default}>
+                        {displayName}
+                    </Badge>
+                </div>
+            )
+        }
+    },
+];
+
+export default function Users({ users }: PageProps<{ users: User[] }>) {
+    const [isUserDialogOpen, setIsUserDialogOpen] = useState(false);
+
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title="Users" />
+            <div className="flex h-full flex-1 flex-col gap-4 p-4">
+                <div className="flex items-center justify-between mt-2 mb-2">
+                    <h1 className="text-2xl font-semibold">Manage Your Users</h1>
+                    <div className="flex items-center">
+                        <UserSummary users={users} />
+                    </div>
+                </div>
+
+                <Card>
+                    <CardContent className="pt-6">
+                        <DataTable
+                            columns={columns}
+                            data={users}
+                            searchPlaceholder="Search users..."
+                            searchColumn="name"
+                            onRowClick={(user) => router.visit(`/users/${user.id}`)}
+                            addButton={
+                                <Button onClick={() => setIsUserDialogOpen(true)} className="cursor-pointer">
+                                    <Plus className="mr-2 h-4 w-4" />
+                                    Add User
+                                </Button>
+                            }
+                        />
+                    </CardContent>
+                </Card>
+
+                <CreateUserDialog
+                    open={isUserDialogOpen}
+                    onOpenChange={setIsUserDialogOpen}
+                />
+            </div>
+        </AppLayout>
+    );
+} 
\ No newline at end of file
diff --git a/resources/js/pages/tasks.tsx b/resources/js/pages/tasks.tsx
deleted file mode 100644
index b125e55..0000000
--- a/resources/js/pages/tasks.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import { Head } from '@inertiajs/react';
-import AppLayout from '@/layouts/app-layout';
-import { type BreadcrumbItem } from '@/types';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Badge } from '@/components/ui/badge';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { Plus, Search, ArrowUpDown } from 'lucide-react';
-import { DataTable } from '@/components/data-table';
-import { ColumnDef } from '@tanstack/react-table';
-
-const breadcrumbs: BreadcrumbItem[] = [
-    {
-        title: 'Tasks',
-        href: '/tasks',
-    },
-];
-
-type TaskStatus = 'pending' | 'in-progress' | 'completed';
-type TaskPriority = 'low' | 'medium' | 'high';
-
-interface Task {
-    id: number;
-    title: string;
-    description: string;
-    status: TaskStatus;
-    priority: TaskPriority;
-    dueDate: string;
-    assignedTo: string;
-}
-
-// Mock data for tasks
-const tasks: Task[] = [
-    {
-        id: 1,
-        title: 'Complete project proposal',
-        description: 'Write and submit the project proposal for the new client',
-        status: 'in-progress',
-        priority: 'high',
-        dueDate: '2024-05-15',
-        assignedTo: 'John Doe',
-    },
-    {
-        id: 2,
-        title: 'Review team performance',
-        description: 'Analyze and document team performance metrics for Q2',
-        status: 'pending',
-        priority: 'medium',
-        dueDate: '2024-05-20',
-        assignedTo: 'Jane Smith',
-    },
-    {
-        id: 3,
-        title: 'Schedule team meeting',
-        description: 'Set up a meeting to discuss project milestones',
-        status: 'completed',
-        priority: 'low',
-        dueDate: '2024-05-10',
-        assignedTo: 'Mike Johnson',
-    },
-];
-
-const statusColors: Record<TaskStatus, string> = {
-    'pending': 'bg-yellow-500',
-    'in-progress': 'bg-blue-500',
-    'completed': 'bg-green-500',
-};
-
-const priorityColors: Record<TaskPriority, string> = {
-    'low': 'bg-gray-500',
-    'medium': 'bg-orange-500',
-    'high': 'bg-red-500',
-};
-
-const columns: ColumnDef<Task>[] = [
-    {
-        id: "select",
-        header: ({ table }) => (
-            <Checkbox
-                checked={
-                    table.getIsAllPageRowsSelected() ||
-                    (table.getIsSomePageRowsSelected() && "indeterminate")
-                }
-                onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-                aria-label="Select all"
-            />
-        ),
-        cell: ({ row }) => (
-            <Checkbox
-                checked={row.getIsSelected()}
-                onCheckedChange={(value) => row.toggleSelected(!!value)}
-                aria-label="Select row"
-            />
-        ),
-        enableSorting: false,
-        enableHiding: false,
-    },
-    {
-        accessorKey: "title",
-        header: ({ column }) => {
-            return (
-                <Button
-                    variant="ghost"
-                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-                >
-                    Title
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            )
-        },
-        cell: ({ row }) => {
-            const task = row.original
-            return (
-                <div>
-                    <div className="font-medium">{task.title}</div>
-                    <div className="text-sm text-muted-foreground">{task.description}</div>
-                </div>
-            )
-        },
-    },
-    {
-        accessorKey: "status",
-        header: "Status",
-        cell: ({ row }) => {
-            const status = row.getValue("status") as TaskStatus
-            return (
-                <Badge variant="outline" className={statusColors[status]}>
-                    {status}
-                </Badge>
-            )
-        },
-    },
-    {
-        accessorKey: "priority",
-        header: "Priority",
-        cell: ({ row }) => {
-            const priority = row.getValue("priority") as TaskPriority
-            return (
-                <Badge variant="outline" className={priorityColors[priority]}>
-                    {priority}
-                </Badge>
-            )
-        },
-    },
-    {
-        accessorKey: "dueDate",
-        header: "Due Date",
-    },
-    {
-        accessorKey: "assignedTo",
-        header: "Assigned To",
-    },
-];
-
-export default function Tasks() {
-    return (
-        <AppLayout breadcrumbs={breadcrumbs}>
-            <Head title="Tasks" />
-            <div className="flex h-full flex-1 flex-col gap-4 p-4">
-                <div className="flex items-center justify-end">
-                    <Button>
-                        <Plus className="mr-2 h-4 w-4" />
-                        Add Task
-                    </Button>
-                </div>
-
-                <div className="flex gap-4">
-                    <div className="flex-1">
-                        <Card>
-                            <CardHeader>
-                                <CardTitle>Task List</CardTitle>
-                                <CardDescription>Manage your tasks and track progress</CardDescription>
-                            </CardHeader>
-                            <CardContent>
-                                <DataTable
-                                    columns={columns}
-                                    data={tasks}
-                                    searchPlaceholder="Search tasks..."
-                                    searchColumn="title"
-                                />
-                            </CardContent>
-                        </Card>
-                    </div>
-                </div>
-            </div>
-        </AppLayout>
-    );
-}
\ No newline at end of file
diff --git a/resources/js/types/meeting.ts b/resources/js/types/meeting.ts
new file mode 100644
index 0000000..c2fa952
--- /dev/null
+++ b/resources/js/types/meeting.ts
@@ -0,0 +1,16 @@
+import { Task, User } from "./task";
+
+export interface Meeting {
+    id: number;
+    title: string;
+    date: string;
+    type: string;
+    agenda_id: number;
+    agenda_text: string;
+    client_id: number;
+    users: User[];
+    tasks: Task[];
+    created_at?: string;
+    updated_at?: string;
+    deleted_at?: string | null;
+}
\ No newline at end of file
diff --git a/resources/js/types/task.ts b/resources/js/types/task.ts
new file mode 100644
index 0000000..20fb363
--- /dev/null
+++ b/resources/js/types/task.ts
@@ -0,0 +1,18 @@
+export type TaskStatus = 'pending' | 'in_progress' | 'completed';
+export type TaskPriority = 'low' | 'medium' | 'high';
+
+export interface User {
+    id: number;
+    name: string;
+    email: string;
+}
+
+export interface Task {
+    id: number;
+    name: string;
+    description: string;
+    status: TaskStatus;
+    priority: TaskPriority;
+    due_date: string | null;
+    users: User[];
+} 
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 2f9396a..31fdabf 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -3,6 +3,8 @@
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
 use App\Http\Controllers\Crud\ClientAdmin\UserController as ClientAdminUserController;
+use App\Http\Controllers\Crud\ClientAdmin\TaskController as ClientAdminTaskController;
+use App\Http\Controllers\Crud\ClientAdmin\MeetingController as ClientAdminMeetingController;
 use App\Http\Middleware\CheckRole;
 
 Route::get('/', function () {
@@ -14,18 +16,31 @@
         return Inertia::render('dashboard');
     })->name('dashboard');
 
-    Route::get('tasks', function () {
-        return Inertia::render('tasks');
-    })->name('tasks');
-
+    // Admin Task Routes
+    Route::middleware(['role:Client-Admin'])->group(function () {
+        Route::get('tasks', [ClientAdminTaskController::class, 'index'])->name('admin.tasks.index');
+        Route::post('tasks', [ClientAdminTaskController::class, 'store'])->name('admin.tasks.store');
+        Route::get('tasks/{task}', [ClientAdminTaskController::class, 'show'])->name('admin.tasks.show');
+        Route::put('tasks/{task}', [ClientAdminTaskController::class, 'update'])->name('admin.tasks.update');
+        Route::delete('tasks/{task}', [ClientAdminTaskController::class, 'destroy'])->name('admin.tasks.destroy');
+    });
 
+    // Admin User Routes
+    Route::middleware(['role:Client-Admin'])->group(function () {
+        Route::get('users', [ClientAdminUserController::class, 'index'])->name('admin.users.index');
+        Route::post('users', [ClientAdminUserController::class, 'store'])->name('admin.users.store');
+        Route::get('users/{user}', [ClientAdminUserController::class, 'show'])->name('admin.users.show');
+        Route::put('users/{user}', [ClientAdminUserController::class, 'update'])->name('admin.users.update');
+        Route::delete('users/{user}', [ClientAdminUserController::class, 'destroy'])->name('admin.users.destroy');
+    });
 
+    // Admin Meeting Routes
     Route::middleware(['role:Client-Admin'])->group(function () {
-        Route::get('users', [ClientAdminUserController::class, 'index'])->name('users.index');
-        Route::post('users', [ClientAdminUserController::class, 'store'])->name('users.store');
-        Route::get('users/{user}', [ClientAdminUserController::class, 'show'])->name('users.show');
-        Route::put('users/{user}', [ClientAdminUserController::class, 'update'])->name('users.update');
-        Route::delete('users/{user}', [ClientAdminUserController::class, 'destroy'])->name('users.destroy');
+        Route::get('meetings', [ClientAdminMeetingController::class, 'index'])->name('admin.meetings.index');
+        Route::post('meetings', [ClientAdminMeetingController::class, 'store'])->name('admin.meetings.store');
+        Route::get('meetings/{meeting}', [ClientAdminMeetingController::class, 'show'])->name('admin.meetings.show');
+        Route::put('meetings/{meeting}', [ClientAdminMeetingController::class, 'update'])->name('admin.meetings.update');
+        Route::delete('meetings/{meeting}', [ClientAdminMeetingController::class, 'destroy'])->name('admin.meetings.destroy');
     });
 });