diff --git a/app/Events/TimelineMessage.php b/app/Events/TimelineMessage.php
new file mode 100644
index 0000000..0c9328f
--- /dev/null
+++ b/app/Events/TimelineMessage.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Events;
+
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Queue\SerializesModels;
+use App\Models\User;
+use Illuminate\Support\Facades\Log;
+
+class TimelineMessage
+{
+    use Dispatchable, InteractsWithSockets, SerializesModels;
+
+    public function __construct($user, $message, $subject_type, $subject_id)
+    {
+        Log::info('reached event');
+        $this->user = $user;
+        $this->message = $message;
+        $this->origin_client_id = $user->client_id;
+        $this->subject_type = $subject_type;
+        $this->subject_id = $subject_id;
+    }
+} 
\ No newline at end of file
diff --git a/app/Http/Controllers/Auth/RegisteredUserController.php b/app/Http/Controllers/Auth/RegisteredUserController.php
index db903e8..cc900ff 100644
--- a/app/Http/Controllers/Auth/RegisteredUserController.php
+++ b/app/Http/Controllers/Auth/RegisteredUserController.php
@@ -20,7 +20,7 @@ class RegisteredUserController extends Controller
      */
     public function create(): Response
     {
-        return Inertia::render('auth/register');
+        return Inertia::render('Auth/Register');
     }
 
     /**
@@ -31,13 +31,17 @@ public function create(): Response
     public function store(Request $request): RedirectResponse
     {
         $request->validate([
-            'name' => 'required|string|max:255',
-            'email' => 'required|string|lowercase|email|max:255|unique:'.User::class,
+            'fname' => 'required|string|max:255',
+            'mname' => 'nullable|string|max:255',
+            'lname' => 'required|string|max:255',
+            'email' => 'required|string|email|max:255|unique:'.User::class,
             'password' => ['required', 'confirmed', Rules\Password::defaults()],
         ]);
 
         $user = User::create([
-            'name' => $request->name,
+            'fname' => $request->fname,
+            'mname' => $request->mname,
+            'lname' => $request->lname,
             'email' => $request->email,
             'password' => Hash::make($request->password),
         ]);
diff --git a/app/Http/Controllers/ClientAdmin/AdminDashboardController.php b/app/Http/Controllers/ClientAdmin/AdminDashboardController.php
new file mode 100644
index 0000000..4718ea7
--- /dev/null
+++ b/app/Http/Controllers/ClientAdmin/AdminDashboardController.php
@@ -0,0 +1,67 @@
+<?php
+
+namespace App\Http\Controllers\ClientAdmin;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Models\User;
+use App\Models\Role;
+use App\Models\Timeline;
+use Inertia\Inertia;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Validation\Rule;
+use App\Models\Task;
+use Carbon\Carbon;
+
+class AdminDashboardController extends Controller
+{
+    public function index()
+    {
+        $clientId = auth()->user()->client->id;
+
+        // Get all tasks with their users
+        $tasks = Task::where('client_id', $clientId)
+            ->with(['users' => function ($query) use ($clientId) {
+                $query->where('users.client_id', $clientId)
+                    ->select('users.id', 'users.fname', 'users.mname', 'users.lname', 'users.email');
+            }])
+            ->get();
+
+        // Get task completion statistics
+        $taskStats = [
+            'total' => $tasks->count(),
+            'completed' => $tasks->where('status', 'completed')->count(),
+            'in_progress' => $tasks->where('status', 'in_progress')->count(),
+            'pending' => $tasks->where('status', 'pending')->count(),
+        ];
+
+        // Get upcoming tasks (due in the next 7 days)
+        $upcomingTasks = $tasks->filter(function ($task) {
+            return $task->due_date && 
+                   Carbon::parse($task->due_date)->isBetween(
+                       now(), 
+                       now()->addDays(7)
+                   );
+        })->values()->toArray();
+
+        // Get all users for the timeline
+        $users = User::where('client_id', $clientId)
+            ->select('id', 'fname', 'mname', 'lname', 'email')
+            ->get();
+
+        // Get recent timeline activities
+        $recentActivities = Timeline::where('origin_client_id', $clientId)
+            ->with(['user:id,fname,mname,lname,email'])
+            ->latest()
+            ->take(10)
+            ->get();
+
+        return Inertia::render('admin/admin-dashboard', [
+            'taskStats' => $taskStats,
+            'upcomingTasks' => $upcomingTasks,
+            'users' => $users,
+            'tasks' => $tasks,
+            'recentActivities' => $recentActivities
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/Crud/ClientAdmin/MeetingController.php b/app/Http/Controllers/Crud/ClientAdmin/MeetingController.php
new file mode 100644
index 0000000..10d4b5c
--- /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.fname', 'users.mname', 'users.lname', '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', 'fname', 'mname', 'lname', '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.fname', 'users.mname', 'users.lname', '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', 'fname', 'mname', 'lname', '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..05b22be
--- /dev/null
+++ b/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
@@ -0,0 +1,142 @@
+<?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;
+use App\Services\TimelineMessageService;
+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.fname', 'users.mname', 'users.lname', 'users.email');
+            }])
+            ->get();
+
+        $users = User::where('client_id', $clientId)
+            ->select('id', 'fname', 'mname', 'lname', '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',
+            'meeting_id' => 'nullable|exists:meetings,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()->sync($request->users);
+        }
+
+        if ($request->has('meeting_id')) {
+            $task->meetings()->sync([$request->meeting_id]);
+        }
+
+        $timelineMessageService = new TimelineMessageService();
+        $timelineMessageService->taskCreated(auth()->user(), $task->name, 'Task', $task->id);
+
+        session()->flash('success', 'Task created successfully!');
+        return back();
+    }   
+
+    public function show(Task $task, Request $request)
+    {
+        // 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', 'fname', 'mname', 'lname', '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.fname', 'users.mname', 'users.lname', 'users.email');
+            }]),
+            'all_users' => $all_users,
+            'from_meeting' => $request->query('from_meeting')
+        ]);
+    }
+
+    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');
+        }
+
+        $validatedData = $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'
+        ]);
+
+        $originalValues = $task->getOriginal();
+
+
+        $task->update($request->only(['name', 'description', 'status', 'priority', 'due_date']));
+
+        if ($request->has('users')) {
+            $task->users()->sync($request->users);
+        }
+
+        $timelineMessageService = new TimelineMessageService();
+        $timelineMessageService->taskUpdated(auth()->user(), $task->name, 'Task', $task->id , $originalValues, $validatedData);
+
+        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..81a7e53 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
         ]);        
@@ -25,7 +27,9 @@ public function index()
     public function store(Request $request)
     {
         $request->validate([
-            'name' => 'required|string|max:255',
+            'fname' => 'required|string|max:255',
+            'mname' => 'nullable|string|max:255',
+            'lname' => 'required|string|max:255',
             'email' => 'required|string|email|max:255|unique:users',
             'password' => 'required|string|min:8|confirmed',
             'client_id' => 'required|integer',
@@ -37,13 +41,15 @@ public function store(Request $request)
         }
 
         User::create([
-            'name' => $request->name,
+            'fname' => $request->fname,
+            'mname' => $request->mname,
+            'lname' => $request->lname,
             'email' => $request->email,
             'password' => Hash::make($request->password),
             'client_id' => $request->client_id,
             'role_id' => $request->role_id,
         ]);
-
+        session()->flash('success', 'User created successfully!');
         return back();
     }
     
@@ -54,7 +60,9 @@ public function update(Request $request, User $user)
         }
 
         $validated = $request->validate([
-            'name' => 'required|string|max:255',
+            'fname' => 'required|string|max:255',
+            'mname' => 'nullable|string|max:255',
+            'lname' => 'required|string|max:255',
             'email' => [
                 'required',
                 'string',
@@ -64,26 +72,28 @@ public function update(Request $request, User $user)
             ],
         ]);
 
-
         $user->update($validated);
+        session()->flash('success', 'User updated successfully!');
         return back();
     }
 
-    public function show(User $user)
+    public function show(User $user, Request $request)
     {
         if ($user->client_id !== auth()->user()->client_id) {
             abort(403, 'Unauthorized');
         }
 
-        return Inertia::render('Users/user-details', [
-            'user' => $user
+        return Inertia::render('admin/admin-user-details', [
+            'user' => $user,
+            'from_meeting' => $request->query('from_meeting')
         ]);
     }
 
     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/Http/Controllers/Crud/ClientController.php b/app/Http/Controllers/Crud/ClientController.php
deleted file mode 100644
index f6856f1..0000000
--- a/app/Http/Controllers/Crud/ClientController.php
+++ /dev/null
@@ -1,66 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use App\Models\Client;
-use Illuminate\Http\Request;
-use Inertia\Inertia;
-use Illuminate\Support\Facades\Redirect;
-
-class ClientController extends Controller
-{
-    /**
-     * Display a listing of the clients.
-     */
-    public function index()
-    {
-
-    }
-
-    /**
-     * Show the form for creating a new client.
-     */
-    public function create()
-    {
-    }
-
-    /**
-     * Store a newly created client in storage.
-     */
-    public function store(Request $request)
-    {
-
-    }
-
-    /**
-     * Display the specified client.
-     */
-    public function show(Client $client)
-    {
-
-    }
-
-    /**
-     * Show the form for editing the specified client.
-     */
-    public function edit(Client $client)
-    {
-
-    }
-
-    /**
-     * Update the specified client in storage.
-     */
-    public function update(Request $request, Client $client)
-    {
-
-    }
-
-    /**
-     * Remove the specified client from storage.
-     */
-    public function destroy(Client $client)
-    {
-
-    }
-} 
\ No newline at end of file
diff --git a/app/Http/Controllers/Crud/Member/MemberMeetingController.php b/app/Http/Controllers/Crud/Member/MemberMeetingController.php
new file mode 100644
index 0000000..d4ee86c
--- /dev/null
+++ b/app/Http/Controllers/Crud/Member/MemberMeetingController.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Http\Controllers\Crud\Member;
+
+use App\Http\Controllers\Controller;
+use App\Models\Meeting;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class MemberMeetingController extends Controller
+{
+    public function index(Request $request)
+    {
+        $meetings = Meeting::where('client_id', auth()->user()->client_id)
+            ->with(['users', 'tasks'])
+            ->when($request->input('view') === 'upcoming', function ($query) {
+                return $query->where('date', '>=', now());
+            })
+            ->orderBy('date', 'desc')
+            ->get();
+
+        return Inertia::render('member/member-meeting-list', [
+            'meetings' => $meetings,
+            'users' => auth()->user()->client->users,
+            'tasks' => auth()->user()->client->tasks,
+        ]);
+    }
+
+    public function show(Meeting $meeting)
+    {
+        $meeting->load(['users', 'tasks']);
+        
+        return Inertia::render('member/member-meeting-details', [
+            'meeting' => $meeting,
+            'users' => auth()->user()->client->users,
+            'tasks' => auth()->user()->client->tasks,
+        ]);
+    }
+} 
\ No newline at end of file
diff --git a/app/Http/Controllers/Crud/Member/MemberTaskController.php b/app/Http/Controllers/Crud/Member/MemberTaskController.php
new file mode 100644
index 0000000..d678d30
--- /dev/null
+++ b/app/Http/Controllers/Crud/Member/MemberTaskController.php
@@ -0,0 +1,125 @@
+<?php 
+
+namespace App\Http\Controllers\Crud\Member;
+
+use App\Http\Controllers\Controller;
+use App\Models\Task;
+use App\Models\User;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use App\Services\TimelineMessageService;
+
+class MemberTaskController extends Controller
+{
+    public function index(Request $request)
+    {
+        $userId = auth()->id();
+        $clientId = auth()->user()->client->id;
+
+        // Base query for tasks
+        $query = Task::where('client_id', $clientId)
+            ->with(['users' => function ($query) use ($clientId) {
+                $query->where('users.client_id', $clientId)
+                    ->select('users.id', 'users.fname', 'users.mname', 'users.lname', 'users.email');
+            }]);
+
+        // If view is 'assigned', only show tasks assigned to the user
+        if ($request->query('view') !== 'all') {
+            $query->whereHas('users', function ($query) use ($userId) {
+                $query->where('users.id', $userId);
+            });
+        }
+
+        $tasks = $query->get();
+
+        $users = User::where('client_id', $clientId)
+            ->select('id', 'fname', 'mname', 'lname', 'email')
+            ->get();
+
+        return Inertia::render('member/member-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',
+            'meeting_id' => 'nullable|exists:meetings,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()->sync($request->users);
+        }
+
+        if ($request->has('meeting_id')) {
+            $task->meetings()->sync([$request->meeting_id]);
+        }
+
+        $timelineMessageService = new TimelineMessageService();
+        $timelineMessageService->taskCreated(auth()->user(), $task->name, 'Task', $task->id);
+
+        session()->flash('success', 'Task created successfully!');
+        return back();
+    }
+
+    public function show(Task $task)
+    {
+        // Ensure the task belongs to the user's client and the user is assigned to it
+        if ($task->client_id !== auth()->user()->client->id || 
+            !$task->users()->where('users.id', auth()->id())->exists()) {
+            abort(403, 'Unauthorized');
+        }
+
+        return Inertia::render('member/member-task-details', [
+            'task' => $task->load(['users' => function ($query) {
+                $query->where('users.client_id', auth()->user()->client->id)
+                    ->select('users.id', 'users.fname', 'users.mname', 'users.lname', 'users.email');
+            }])
+        ]);
+    }
+
+    public function update(Request $request, Task $task)
+    {
+        // Ensure the task belongs to the user's client and the user is assigned to it
+        if ($task->client_id !== auth()->user()->client->id || 
+            !$task->users()->where('users.id', auth()->id())->exists()) {
+            abort(403, 'Unauthorized');
+        }
+
+        $validatedData = $request->validate([
+            'name' => 'sometimes|required|string|max:255',
+            'description' => 'sometimes|required|string|max:255',
+            'status' => 'sometimes|required|in:pending,in_progress,completed',
+            'priority' => 'sometimes|required|in:low,medium,high',
+            'due_date' => 'sometimes|nullable|date',
+            'users' => 'sometimes|array',
+            'users.*' => 'exists:users,id'
+        ]);
+
+        $originalValues = $task->getOriginal();
+        $task->update($validatedData);
+
+        $timelineMessageService = new TimelineMessageService();
+        $timelineMessageService->taskUpdated(auth()->user(), $task->name, 'Task', $task->id, $originalValues, $validatedData);
+
+        session()->flash('success', 'Task updated successfully!');
+        return back();
+    }
+} 
\ No newline at end of file
diff --git a/app/Http/Controllers/Member/MemberDashboardController.php b/app/Http/Controllers/Member/MemberDashboardController.php
new file mode 100644
index 0000000..efbb598
--- /dev/null
+++ b/app/Http/Controllers/Member/MemberDashboardController.php
@@ -0,0 +1,75 @@
+<?php
+
+namespace App\Http\Controllers\Member;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Models\User;
+use App\Models\Task;
+use App\Models\Meeting;
+use Carbon\Carbon;
+use Inertia\Inertia;
+use App\Models\Timeline;
+
+class MemberDashboardController extends Controller
+{
+    public function index()
+    {
+        $userId = auth()->id();
+        $clientId = auth()->user()->client->id;
+
+        // Get tasks assigned to the user
+        $tasks = Task::where('client_id', $clientId)
+            ->whereHas('users', function ($query) use ($userId) {
+                $query->where('users.id', $userId);
+            })
+            ->with(['users' => function ($query) use ($clientId) {
+                $query->where('users.client_id', $clientId)
+                    ->select('users.id', 'users.fname', 'users.mname', 'users.lname', 'users.email');
+            }])
+            ->get();
+
+        // Get task completion statistics
+        $taskStats = [
+            'total' => $tasks->count(),
+            'completed' => $tasks->where('status', 'completed')->count(),
+            'in_progress' => $tasks->where('status', 'in_progress')->count(),
+            'pending' => $tasks->where('status', 'pending')->count(),
+        ];
+
+        // Get upcoming tasks for this member
+        $upcomingTasks = $tasks->filter(function ($task) {
+            return $task->due_date && 
+                   Carbon::parse($task->due_date)->isBetween(
+                       now(), 
+                       now()->addDays(7)
+                   );
+        })->values();
+
+        // Get meetings this member is invited to
+        $meetings = Meeting::where('client_id', $clientId)
+            ->whereHas('users', function ($query) use ($userId) {
+                $query->where('users.id', $userId);
+            })
+            ->with(['users' => function ($query) use ($clientId) {
+                $query->where('users.client_id', $clientId)
+                    ->select('users.id', 'users.fname', 'users.mname', 'users.lname', 'users.email');
+            }])
+            ->get();
+
+        // Get user's recent timeline activities
+        $recentActivities = Timeline::where('user_id', $userId)
+            ->with(['user:id,fname,mname,lname'])
+            ->latest()
+            ->take(10)
+            ->get();
+
+        return Inertia::render('member/member-dashboard', [
+            'taskStats' => $taskStats,
+            'upcomingTasks' => $upcomingTasks,
+            'meetings' => $meetings,
+            'tasks' => $tasks,
+            'recentActivities' => $recentActivities,
+        ]);
+    }
+} 
\ No newline at end of file
diff --git a/app/Http/Controllers/Settings/ProfileController.php b/app/Http/Controllers/Settings/ProfileController.php
index a6cb7e1..6fac33b 100644
--- a/app/Http/Controllers/Settings/ProfileController.php
+++ b/app/Http/Controllers/Settings/ProfileController.php
@@ -8,6 +8,7 @@
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Hash;
 use Inertia\Inertia;
 use Inertia\Response;
 
@@ -29,13 +30,27 @@ public function edit(Request $request): Response
      */
     public function update(ProfileUpdateRequest $request): RedirectResponse
     {
-        $request->user()->fill($request->validated());
+        $validated = $request->validated();
+        $user = $request->user();
+
+        // Update profile information
+        $user->fill([
+            'fname' => $validated['fname'],
+            'mname' => $validated['mname'],
+            'lname' => $validated['lname'],
+            'email' => $validated['email'],
+        ]);
+
+        if ($user->isDirty('email')) {
+            $user->email_verified_at = null;
+        }
 
-        if ($request->user()->isDirty('email')) {
-            $request->user()->email_verified_at = null;
+        // Update password if provided
+        if (isset($validated['password'])) {
+            $user->password = Hash::make($validated['password']);
         }
 
-        $request->user()->save();
+        $user->save();
 
         return to_route('profile.edit');
     }
diff --git a/app/Http/Middleware/CheckRole.php b/app/Http/Middleware/CheckRole.php
index 1b29ed9..7aaeb9b 100644
--- a/app/Http/Middleware/CheckRole.php
+++ b/app/Http/Middleware/CheckRole.php
@@ -2,28 +2,30 @@
 
 namespace App\Http\Middleware;
 
+use App\Policies\RolePolicy;
 use Closure;
 use Illuminate\Http\Request;
 use Symfony\Component\HttpFoundation\Response;
 
 class CheckRole 
 {
+    protected $rolePolicy;
+
+    public function __construct(RolePolicy $rolePolicy)
+    {
+        $this->rolePolicy = $rolePolicy;
+    }
+
     /**
      * Handle an incoming request.
      *
      * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
      */
-    public function handle(Request $request, Closure $next, $role): Response
+    public function handle(Request $request, Closure $next, string $role): Response
     {
         $user = $request->user();
 
-        // If not logged in or no role, deny
-        if (!$user || !$user->role) {
-            abort(403, 'Unauthorized');
-        }
-
-        // Check if user's role matches the required role
-        if ($user->role->name !== $role) {
+        if (!$user || !$this->rolePolicy->hasRole($user, $role)) {
             abort(403, 'Unauthorized');
         }
 
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index 3af9fd4..48a761e 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -44,7 +44,16 @@ public function share(Request $request): array
             'name' => config('app.name'),
             'quote' => ['message' => trim($message), 'author' => trim($author)],
             'auth' => [
-                'user' => $request->user(),
+                'user' => $request->user() ? [
+                    'id' => $request->user()->id,
+                    'fname' => $request->user()->fname,
+                    'mname' => $request->user()->mname,
+                    'lname' => $request->user()->lname,
+                    'full_name' => $request->user()->full_name,
+                    'email' => $request->user()->email,
+                    'avatar' => $request->user()->avatar,
+                    'role' => $request->user()->role,
+                ] : null,
             ],
             'ziggy' => fn (): array => [
                 ...(new Ziggy)->toArray(),
diff --git a/app/Http/Requests/Settings/ProfileUpdateRequest.php b/app/Http/Requests/Settings/ProfileUpdateRequest.php
index 64cf26b..2526b13 100644
--- a/app/Http/Requests/Settings/ProfileUpdateRequest.php
+++ b/app/Http/Requests/Settings/ProfileUpdateRequest.php
@@ -9,6 +9,11 @@
 
 class ProfileUpdateRequest extends FormRequest
 {
+    public function authorize(): bool
+    {
+        return true;
+    }
+
     /**
      * Get the validation rules that apply to the request.
      *
@@ -17,8 +22,9 @@ class ProfileUpdateRequest extends FormRequest
     public function rules(): array
     {
         return [
-            'name' => ['required', 'string', 'max:255'],
-
+            'fname' => ['required', 'string', 'max:255'],
+            'mname' => ['nullable', 'string', 'max:255'],
+            'lname' => ['required', 'string', 'max:255'],
             'email' => [
                 'required',
                 'string',
@@ -27,6 +33,9 @@ public function rules(): array
                 'max:255',
                 Rule::unique(User::class)->ignore($this->user()->id),
             ],
+            'current_password' => ['nullable', 'required_with:password', 'current_password'],
+            'password' => ['nullable', 'string', 'min:8', 'confirmed'],
+            'password_confirmation' => ['nullable', 'required_with:password', 'string'],
         ];
     }
 }
diff --git a/app/Listeners/UpdateTimelineTable.php b/app/Listeners/UpdateTimelineTable.php
new file mode 100644
index 0000000..ad58a19
--- /dev/null
+++ b/app/Listeners/UpdateTimelineTable.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Listeners;
+
+use App\Events\TimelineMessage;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Queue\InteractsWithQueue;
+use App\Models\Timeline;
+use Illuminate\Support\Facades\Log;
+
+class UpdateTimelineTable
+{
+
+    /**
+     * Create the event listener.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Handle the event.
+     */
+    public function handle(TimelineMessage $event): void
+    {
+        Log::info('UpdateTimelineTable listener handling event');
+        Timeline::create([
+            'user_id' => $event->user->id,
+            'subject_type' => $event->subject_type,
+            'subject_id' => $event->subject_id,
+            'origin_client_id' => $event->origin_client_id,
+            'message' => $event->message,
+        ]);
+    }
+} 
\ No newline at end of file
diff --git a/app/Models/Agenda.php b/app/Models/Agenda.php
index b09609b..efd0a3e 100644
--- a/app/Models/Agenda.php
+++ b/app/Models/Agenda.php
@@ -6,6 +6,7 @@
 use Illuminate\Database\Eloquent\SoftDeletes;
 use Illuminate\Database\Eloquent\Relations\HasOne;
 
+
 class Agenda extends Model
 {
     use SoftDeletes;
diff --git a/app/Models/Client.php b/app/Models/Client.php
index f57f856..b66e9fc 100644
--- a/app/Models/Client.php
+++ b/app/Models/Client.php
@@ -25,8 +25,8 @@ public function users(): HasMany
         return $this->hasMany(User::class);
     }
 
-    public function tasks(): BelongsToMany
+    public function tasks(): HasMany
     {
-        return $this->belongsToMany(Task::class);
+        return $this->hasMany(Task::class);
     }
 }
diff --git a/app/Models/Meeting.php b/app/Models/Meeting.php
index ef8d271..d92d1d3 100644
--- a/app/Models/Meeting.php
+++ b/app/Models/Meeting.php
@@ -32,11 +32,11 @@ public function client(): BelongsTo
 
     public function users(): BelongsToMany
     {
-        return $this->belongsToMany(User::class);
+        return $this->belongsToMany(User::class)->withTimestamps();
     }   
 
     public function tasks(): BelongsToMany
     {
-        return $this->belongsToMany(Task::class);
+        return $this->belongsToMany(Task::class)->withTimestamps();
     }
 }
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..ed18f3f 100644
--- a/app/Models/Task.php
+++ b/app/Models/Task.php
@@ -3,6 +3,10 @@
 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;
+use Illuminate\Database\Eloquent\Relations\MorphMany;
 
 class Task extends Model
 {
@@ -14,20 +18,26 @@ 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)->withTimestamps();
     }
 
-    public function clients()
+    public function meetings(): BelongsToMany
     {
-        return $this->belongsToMany(Client::class);
+        return $this->belongsToMany(Meeting::class)->withTimestamps();
+    }
+
+    public function timelines(): MorphMany
+    {
+        return $this->morphMany(Timeline::class, 'subject');
     }
 }
diff --git a/app/Models/Timeline.php b/app/Models/Timeline.php
new file mode 100644
index 0000000..f54db66
--- /dev/null
+++ b/app/Models/Timeline.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\MorphTo;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class Timeline extends Model
+{
+    use SoftDeletes;
+
+    protected $fillable = ['user_id', 'subject_type', 'subject_id', 'origin_client_id', 'message'];
+
+    public function subject(): MorphTo
+    {
+        return $this->morphTo();
+    }
+
+    public function user(): BelongsTo
+    {
+        return $this->belongsTo(User::class);
+    }
+
+    public function client(): BelongsTo
+    {
+        return $this->belongsTo(Client::class, 'origin_client_id');
+    }
+}
diff --git a/app/Models/User.php b/app/Models/User.php
index 3727e95..b8cc5eb 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -8,11 +8,14 @@
 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;
+
+    protected $with = ['role'];
 
     /**
      * The attributes that are mass assignable.
@@ -20,7 +23,9 @@ class User extends Authenticatable
      * @var list<string>
      */
     protected $fillable = [
-        'name',
+        'fname',
+        'mname',
+        'lname',
         'email',
         'password',
         'client_id',
@@ -50,14 +55,22 @@ protected function casts(): array
         ];
     }
 
+    /**
+     * Get the user's full name.
+     */
+    public function getFullNameAttribute(): string
+    {
+        return trim(implode(' ', array_filter([$this->fname, $this->mname, $this->lname])));
+    }
+
     public function meetings(): BelongsToMany
     {
-        return $this->belongsToMany(Meeting::class);
+        return $this->belongsToMany(Meeting::class)->withTimestamps();
     }
 
     public function tasks(): BelongsToMany
     {
-        return $this->belongsToMany(Task::class);
+        return $this->belongsToMany(Task::class)->withTimestamps();
     }
 
     public function client(): BelongsTo
@@ -69,4 +82,5 @@ public function role(): BelongsTo
     {
         return $this->belongsTo(Role::class);
     }
+
 }
diff --git a/app/Policies/RolePolicy.php b/app/Policies/RolePolicy.php
new file mode 100644
index 0000000..c1b9f26
--- /dev/null
+++ b/app/Policies/RolePolicy.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Policies;
+
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class RolePolicy
+{
+    use HandlesAuthorization;
+
+    /**
+     * Determine if the user has the specified role.
+     */
+    public function hasRole(User $user, string $role): bool
+    {
+        return $user->role && $user->role->name === $role;
+    }
+
+    /**
+     * Determine if the user is an admin.
+     */
+    public function isAdmin(User $user): bool
+    {
+        return $this->hasRole($user, 'Client-Admin');
+    }
+
+    /**
+     * Determine if the user is a member.
+     */
+    public function isMember(User $user): bool
+    {
+        return $this->hasRole($user, 'Member');
+    }
+} 
\ No newline at end of file
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/app/Services/TimelineMessageService.php b/app/Services/TimelineMessageService.php
new file mode 100644
index 0000000..788ce9c
--- /dev/null
+++ b/app/Services/TimelineMessageService.php
@@ -0,0 +1,67 @@
+<?php
+
+namespace App\Services;
+
+use App\Events\TimelineMessage;
+use Illuminate\Support\Facades\Log;
+
+class TimelineMessageService
+{
+    public function taskCreated($user, string $message, string $subjectType, int $subjectId): void
+    {   
+        $message = "Task created by " . $user->fname . " " . $user->lname;
+        Log::info('through service');
+        event(new TimelineMessage($user, $message, $subjectType, $subjectId));
+    }
+
+    public function taskUpdated($user, string $message, string $subjectType, int $subjectId, $originalValues, $request): void
+    {
+        // Get the changed fields
+        $changedFields = [];
+        foreach ($request as $field => $value) {
+            if (isset($originalValues[$field]) && $originalValues[$field] !== $value) {
+                $changedFields[$field] = $value;
+            }
+        }
+
+        $message = "Task updated by " . $user->fname . " " . $user->lname;
+        if (!empty($changedFields)) {
+            $fieldMessages = [];
+            foreach ($changedFields as $field => $value) {
+                switch ($field) {
+                    case 'name':
+                        $fieldMessages[] = "the name to `{$value}`";
+                        break;
+                    case 'description':
+                        $fieldMessages[] = "the description to `{$value}`";
+                        break;
+                    case 'status':
+                        if ($value == 'in_progress') {$value = 'in progress';}
+                        $fieldMessages[] = "the status to `{$value}`";
+                        break;
+                    case 'priority':
+                        $fieldMessages[] = "the priority to `{$value}`";
+                        break;
+                    case 'due_date':
+                        $fieldMessages[] = "the due date to `{$value}`";
+                        break;
+                    case 'users':
+                        $fieldMessages[] = "the users assigned`";
+                        break;
+                        
+                        
+                }
+            }
+
+            if (!empty($fieldMessages)) {
+                $lastField = array_pop($fieldMessages);
+                $message .= count($fieldMessages) > 0 
+                    ? " by changing " . implode(', ', $fieldMessages) . " and " . $lastField
+                    : " by changing " . $lastField;
+            }
+        }
+
+        Log::info('through service');
+        event(new TimelineMessage($user, $message, $subjectType, $subjectId));
+    }
+} 
\ No newline at end of file
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_29_064129_create_agendas_table.php b/database/migrations/2025_04_29_064129_create_agendas_table.php
index aedeefc..1d40a60 100644
--- a/database/migrations/2025_04_29_064129_create_agendas_table.php
+++ b/database/migrations/2025_04_29_064129_create_agendas_table.php
@@ -14,7 +14,7 @@ public function up(): void
     {
         Schema::create('agendas', function (Blueprint $table) {
             $table->id();
-            $table->string('text');
+            $table->text('text');
             $table->softDeletes();
             $table->timestamps();
         });
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/migrations/2025_05_30_163314_create_timelines_table.php b/database/migrations/2025_05_30_163314_create_timelines_table.php
new file mode 100644
index 0000000..10a8cbb
--- /dev/null
+++ b/database/migrations/2025_05_30_163314_create_timelines_table.php
@@ -0,0 +1,41 @@
+<?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
+{
+    use SoftDeletes;
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('timelines', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('user_id')->constrained()->onDelete('cascade');
+            // Using short class name for polymorphic relationship (e.g., 'Task', 'Project', etc.)
+            $table->string('subject_type');
+            $table->unsignedBigInteger('subject_id'); 
+            $table->foreignId('origin_client_id')->constrained('clients')->onDelete('cascade');
+            $table->text('message');
+            $table->softDeletes();
+            $table->timestamps();
+
+            // Add indexes for better performance
+            $table->index(['subject_type', 'subject_id']);
+            $table->index('origin_client_id');
+            $table->index('created_at');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('timelines');
+    }
+};
diff --git a/database/migrations/2025_06_13_204535_split_user_name_into_parts.php b/database/migrations/2025_06_13_204535_split_user_name_into_parts.php
new file mode 100644
index 0000000..0fddcd2
--- /dev/null
+++ b/database/migrations/2025_06_13_204535_split_user_name_into_parts.php
@@ -0,0 +1,74 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Support\Facades\DB;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->string('fname')->after('id');
+            $table->string('mname')->nullable()->after('fname');
+            $table->string('lname')->after('mname');
+        });
+
+        // Migrate existing data
+        DB::table('users')->orderBy('id')->chunk(100, function ($users) {
+            foreach ($users as $user) {
+                $nameParts = explode(' ', $user->name);
+                $fname = $nameParts[0] ?? '';
+                $mname = $nameParts[1] ?? null;
+                $lname = $nameParts[2] ?? '';
+
+                // If there are more than 3 parts, add the rest to the last name
+                if (count($nameParts) > 3) {
+                    $lname = implode(' ', array_slice($nameParts, 2));
+                }
+
+                DB::table('users')
+                    ->where('id', $user->id)
+                    ->update([
+                        'fname' => $fname,
+                        'mname' => $mname,
+                        'lname' => $lname,
+                    ]);
+            }
+        });
+
+        // Drop the old name column after data migration
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('name');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->string('name')->after('id');
+        });
+
+        // Migrate data back
+        DB::table('users')->orderBy('id')->chunk(100, function ($users) {
+            foreach ($users as $user) {
+                $name = trim(implode(' ', array_filter([$user->fname, $user->mname, $user->lname])));
+
+                DB::table('users')
+                    ->where('id', $user->id)
+                    ->update(['name' => $name]);
+            }
+        });
+
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn(['fname', 'mname', 'lname']);
+        });
+    }
+};
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/SystemAdminSeeder.php b/database/seeders/SystemAdminSeeder.php
index 9427307..ee60607 100644
--- a/database/seeders/SystemAdminSeeder.php
+++ b/database/seeders/SystemAdminSeeder.php
@@ -15,7 +15,8 @@ public function run()
 
         $adminUsers = [
             [
-                'name' => 'System Admin',
+                'fname' => 'System',
+                'lname' => 'Admin',
                 'email' => 'systemadmin@lockedinc.com',
                 'role' => 'System-Admin',
             ],
@@ -23,7 +24,8 @@ public function run()
 
         foreach ($adminUsers as $admin) {
             $userId = DB::table('users')->insertGetId([
-                'name' => $admin['name'],
+                'fname' => $admin['fname'],
+                'lname' => $admin['lname'],
                 'email' => $admin['email'],
                 'role_id' => 1,
                 'password' => Hash::make('password'), 
diff --git a/database/seeders/TaskSeeder.php b/database/seeders/TaskSeeder.php
new file mode 100644
index 0000000..ab73c46
--- /dev/null
+++ b/database/seeders/TaskSeeder.php
@@ -0,0 +1,114 @@
+<?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,
+            ],
+            [
+                'name' => 'Implement the new test',
+                'description' => 'Build the new test',
+                'status' => 'in_progress',
+                'priority' => 'high',
+                'due_date' => now()->addDays(5),
+                'client_id' => 1,
+            ],
+            [
+                'name' => 'Implement New Object Detection Model',
+                'description' => 'Build object detection model with YOLOv5',
+                'status' => 'in_progress',
+                'priority' => 'high',
+                'due_date' => now()->addDays(5),
+                'client_id' => 1,
+            ], 
+            [
+                'name' => 'Start New Project',
+                'description' => 'Start new project with Laravel and React',
+                'status' => 'in_progress',
+                'priority' => 'high',
+                'due_date' => now()->addDays(5),
+                'client_id' => 1,
+            ], 
+            [
+                'name' => 'Diagnose and Fix Issue',
+                'description' => 'Diagnose and fix issue with Laravel and React',
+                'status' => 'in_progress',
+                'priority' => 'high',
+                'due_date' => now()->addDays(5),
+                'client_id' => 1,
+            ],
+
+            [
+                'name' => 'Transfer Data to New Database',
+                'description' => 'Transfer data to new database',
+                'status' => 'in_progress',
+                'priority' => 'high',
+                'due_date' => now()->addDays(5),
+                '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..626630e 100644
--- a/database/seeders/UserSeeder.php
+++ b/database/seeders/UserSeeder.php
@@ -12,28 +12,143 @@ 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 = [
+            [
+                'fname' => 'Ryan',
+                'mname' => 'Philip',
+                'lname' => 'Mueller',
+                'email' => 'ryan@equippers.com',
+                'role_id' => 2, // Client-Admin
+            ],
+            [
+                'fname' => 'Andrew',
+                'lname' => 'McDowell',
+                'email' => 'andrew@equippers.com',
+                'role_id' => 3, // Member
+            ],
+            [
+                'fname' => 'Allison',
+                'mname' => 'Joyce',
+                'lname' => 'Port',
+                'email' => 'allison@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'fname' => 'George',
+                'lname' => 'Kalafatis',
+                'email' => 'george@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'fname' => 'John',
+                'lname' => 'Doe',
+                'email' => 'john@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'fname' => 'Sarah',
+                'lname' => 'Johnson',
+                'email' => 'sarah@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'fname' => 'Michael',
+                'lname' => 'Chen',
+                'email' => 'michael@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'fname' => 'Emma',
+                'lname' => 'Wilson',
+                'email' => 'emma@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'fname' => 'David',
+                'lname' => 'Brown',
+                'email' => 'david@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'fname' => 'Lisa',
+                'lname' => 'Anderson',
+                'email' => 'lisa@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'fname' => 'James',
+                'lname' => 'Taylor',
+                'email' => 'james@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'fname' => 'Rachel',
+                'lname' => 'Martinez',
+                'email' => 'rachel@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'fname' => 'Thomas',
+                'lname' => 'White',
+                'email' => 'thomas@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'fname' => 'Olivia',
+                'lname' => 'Lee',
+                'email' => 'olivia@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'fname' => 'Daniel',
+                'lname' => 'Kim',
+                'email' => 'daniel@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'fname' => 'Sophia',
+                'lname' => 'Garcia',
+                'email' => 'sophia@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'fname' => 'William',
+                'lname' => 'Clark',
+                'email' => 'william@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'fname' => 'Ava',
+                'lname' => 'Rodriguez',
+                'email' => 'ava@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'fname' => 'Ethan',
+                'lname' => 'Moore',
+                'email' => 'ethan@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'fname' => 'Isabella',
+                'lname' => '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([
+                'fname' => $userData['fname'],
+                'mname' => $userData['mname'] ?? null,
+                'lname' => $userData['lname'],
+                '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..08d7203 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,13 +7,16 @@
             "dependencies": {
                 "@headlessui/react": "^2.2.0",
                 "@inertiajs/react": "^2.0.0",
+                "@nivo/pie": "^0.99.0",
                 "@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,12 +30,15 @@
                 "@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",
                 "react": "^19.0.0",
                 "react-dom": "^19.0.0",
+                "recharts": "^2.15.3",
                 "sonner": "^2.0.3",
                 "tailwind-merge": "^3.0.1",
                 "tailwindcss": "^4.0.0",
@@ -281,6 +287,15 @@
                 "@babel/core": "^7.0.0-0"
             }
         },
+        "node_modules/@babel/runtime": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.1.tgz",
+            "integrity": "sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
         "node_modules/@babel/template": {
             "version": "7.26.9",
             "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.26.9.tgz",
@@ -1086,6 +1101,150 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "node_modules/@nivo/arcs": {
+            "version": "0.99.0",
+            "resolved": "https://registry.npmjs.org/@nivo/arcs/-/arcs-0.99.0.tgz",
+            "integrity": "sha512-UcvWLQPl+A3APk2Gm74N5xDfT+ATnVs2XkP73WxhYPWJk+dBzF00cndA5g/dptOwdFBvvo62VgcCsNiwUsjKTw==",
+            "license": "MIT",
+            "dependencies": {
+                "@nivo/colors": "0.99.0",
+                "@nivo/core": "0.99.0",
+                "@nivo/text": "0.99.0",
+                "@nivo/theming": "0.99.0",
+                "@react-spring/core": "9.4.5 || ^9.7.2 || ^10.0",
+                "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0",
+                "@types/d3-shape": "^3.1.6",
+                "d3-shape": "^3.2.0"
+            },
+            "peerDependencies": {
+                "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+            }
+        },
+        "node_modules/@nivo/colors": {
+            "version": "0.99.0",
+            "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.99.0.tgz",
+            "integrity": "sha512-hyYt4lEFIfXOUmQ6k3HXm3KwhcgoJpocmoGzLUqzk7DzuhQYJo+4d5jIGGU0N/a70+9XbHIdpKNSblHAIASD3w==",
+            "license": "MIT",
+            "dependencies": {
+                "@nivo/core": "0.99.0",
+                "@nivo/theming": "0.99.0",
+                "@types/d3-color": "^3.0.0",
+                "@types/d3-scale": "^4.0.8",
+                "@types/d3-scale-chromatic": "^3.0.0",
+                "d3-color": "^3.1.0",
+                "d3-scale": "^4.0.2",
+                "d3-scale-chromatic": "^3.0.0",
+                "lodash": "^4.17.21"
+            },
+            "peerDependencies": {
+                "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+            }
+        },
+        "node_modules/@nivo/core": {
+            "version": "0.99.0",
+            "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.99.0.tgz",
+            "integrity": "sha512-olCItqhPG3xHL5ei+vg52aB6o+6S+xR2idpkd9RormTTUniZb8U2rOdcQojOojPY5i9kVeQyLFBpV4YfM7OZ9g==",
+            "license": "MIT",
+            "dependencies": {
+                "@nivo/theming": "0.99.0",
+                "@nivo/tooltip": "0.99.0",
+                "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0",
+                "@types/d3-shape": "^3.1.6",
+                "d3-color": "^3.1.0",
+                "d3-format": "^1.4.4",
+                "d3-interpolate": "^3.0.1",
+                "d3-scale": "^4.0.2",
+                "d3-scale-chromatic": "^3.0.0",
+                "d3-shape": "^3.2.0",
+                "d3-time-format": "^3.0.0",
+                "lodash": "^4.17.21",
+                "react-virtualized-auto-sizer": "^1.0.26",
+                "use-debounce": "^10.0.4"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/nivo/donate"
+            },
+            "peerDependencies": {
+                "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+            }
+        },
+        "node_modules/@nivo/legends": {
+            "version": "0.99.0",
+            "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.99.0.tgz",
+            "integrity": "sha512-P16FjFqNceuTTZphINAh5p0RF0opu3cCKoWppe2aRD9IuVkvRm/wS5K1YwMCxDzKyKh5v0AuTlu9K6o3/hk8hA==",
+            "license": "MIT",
+            "dependencies": {
+                "@nivo/colors": "0.99.0",
+                "@nivo/core": "0.99.0",
+                "@nivo/text": "0.99.0",
+                "@nivo/theming": "0.99.0",
+                "@types/d3-scale": "^4.0.8",
+                "d3-scale": "^4.0.2"
+            },
+            "peerDependencies": {
+                "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+            }
+        },
+        "node_modules/@nivo/pie": {
+            "version": "0.99.0",
+            "resolved": "https://registry.npmjs.org/@nivo/pie/-/pie-0.99.0.tgz",
+            "integrity": "sha512-zUbo8UdLndp2RMljrOqitAKKEnl7YypkJrOzjKLk8jQGU7qqUKtgFoJIPhiBsvNPs3xtX2KwgtS1+JKNTNns7A==",
+            "license": "MIT",
+            "dependencies": {
+                "@nivo/arcs": "0.99.0",
+                "@nivo/colors": "0.99.0",
+                "@nivo/core": "0.99.0",
+                "@nivo/legends": "0.99.0",
+                "@nivo/theming": "0.99.0",
+                "@nivo/tooltip": "0.99.0",
+                "@types/d3-shape": "^3.1.6",
+                "d3-shape": "^3.2.0"
+            },
+            "peerDependencies": {
+                "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+            }
+        },
+        "node_modules/@nivo/text": {
+            "version": "0.99.0",
+            "resolved": "https://registry.npmjs.org/@nivo/text/-/text-0.99.0.tgz",
+            "integrity": "sha512-ho3oZpAZApsJNjsIL5WJSAdg/wjzTBcwo1KiHBlRGUmD+yUWO8qp7V+mnYRhJchwygtRVALlPgZ/rlcW2Xr/MQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@nivo/core": "0.99.0",
+                "@nivo/theming": "0.99.0",
+                "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0"
+            },
+            "peerDependencies": {
+                "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+            }
+        },
+        "node_modules/@nivo/theming": {
+            "version": "0.99.0",
+            "resolved": "https://registry.npmjs.org/@nivo/theming/-/theming-0.99.0.tgz",
+            "integrity": "sha512-KvXlf0nqBzh/g2hAIV9bzscYvpq1uuO3TnFN3RDXGI72CrbbZFTGzprPju3sy/myVsauv+Bb+V4f5TZ0jkYKRg==",
+            "license": "MIT",
+            "dependencies": {
+                "lodash": "^4.17.21"
+            },
+            "peerDependencies": {
+                "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+            }
+        },
+        "node_modules/@nivo/tooltip": {
+            "version": "0.99.0",
+            "resolved": "https://registry.npmjs.org/@nivo/tooltip/-/tooltip-0.99.0.tgz",
+            "integrity": "sha512-weoEGR3xAetV4k2P6k96cdamGzKQ5F2Pq+uyDaHr1P3HYArM879Pl+x+TkU0aWjP6wgUZPx/GOBiV1Hb1JxIqg==",
+            "license": "MIT",
+            "dependencies": {
+                "@nivo/core": "0.99.0",
+                "@nivo/theming": "0.99.0",
+                "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0"
+            },
+            "peerDependencies": {
+                "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+            }
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1302,23 +1461,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,10 +1496,16 @@
                 }
             }
         },
-        "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",
-            "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+        "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": "*",
@@ -1352,46 +1517,32 @@
                 }
             }
         },
-        "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-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",
-            "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"
+                "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-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-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.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/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": "*",
@@ -1408,10 +1559,10 @@
                 }
             }
         },
-        "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-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": "*",
@@ -1423,15 +1574,15 @@
                 }
             }
         },
-        "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-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.1",
-                "@radix-ui/react-primitive": "2.0.2",
-                "@radix-ui/react-use-callback-ref": "1.1.0"
+                "@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": "*",
@@ -1448,13 +1599,13 @@
                 }
             }
         },
-        "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-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.0"
+                "@radix-ui/react-use-layout-effect": "1.1.1"
             },
             "peerDependencies": {
                 "@types/react": "*",
@@ -1466,13 +1617,14 @@
                 }
             }
         },
-        "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-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.0.2"
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
             },
             "peerDependencies": {
                 "@types/react": "*",
@@ -1489,30 +1641,14 @@
                 }
             }
         },
-        "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-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/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/react-compose-refs": "1.1.2",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
             },
             "peerDependencies": {
                 "@types/react": "*",
@@ -1529,26 +1665,13 @@
                 }
             }
         },
-        "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-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/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-slot": "1.2.3"
             },
             "peerDependencies": {
                 "@types/react": "*",
@@ -1565,130 +1688,949 @@
                 }
             }
         },
-        "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",
-            "integrity": "sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==",
+        "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": {
-                "@floating-ui/react-dom": "^2.0.0",
-                "@radix-ui/react-arrow": "1.1.2",
-                "@radix-ui/react-compose-refs": "1.1.1",
-                "@radix-ui/react-context": "1.1.1",
-                "@radix-ui/react-primitive": "2.0.2",
-                "@radix-ui/react-use-callback-ref": "1.1.0",
-                "@radix-ui/react-use-layout-effect": "1.1.0",
-                "@radix-ui/react-use-rect": "1.1.0",
-                "@radix-ui/react-use-size": "1.1.0",
-                "@radix-ui/rect": "1.1.0"
+                "@radix-ui/react-compose-refs": "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"
+                "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-portal": {
-            "version": "1.1.4",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.4.tgz",
-            "integrity": "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==",
+        "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",
-            "dependencies": {
-                "@radix-ui/react-primitive": "2.0.2",
-                "@radix-ui/react-use-layout-effect": "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-presence": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz",
-            "integrity": "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==",
+        "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-compose-refs": "1.1.1",
-                "@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": "*",
-                "@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-primitive": {
-            "version": "2.0.2",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
-            "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
+        "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-slot": "1.1.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": {
-                    "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",
-            "integrity": "sha512-zgMQWkNO169GtGqRvYrzb0Zf8NhMHS2DuEB/TiEmVnpr5OqPU3i8lfbxaAmC2J/KYuIQxyoQQ6DxepyXp61/xw==",
+        "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",
-            "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-id": "1.1.0",
-                "@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"
-            },
             "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
+                }
+            }
+        },
+        "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",
+            "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+            "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-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/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-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/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-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"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "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",
+            "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-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-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-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-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-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/rect": "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-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/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/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",
+            "integrity": "sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==",
+            "license": "MIT",
+            "dependencies": {
+                "@floating-ui/react-dom": "^2.0.0",
+                "@radix-ui/react-arrow": "1.1.2",
+                "@radix-ui/react-compose-refs": "1.1.1",
+                "@radix-ui/react-context": "1.1.1",
+                "@radix-ui/react-primitive": "2.0.2",
+                "@radix-ui/react-use-callback-ref": "1.1.0",
+                "@radix-ui/react-use-layout-effect": "1.1.0",
+                "@radix-ui/react-use-rect": "1.1.0",
+                "@radix-ui/react-use-size": "1.1.0",
+                "@radix-ui/rect": "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-portal": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.4.tgz",
+            "integrity": "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-primitive": "2.0.2",
+                "@radix-ui/react-use-layout-effect": "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-presence": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz",
+            "integrity": "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.1",
+                "@radix-ui/react-use-layout-effect": "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-primitive": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+            "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-slot": "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-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",
+            "integrity": "sha512-zgMQWkNO169GtGqRvYrzb0Zf8NhMHS2DuEB/TiEmVnpr5OqPU3i8lfbxaAmC2J/KYuIQxyoQQ6DxepyXp61/xw==",
+            "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-id": "1.1.0",
+                "@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"
+            },
+            "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": {
@@ -1886,14 +2828,47 @@
                 }
             }
         },
-        "node_modules/@radix-ui/react-use-controllable-state": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
-            "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+        "node_modules/@radix-ui/react-use-controllable-state": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+            "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-callback-ref": "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-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",
-            "dependencies": {
-                "@radix-ui/react-use-callback-ref": "1.1.0"
-            },
             "peerDependencies": {
                 "@types/react": "*",
                 "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
@@ -2082,6 +3057,78 @@
                 "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
             }
         },
+        "node_modules/@react-spring/animated": {
+            "version": "10.0.1",
+            "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-10.0.1.tgz",
+            "integrity": "sha512-BGL3hA66Y8Qm3KmRZUlfG/mFbDPYajgil2/jOP0VXf2+o2WPVmcDps/eEgdDqgf5Pv9eBbyj7LschLMuSjlW3Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@react-spring/shared": "~10.0.1",
+                "@react-spring/types": "~10.0.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
+        "node_modules/@react-spring/core": {
+            "version": "10.0.1",
+            "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-10.0.1.tgz",
+            "integrity": "sha512-KaMMsN1qHuVTsFpg/5ajAVye7OEqhYbCq0g4aKM9bnSZlDBBYpO7Uf+9eixyXN8YEbF+YXaYj9eoWDs+npZ+sA==",
+            "license": "MIT",
+            "dependencies": {
+                "@react-spring/animated": "~10.0.1",
+                "@react-spring/shared": "~10.0.1",
+                "@react-spring/types": "~10.0.1"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/react-spring/donate"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
+        "node_modules/@react-spring/rafz": {
+            "version": "10.0.1",
+            "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-10.0.1.tgz",
+            "integrity": "sha512-UrzG/d6Is+9i0aCAjsjWRqIlFFiC4lFqFHrH63zK935z2YDU95TOFio4VKGISJ5SG0xq4ULy7c1V3KU+XvL+Yg==",
+            "license": "MIT"
+        },
+        "node_modules/@react-spring/shared": {
+            "version": "10.0.1",
+            "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-10.0.1.tgz",
+            "integrity": "sha512-KR2tmjDShPruI/GGPfAZOOLvDgkhFseabjvxzZFFggJMPkyICLjO0J6mCIoGtdJSuHywZyc4Mmlgi+C88lS00g==",
+            "license": "MIT",
+            "dependencies": {
+                "@react-spring/rafz": "~10.0.1",
+                "@react-spring/types": "~10.0.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
+        "node_modules/@react-spring/types": {
+            "version": "10.0.1",
+            "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-10.0.1.tgz",
+            "integrity": "sha512-Fk1wYVAKL+ZTYK+4YFDpHf3Slsy59pfFFvnnTfRjQQFGlyIo4VejPtDs3CbDiuBjM135YztRyZjIH2VbycB+ZQ==",
+            "license": "MIT"
+        },
+        "node_modules/@react-spring/web": {
+            "version": "10.0.1",
+            "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-10.0.1.tgz",
+            "integrity": "sha512-FgQk02OqFrYyJBTTnBTWAU0WPzkHkKXauc6aeexcvATvLapUxwnfGuLlsLYF8BYjEVfkivPT04ziAue6zyRBtQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@react-spring/animated": "~10.0.1",
+                "@react-spring/core": "~10.0.1",
+                "@react-spring/shared": "~10.0.1",
+                "@react-spring/types": "~10.0.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
         "node_modules/@react-stately/utils": {
             "version": "3.10.5",
             "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.5.tgz",
@@ -2684,6 +3731,75 @@
                 "@babel/types": "^7.20.7"
             }
         },
+        "node_modules/@types/d3-array": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+            "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-color": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+            "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-ease": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+            "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-interpolate": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+            "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-color": "*"
+            }
+        },
+        "node_modules/@types/d3-path": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+            "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-scale": {
+            "version": "4.0.9",
+            "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+            "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-time": "*"
+            }
+        },
+        "node_modules/@types/d3-scale-chromatic": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+            "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-shape": {
+            "version": "3.1.7",
+            "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+            "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-path": "*"
+            }
+        },
+        "node_modules/@types/d3-time": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+            "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-timer": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+            "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+            "license": "MIT"
+        },
         "node_modules/@types/estree": {
             "version": "1.0.6",
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -3429,6 +4545,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",
@@ -3518,6 +4650,158 @@
             "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
             "license": "MIT"
         },
+        "node_modules/d3-array": {
+            "version": "3.2.4",
+            "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+            "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+            "license": "ISC",
+            "dependencies": {
+                "internmap": "1 - 2"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-color": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+            "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-ease": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+            "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-format": {
+            "version": "1.4.5",
+            "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+            "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==",
+            "license": "BSD-3-Clause"
+        },
+        "node_modules/d3-interpolate": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+            "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-color": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-path": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+            "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-scale": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+            "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-array": "2.10.0 - 3",
+                "d3-format": "1 - 3",
+                "d3-interpolate": "1.2.0 - 3",
+                "d3-time": "2.1.1 - 3",
+                "d3-time-format": "2 - 4"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-scale-chromatic": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+            "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-color": "1 - 3",
+                "d3-interpolate": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-shape": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+            "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-path": "^3.1.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-time": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+            "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-array": "2 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-time-format": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+            "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "d3-time": "1 - 2"
+            }
+        },
+        "node_modules/d3-time-format/node_modules/d3-array": {
+            "version": "2.12.1",
+            "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+            "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "internmap": "^1.0.0"
+            }
+        },
+        "node_modules/d3-time-format/node_modules/d3-time": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+            "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "d3-array": "2"
+            }
+        },
+        "node_modules/d3-time-format/node_modules/internmap": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+            "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+            "license": "ISC"
+        },
+        "node_modules/d3-timer": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+            "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
         "node_modules/data-view-buffer": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -3572,6 +4856,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",
@@ -3589,6 +4883,12 @@
                 }
             }
         },
+        "node_modules/decimal.js-light": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+            "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+            "license": "MIT"
+        },
         "node_modules/deep-is": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -3681,6 +4981,16 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/dom-helpers": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+            "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.8.7",
+                "csstype": "^3.0.2"
+            }
+        },
         "node_modules/dunder-proto": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -4165,6 +5475,12 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/eventemitter3": {
+            "version": "4.0.7",
+            "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+            "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+            "license": "MIT"
+        },
         "node_modules/fast-deep-equal": {
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -4172,6 +5488,15 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/fast-equals": {
+            "version": "5.2.2",
+            "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz",
+            "integrity": "sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
         "node_modules/fast-glob": {
             "version": "3.3.3",
             "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
@@ -4686,6 +6011,15 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/internmap": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+            "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
         "node_modules/is-array-buffer": {
             "version": "3.0.5",
             "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -5505,7 +6839,6 @@
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
             "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "js-tokens": "^3.0.0 || ^4.0.0"
@@ -5640,7 +6973,6 @@
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
             "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=0.10.0"
@@ -6032,7 +7364,6 @@
             "version": "15.8.1",
             "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
             "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "loose-envify": "^1.4.0",
@@ -6117,7 +7448,6 @@
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
             "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/react-refresh": {
@@ -6176,6 +7506,21 @@
                 }
             }
         },
+        "node_modules/react-smooth": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+            "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
+            "license": "MIT",
+            "dependencies": {
+                "fast-equals": "^5.0.1",
+                "prop-types": "^15.8.1",
+                "react-transition-group": "^4.4.5"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
         "node_modules/react-style-singleton": {
             "version": "2.2.3",
             "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
@@ -6198,6 +7543,70 @@
                 }
             }
         },
+        "node_modules/react-transition-group": {
+            "version": "4.4.5",
+            "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+            "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "@babel/runtime": "^7.5.5",
+                "dom-helpers": "^5.0.1",
+                "loose-envify": "^1.4.0",
+                "prop-types": "^15.6.2"
+            },
+            "peerDependencies": {
+                "react": ">=16.6.0",
+                "react-dom": ">=16.6.0"
+            }
+        },
+        "node_modules/react-virtualized-auto-sizer": {
+            "version": "1.0.26",
+            "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.26.tgz",
+            "integrity": "sha512-CblNyiNVw2o+hsa5/49NH2ogGxZ+t+3aweRvNSq7TVjDIlwk7ir4lencEg5HxHeSzwNarSkNkiu0qJSOXtxm5A==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
+        "node_modules/recharts": {
+            "version": "2.15.3",
+            "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.3.tgz",
+            "integrity": "sha512-EdOPzTwcFSuqtvkDoaM5ws/Km1+WTAO2eizL7rqiG0V2UVhTnz0m7J2i0CjVPUCdEkZImaWvXLbZDS2H5t6GFQ==",
+            "license": "MIT",
+            "dependencies": {
+                "clsx": "^2.0.0",
+                "eventemitter3": "^4.0.1",
+                "lodash": "^4.17.21",
+                "react-is": "^18.3.1",
+                "react-smooth": "^4.0.4",
+                "recharts-scale": "^0.4.4",
+                "tiny-invariant": "^1.3.1",
+                "victory-vendor": "^36.6.8"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "peerDependencies": {
+                "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
+        "node_modules/recharts-scale": {
+            "version": "0.4.5",
+            "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+            "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+            "license": "MIT",
+            "dependencies": {
+                "decimal.js-light": "^2.4.1"
+            }
+        },
+        "node_modules/recharts/node_modules/react-is": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+            "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+            "license": "MIT"
+        },
         "node_modules/reflect.getprototypeof": {
             "version": "1.0.10",
             "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -6824,6 +8233,12 @@
                 "node": ">=6"
             }
         },
+        "node_modules/tiny-invariant": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+            "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+            "license": "MIT"
+        },
         "node_modules/to-regex-range": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -7079,6 +8494,18 @@
                 }
             }
         },
+        "node_modules/use-debounce": {
+            "version": "10.0.4",
+            "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.4.tgz",
+            "integrity": "sha512-6Cf7Yr7Wk7Kdv77nnJMf6de4HuDE4dTxKij+RqE9rufDsI6zsbjyAxcH5y2ueJCQAnfgKbzXbZHYlkFwmBlWkw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 16.0.0"
+            },
+            "peerDependencies": {
+                "react": "*"
+            }
+        },
         "node_modules/use-sidecar": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
@@ -7101,6 +8528,28 @@
                 }
             }
         },
+        "node_modules/victory-vendor": {
+            "version": "36.9.2",
+            "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+            "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+            "license": "MIT AND ISC",
+            "dependencies": {
+                "@types/d3-array": "^3.0.3",
+                "@types/d3-ease": "^3.0.0",
+                "@types/d3-interpolate": "^3.0.1",
+                "@types/d3-scale": "^4.0.2",
+                "@types/d3-shape": "^3.1.0",
+                "@types/d3-time": "^3.0.0",
+                "@types/d3-timer": "^3.0.0",
+                "d3-array": "^3.1.6",
+                "d3-ease": "^3.0.1",
+                "d3-interpolate": "^3.0.1",
+                "d3-scale": "^4.0.2",
+                "d3-shape": "^3.1.0",
+                "d3-time": "^3.0.0",
+                "d3-timer": "^3.0.1"
+            }
+        },
         "node_modules/vite": {
             "version": "6.2.0",
             "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.0.tgz",
diff --git a/package.json b/package.json
index 693fd0e..8f0fb8f 100644
--- a/package.json
+++ b/package.json
@@ -25,13 +25,16 @@
     "dependencies": {
         "@headlessui/react": "^2.2.0",
         "@inertiajs/react": "^2.0.0",
+        "@nivo/pie": "^0.99.0",
         "@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,12 +48,15 @@
         "@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",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "recharts": "^2.15.3",
         "sonner": "^2.0.3",
         "tailwind-merge": "^3.0.1",
         "tailwindcss": "^4.0.0",
diff --git a/resources/js/components/app-header.tsx b/resources/js/components/app-header.tsx
index 8edadcf..cd9a904 100644
--- a/resources/js/components/app-header.tsx
+++ b/resources/js/components/app-header.tsx
@@ -86,8 +86,8 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
                             <DropdownMenuTrigger asChild>
                                 <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                                     <Avatar className="h-8 w-8">
-                                        <AvatarImage src={page.props.auth.user.avatar || ''} alt={page.props.auth.user.name || ''} />
-                                        <AvatarFallback>{getInitials(page.props.auth.user.name || '')}</AvatarFallback>
+                                        <AvatarImage src={page.props.auth.user.avatar || ''} alt={page.props.auth.user.fname || '' + ' ' + page.props.auth.user.lname || ''} />
+                                        <AvatarFallback>{getInitials(page.props.auth.user.fname || '' + ' ' + page.props.auth.user.lname || '')}</AvatarFallback>
                                     </Avatar>
                                 </Button>
                             </DropdownMenuTrigger>
diff --git a/resources/js/components/app-sidebar.tsx b/resources/js/components/app-sidebar.tsx
index 05ba0e8..380a33a 100644
--- a/resources/js/components/app-sidebar.tsx
+++ b/resources/js/components/app-sidebar.tsx
@@ -1,37 +1,24 @@
 import { NavMain } from '@/components/nav-main';
 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 { type PageProps, type UserRole } from '@/types';
+import { Link, usePage } from '@inertiajs/react';
 import AppLogo from './app-logo';
-
-const mainNavItems: NavItem[] = [
-    {
-        title: 'Dashboard',
-        href: '/dashboard',
-        icon: LayoutGrid,
-    },
-    {
-        title: 'Tasks',
-        href: '/tasks',
-        icon: SquareCheckBig,
-    },
-    {
-        title: 'Users',
-        href: '/users',
-        icon: Users,
-    },
-];
+import { getNavigationItems } from '@/config/navigation';
 
 export function AppSidebar() {
+    const props = usePage().props as unknown as PageProps;
+    const userRole = props.auth.user.role?.name as UserRole | undefined;
+    const navItems = getNavigationItems(userRole);
+    const dashboardPath = userRole === 'Client-Admin' ? '/admin/dashboard' : '/member/dashboard';
+
     return (
         <Sidebar collapsible="icon" variant="inset">
             <SidebarHeader>
                 <SidebarMenu>
                     <SidebarMenuItem>
                         <SidebarMenuButton size="lg" asChild>
-                            <Link href="/dashboard" prefetch>
+                            <Link href={dashboardPath} prefetch>
                                 <AppLogo />
                             </Link>
                         </SidebarMenuButton>
@@ -40,7 +27,7 @@ export function AppSidebar() {
             </SidebarHeader>
 
             <SidebarContent>
-                <NavMain items={mainNavItems} />
+                <NavMain items={navItems} />
             </SidebarContent>
 
             <SidebarFooter>
diff --git a/resources/js/components/dashboard/admin-recent-activity.tsx b/resources/js/components/dashboard/admin-recent-activity.tsx
new file mode 100644
index 0000000..8e640c2
--- /dev/null
+++ b/resources/js/components/dashboard/admin-recent-activity.tsx
@@ -0,0 +1,66 @@
+import { Timeline } from '@/types/timeline';
+import { format } from 'date-fns';
+import { Clock } from 'lucide-react';
+import { router } from '@inertiajs/react';
+import { useRolePrefix } from '@/hooks/use-role-prefix';
+
+interface RecentActivityProps {
+    activities: Timeline[];
+}
+
+export function RecentActivity({ activities }: RecentActivityProps) {
+    const { getRoute } = useRolePrefix();
+
+    const handleActivityClick = (activity: Timeline) => {
+        switch (activity.subject_type) {
+            case 'Task':
+                router.visit(getRoute(`/tasks/${activity.subject_id}`));
+                break;
+            case 'Meeting':
+                router.visit(getRoute(`/meetings/${activity.subject_id}`));
+                break;
+            // Add more cases for other subject types as needed
+            default:
+                console.log('Unknown subject type:', activity.subject_type);
+        }
+    };
+
+    if (activities.length === 0) {
+        return (
+            <div className="text-muted-foreground text-sm">
+                No recent activity
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-3">
+            {activities.map((activity) => (
+                <div 
+                    key={activity.id} 
+                    onClick={() => handleActivityClick(activity)}
+                    className="group relative flex items-start gap-3 p-3 rounded-lg transition-all duration-200 hover:bg-muted/50 cursor-pointer"
+                >
+                    <div className="mt-1">
+                        <Clock className="h-4 w-4 text-blue-400 transition-colors group-hover:text-blue-500" />
+                    </div>
+                    <div className="flex-1 space-y-1 min-w-0">
+                        <p className="text-sm text-foreground transition-colors group-hover:text-foreground/90 line-clamp-2">
+                            {activity.message}
+                        </p>
+                        <div className="flex items-center gap-2">
+                            <p className="text-xs text-muted-foreground transition-colors group-hover:text-muted-foreground/80">
+                                {format(new Date(activity.created_at), 'MMM d, yyyy • h:mm a')}
+                            </p>
+                            {activity.user && (
+                                <span className="text-xs text-muted-foreground/60">
+                                    • by {activity.user.fname} {activity.user.lname}
+                                </span>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/resources/js/components/dashboard/member-performance-metrics.tsx b/resources/js/components/dashboard/member-performance-metrics.tsx
new file mode 100644
index 0000000..02b2af8
--- /dev/null
+++ b/resources/js/components/dashboard/member-performance-metrics.tsx
@@ -0,0 +1,48 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { CheckCircle2, Clock, AlertCircle, BarChart3 } from 'lucide-react';
+
+interface TaskStats {
+    total: number;
+    completed: number;
+    in_progress: number;
+    pending: number;
+}
+
+interface PerformanceMetricsProps {
+    taskStats: TaskStats;
+}
+
+export function PerformanceMetrics({ taskStats }: PerformanceMetricsProps) {
+    return (
+        <div className="grid grid-cols-2 gap-2">
+            <div className="flex items-center gap-1.5">
+                <CheckCircle2 className="h-3.5 w-3.5 text-emerald-600" />
+                <div>
+                    <div className="text-xs font-medium text-emerald-600">Completed</div>
+                    <div className="text-lg font-bold">{taskStats.completed}</div>
+                </div>
+            </div>
+            <div className="flex items-center gap-1.5">
+                <Clock className="h-3.5 w-3.5 text-blue-600" />
+                <div>
+                    <div className="text-xs font-medium text-blue-600">In Progress</div>
+                    <div className="text-lg font-bold">{taskStats.in_progress}</div>
+                </div>
+            </div>
+            <div className="flex items-center gap-1.5">
+                <AlertCircle className="h-3.5 w-3.5 text-amber-600" />
+                <div>
+                    <div className="text-xs font-medium text-amber-600">Pending</div>
+                    <div className="text-lg font-bold">{taskStats.pending}</div>
+                </div>
+            </div>
+            <div className="flex items-center gap-1.5">
+                <BarChart3 className="h-3.5 w-3.5 text-primary" />
+                <div>
+                    <div className="text-xs font-medium text-primary">Total</div>
+                    <div className="text-lg font-bold">{taskStats.total}</div>
+                </div>
+            </div>
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/resources/js/components/dashboard/member-recent-activity.tsx b/resources/js/components/dashboard/member-recent-activity.tsx
new file mode 100644
index 0000000..728bdeb
--- /dev/null
+++ b/resources/js/components/dashboard/member-recent-activity.tsx
@@ -0,0 +1,64 @@
+import { Timeline } from '@/types/timeline';
+import { format } from 'date-fns';
+import { Clock, CheckCircle2, AlertCircle, Calendar, User } from 'lucide-react';
+import { router } from '@inertiajs/react';
+import { useRolePrefix } from '@/hooks/use-role-prefix';
+
+interface RecentActivityProps {
+    activities: Timeline[];
+}
+
+export function MemberRecentActivity({ activities }: RecentActivityProps) {
+    const { getRoute } = useRolePrefix();
+
+    const getActivityIcon = (subjectType: string) => {
+        switch (subjectType.toLowerCase()) {
+            case 'task':
+                return <CheckCircle2 className="h-4 w-4 text-emerald-600" />;
+            case 'meeting':
+                return <Calendar className="h-4 w-4 text-blue-600" />;
+            default:
+                return <Clock className="h-4 w-4 text-muted-foreground" />;
+        }
+    };
+
+    const handleActivityClick = (activity: Timeline) => {
+        const route = getRoute(`/${activity.subject_type.toLowerCase()}s/${activity.subject_id}`);
+        router.visit(route);
+    };
+
+    if (activities.length === 0) {
+        return (
+            <div className="text-muted-foreground text-sm">No recent activity</div>
+        );
+    }
+
+    return (
+        <ul className="space-y-3">
+            {activities.map((activity) => (
+                <li 
+                    key={activity.id} 
+                    className="flex items-start gap-3 p-2 rounded-lg hover:bg-muted/50 cursor-pointer transition-colors"
+                    onClick={() => handleActivityClick(activity)}
+                >
+                    <div className="mt-0.5">
+                        {getActivityIcon(activity.subject_type)}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                        <p className="text-sm text-card-foreground">{activity.message}</p>
+                        <div className="flex items-center gap-2 mt-1">
+                            <User className="h-3 w-3 text-muted-foreground" />
+                            <span className="text-xs text-muted-foreground">
+                                {activity.user?.fname} {activity.user?.lname}
+                            </span>
+                            <span className="text-xs text-muted-foreground">•</span>
+                            <span className="text-xs text-muted-foreground">
+                                {format(new Date(activity.created_at), 'MMM d, h:mm a')}
+                            </span>
+                        </div>
+                    </div>
+                </li>
+            ))}
+        </ul>
+    );
+} 
\ No newline at end of file
diff --git a/resources/js/components/dashboard/member-watch-list.tsx b/resources/js/components/dashboard/member-watch-list.tsx
new file mode 100644
index 0000000..5875d8b
--- /dev/null
+++ b/resources/js/components/dashboard/member-watch-list.tsx
@@ -0,0 +1,89 @@
+import { Eye, Calendar, Clock, AlertCircle } from 'lucide-react';
+import { format, isPast, addHours, isBefore } from 'date-fns';
+
+interface Task {
+    id: number;
+    name: string;
+    status: 'pending' | 'in_progress' | 'completed';
+    due_date: string;
+    priority: 'low' | 'medium' | 'high';
+}
+
+interface MemberWatchListProps {
+    tasks: Task[];
+}
+
+function getStatusBadge(status: string) {
+    const map: Record<string, string> = {
+        completed: 'bg-green-100 text-green-800',
+        in_progress: 'bg-blue-100 text-blue-800',
+        pending: 'bg-yellow-100 text-yellow-800',
+    };
+    return map[status] || 'bg-gray-100 text-gray-800';
+}
+
+function getPriorityBadge(priority: string) {
+    const map: Record<string, string> = {
+        high: 'bg-red-100 text-red-800',
+        medium: 'bg-orange-100 text-orange-800',
+        low: 'bg-green-100 text-green-800',
+    };
+    return map[priority] || 'bg-gray-100 text-gray-800';
+}
+
+function isDueSoon(dueDate: string): boolean {
+    const date = new Date(dueDate);
+    const now = new Date();
+    const twentyFourHoursFromNow = addHours(now, 24);
+    return !isPast(date) && isBefore(date, twentyFourHoursFromNow);
+}
+
+export function MemberWatchList({ tasks }: MemberWatchListProps) {
+    // Sort tasks by due date and filter out completed tasks
+    const sortedTasks = [...tasks]
+        .filter(task => task.status !== 'completed')
+        .sort((a, b) => new Date(a.due_date).getTime() - new Date(b.due_date).getTime())
+        .slice(0, 3); // Only show the first 3 tasks
+
+    if (sortedTasks.length === 0) {
+        return (
+            <div className="text-muted-foreground text-sm">No upcoming tasks</div>
+        );
+    }
+
+    return (
+        <ul className="space-y-3">
+            {sortedTasks.map(task => {
+                const isAlmostDue = isDueSoon(task.due_date);
+                return (
+                    <li key={task.id} className="flex flex-col gap-2 p-3 rounded-lg border hover:bg-muted/50 transition-colors">
+                        <div className="flex items-center gap-2">
+                            <Eye className="h-4 w-4 text-primary" />
+                            <span className="text-sm font-medium">{task.name}</span>
+                            {isAlmostDue && (
+                                <AlertCircle className="h-4 w-4 text-red-500 ml-auto" />
+                            )}
+                        </div>
+                        
+                        <div className="flex flex-wrap items-center gap-2 text-xs">
+                            <span className={`px-2 py-0.5 rounded font-medium ${getStatusBadge(task.status)}`}>
+                                {task.status.replace('_', ' ')}
+                            </span>
+                            <span className={`px-2 py-0.5 rounded font-medium ${getPriorityBadge(task.priority)}`}>
+                                {task.priority}
+                            </span>
+                            <div className="flex items-center gap-1 text-muted-foreground">
+                                <Calendar className="h-3 w-3" />
+                                <span>{format(new Date(task.due_date), 'MMM d, yyyy')}</span>
+                            </div>
+                            <div className="flex items-center gap-1 text-muted-foreground">
+                                <Clock className="h-3 w-3" />
+                                <span>{format(new Date(task.due_date), 'h:mm a')}</span>
+                            </div>
+                        </div>
+                    </li>
+                );
+            })}
+        </ul>
+    );
+} 
\ No newline at end of file
diff --git a/resources/js/components/dashboard/performance-metrics.tsx b/resources/js/components/dashboard/performance-metrics.tsx
new file mode 100644
index 0000000..5f63e83
--- /dev/null
+++ b/resources/js/components/dashboard/performance-metrics.tsx
@@ -0,0 +1,50 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+
+interface TaskStats {
+    total: number;
+    completed: number;
+    in_progress: number;
+    pending: number;
+}
+
+interface PerformanceMetricsProps {
+    taskStats: TaskStats;
+}
+
+export function PerformanceMetrics({ taskStats }: PerformanceMetricsProps) {
+    const completion = taskStats.total > 0 ? Math.round((taskStats.completed / taskStats.total) * 100) : 0;
+
+    return (
+        <Card className="bg-neutral-800 col-span-1 row-span-1 min-h-[180px] flex flex-col justify-center">
+            <CardHeader>
+                <CardTitle className="text-gray-200">Performance Metric</CardTitle>
+            </CardHeader>
+            <CardContent>
+                <div className="flex items-center gap-6 mb-4">
+                    <div className="text-center">
+                        <div className="text-3xl font-bold text-gray-100">{taskStats.completed}</div>
+                        <div className="text-xs text-gray-400">Completed</div>
+                    </div>
+                    <div className="text-center">
+                        <div className="text-3xl font-bold text-gray-100">{taskStats.in_progress}</div>
+                        <div className="text-xs text-gray-400">In Progress</div>
+                    </div>
+                    <div className="text-center">
+                        <div className="text-3xl font-bold text-gray-100">{taskStats.pending}</div>
+                        <div className="text-xs text-gray-400">Pending</div>
+                    </div>
+                    <div className="text-center">
+                        <div className="text-3xl font-bold text-gray-100">{taskStats.total}</div>
+                        <div className="text-xs text-gray-400">Total</div>
+                    </div>
+                </div>
+                <div className="mb-2 flex items-center gap-2">
+                    <Progress value={completion} className="h-2 bg-gray-700" />
+                    <span className="text-xs text-gray-300">{completion}%</span>
+                </div>
+                <div className="text-xs text-gray-400">Task completion rate</div>
+            </CardContent>
+        </Card>
+    );
+} 
\ No newline at end of file
diff --git a/resources/js/components/dashboard/recent-activity.tsx b/resources/js/components/dashboard/recent-activity.tsx
new file mode 100644
index 0000000..e43bfc1
--- /dev/null
+++ b/resources/js/components/dashboard/recent-activity.tsx
@@ -0,0 +1,48 @@
+import { Timeline } from '@/types/timeline';
+import { format } from 'date-fns';
+import { Clock } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface RecentActivityProps {
+    activities: Timeline[];
+}
+
+export function RecentActivity({ activities }: RecentActivityProps) {
+    if (activities.length === 0) {
+        return (
+            <div className="text-muted-foreground text-sm">
+                No recent activity
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-3">
+            {activities.map((activity) => (
+                <div 
+                    key={activity.id} 
+                    className="group relative flex items-start gap-3 p-3 rounded-lg transition-all duration-200 hover:bg-muted/50 cursor-pointer"
+                >
+                    <div className="mt-1">
+                        <Clock className="h-4 w-4 text-blue-400 transition-colors group-hover:text-blue-500" />
+                    </div>
+                    <div className="flex-1 space-y-1 min-w-0">
+                        <p className="text-sm text-foreground transition-colors group-hover:text-foreground/90 line-clamp-2">
+                            {activity.message}
+                        </p>
+                        <div className="flex items-center gap-2">
+                            <p className="text-xs text-muted-foreground transition-colors group-hover:text-muted-foreground/80">
+                                {format(new Date(activity.created_at), 'MMM d, yyyy • h:mm a')}
+                            </p>
+                            {activity.user && (
+                                <span className="text-xs text-muted-foreground/60">
+                                    • by {activity.user.fname} {activity.user.lname}
+                                </span>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/resources/js/components/dashboard/task-stats-pie.tsx b/resources/js/components/dashboard/task-stats-pie.tsx
new file mode 100644
index 0000000..3d77f86
--- /dev/null
+++ b/resources/js/components/dashboard/task-stats-pie.tsx
@@ -0,0 +1,85 @@
+import { ResponsivePie } from '@nivo/pie';
+import { router } from '@inertiajs/react';
+import { useRolePrefix } from '@/hooks/use-role-prefix';
+
+interface TaskStats {
+  completed: number;
+  in_progress: number;
+  pending: number;
+}
+
+export function TaskStatusPieChart({ taskStats }: { taskStats: TaskStats }) {
+  const { getRoute } = useRolePrefix();
+  const pieData = [
+    {
+      id: 'Completed',
+      label: 'Completed',
+      value: taskStats.completed,
+      color: '#22c55e', // green
+    },
+    {
+      id: 'In Progress',
+      label: 'In Progress',
+      value: taskStats.in_progress,
+      color: '#3b82f6', // blue
+    },
+    {
+      id: 'Pending',
+      label: 'Pending',
+      value: taskStats.pending,
+      color: '#facc15', // yellow
+    },
+  ];
+
+  const handlePieClick = (data: any) => {
+    if (data && data.id) {
+      let status = '';
+      if (data.id === 'Completed') status = 'completed';
+      else if (data.id === 'In Progress') status = 'in_progress';
+      else if (data.id === 'Pending') status = 'pending';
+      if (status) {
+        router.visit(getRoute(`/tasks?status=${status}`));
+      }
+    }
+  };
+
+  return (
+    <div style={{ height: 250, cursor: 'pointer' }} title="Go to Tasks List">
+      <ResponsivePie
+        data={pieData}
+        margin={{ top: 50, right: 70, bottom: 30, left: 70 }}
+        innerRadius={0.5}
+        padAngle={1}
+        cornerRadius={5}
+        activeOuterRadiusOffset={8}
+        colors={{ datum: 'data.color' }}
+        borderWidth={1}
+        borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }}
+        arcLinkLabelsSkipAngle={10}
+        arcLinkLabelsTextColor="#fff"
+        arcLinkLabelsThickness={2}
+        arcLinkLabelsColor={{ from: 'color' }}
+        arcLabelsSkipAngle={10}
+        arcLabelsTextColor="#fff"
+        legends={[]}
+        enableArcLinkLabels={false}
+        onClick={handlePieClick}
+      />
+      {/* Custom Legend */}
+      <div style={{ display: 'flex', justifyContent: 'center', gap: '1.5rem', marginTop: '1rem' }}>
+        <LegendItem color="#22c55e" label="Completed" />
+        <LegendItem color="#3b82f6" label="In Progress" />
+        <LegendItem color="#facc15" label="Pending" />
+      </div>
+    </div>
+  );
+}
+
+function LegendItem({ color, label }: { color: string; label: string }) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+      <span style={{ display: 'inline-block', width: 16, height: 16, borderRadius: '50%', background: color }} />
+      <span style={{ fontSize: 14 }}>{label}</span>
+    </div>
+  );
+}
diff --git a/resources/js/components/dashboard/user-workload-chart.tsx b/resources/js/components/dashboard/user-workload-chart.tsx
new file mode 100644
index 0000000..a792474
--- /dev/null
+++ b/resources/js/components/dashboard/user-workload-chart.tsx
@@ -0,0 +1,80 @@
+import { Task, User } from '@/types/task';
+import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip } from 'recharts';
+import { useState } from 'react';
+
+interface UserWorkloadChartProps {
+    tasks: Task[];
+    users: User[];
+}
+
+export function UserWorkloadChart({ tasks, users }: UserWorkloadChartProps) {
+    // Calculate workload for each user
+    const workloadData = users.map(user => {
+        const userTasks = tasks.filter(task => 
+            task.users?.some(u => u.id === user.id)
+        );
+        
+        return {
+            name: user.fname + ' ' + user.lname,
+            total: userTasks.length,
+        };
+    });
+
+    // Sort by total workload descending
+    const sortedData = [...workloadData].sort((a, b) => b.total - a.total);
+    const [startIndex, setStartIndex] = useState(0);
+    const usersPerPage = 6;
+    const maxIndex = Math.max(0, sortedData.length - usersPerPage);
+    const visibleData = sortedData.slice(startIndex, startIndex + usersPerPage);
+
+    return (
+        <div className="h-[250px] w-full">
+            <ResponsiveContainer width="100%" height="85%">
+                <BarChart
+                    data={visibleData}
+                    margin={{
+                        top: 20,
+                        right: 30,
+                        left: 20,
+                        bottom: 5, // Increased bottom margin for labels
+                    }}
+                >
+                    <XAxis 
+                        dataKey="name" 
+                        angle={-45}
+                        textAnchor="end"
+                        height={100} // Increased height for labels
+                        tick={{ 
+                            fontSize: 12,
+                            dy: 8 // Move labels down slightly
+                        }}
+                        interval={0} // Show all labels
+                    />
+                    <YAxis />
+                    <Tooltip />
+                    <Bar 
+                        dataKey="total" 
+                        fill="#3b82f6" 
+                        name="Total Tasks"
+                    />
+                </BarChart>
+            </ResponsiveContainer>
+            {sortedData.length > usersPerPage && (
+                <div className="flex items-center justify-center mt-2">
+                    <input
+                        type="range"
+                        min={0}
+                        max={maxIndex}
+                        value={startIndex}
+                        onChange={e => setStartIndex(Number(e.target.value))}
+                        step={1}
+                        style={{ width: '60%' }}
+                    />
+                    <span className="ml-2 text-xs text-muted-foreground">
+                        Showing {startIndex + 1}-{Math.min(startIndex + usersPerPage, sortedData.length)} of {sortedData.length}
+                    </span>
+                </div>
+            )}
+        </div>
+    );
+} 
\ No newline at end of file
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..cd30996
--- /dev/null
+++ b/resources/js/components/meetings/create-meeting-dialog.tsx
@@ -0,0 +1,121 @@
+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"
+import { useRolePrefix } from "@/hooks/use-role-prefix"
+interface CreateMeetingDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    users: User[]
+    tasks: Task[]
+}
+
+export function CreateMeetingDialog({ open, onOpenChange, users, tasks }: CreateMeetingDialogProps) {
+    const { getRoute } = useRolePrefix();
+    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(getRoute('/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..083a255
--- /dev/null
+++ b/resources/js/components/tasks/create-task-dialog.tsx
@@ -0,0 +1,155 @@
+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, usePage } from "@inertiajs/react"
+import { TaskStatus, TaskPriority, User } from "@/types/task"
+import { MultiSelect } from "@/components/ui/multi-select"
+import { type PageProps } from '@/types'
+
+interface CreateTaskDialogProps {
+    users: User[];
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    meetingId?: number;
+}
+
+export function CreateTaskDialog({ users, open, onOpenChange, meetingId }: CreateTaskDialogProps) {
+    const { data, setData, post, processing, errors, reset } = useForm({
+        name: '',
+        description: '',
+        status: 'pending' as TaskStatus,
+        priority: 'medium' as TaskPriority,
+        due_date: '',
+        users: [] as number[],
+        meeting_id: meetingId
+    });
+
+    const { auth } = usePage().props as unknown as PageProps;
+    const isAdmin = auth.user.role?.name === 'Client-Admin';
+    const prefix = isAdmin ? '/admin' : '/member';
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        post(`${prefix}/tasks`, {
+            onSuccess: () => {
+                reset();
+                onOpenChange(false);
+                window.location.reload();
+            }
+        });
+    };
+
+    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/member-task-stats.tsx b/resources/js/components/tasks/member-task-stats.tsx
new file mode 100644
index 0000000..531722c
--- /dev/null
+++ b/resources/js/components/tasks/member-task-stats.tsx
@@ -0,0 +1,12 @@
+import { Task } from "@/types/task"
+import { TaskSummary } from "@/components/tasks/task-summary"
+
+interface MemberTaskStatsProps {
+    tasks: Task[]
+}
+
+export function MemberTaskStats({ tasks }: MemberTaskStatsProps) {
+    return (
+        <TaskSummary tasks={tasks} />
+    )
+} 
\ No newline at end of file
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/user-info.tsx b/resources/js/components/user-info.tsx
index 4626dc5..bfa1901 100644
--- a/resources/js/components/user-info.tsx
+++ b/resources/js/components/user-info.tsx
@@ -1,20 +1,18 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { useInitials } from '@/hooks/use-initials';
+import { getFullName, getInitials } from '@/lib/utils';
 import { type User } from '@/types';
 
 export function UserInfo({ user, showEmail = false }: { user: User; showEmail?: boolean }) {
-    const getInitials = useInitials();
-
     return (
         <>
             <Avatar className="h-8 w-8 overflow-hidden rounded-full">
-                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarImage src={user.avatar} alt={getFullName(user)} />
                 <AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
-                    {getInitials(user.name)}
+                    {getInitials(user)}
                 </AvatarFallback>
             </Avatar>
             <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate font-medium">{getFullName(user)}</span>
                 {showEmail && <span className="text-muted-foreground truncate text-xs">{user.email}</span>}
             </div>
         </>
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..997f8d0
--- /dev/null
+++ b/resources/js/components/users/create-user-dialog.tsx
@@ -0,0 +1,176 @@
+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({
+        fname: '',
+        mname: '',
+        lname: '',
+        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="fname">First Name</Label>
+                                    <Input
+                                        id="fname"
+                                        value={data.fname}
+                                        onChange={e => setData('fname', e.target.value)}
+                                        placeholder="First name"
+                                        className="w-full"
+                                    />
+                                    <InputError message={errors.fname} />
+                                </div>
+
+                                <div className="grid gap-2">
+                                    <Label htmlFor="mname">Middle Name</Label>
+                                    <Input
+                                        id="mname"
+                                        value={data.mname}
+                                        onChange={e => setData('mname', e.target.value)}
+                                        placeholder="Middle name (optional)"
+                                        className="w-full"
+                                    />
+                                    <InputError message={errors.mname} />
+                                </div>
+
+                                <div className="grid gap-2">
+                                    <Label htmlFor="lname">Last Name</Label>
+                                    <Input
+                                        id="lname"
+                                        value={data.lname}
+                                        onChange={e => setData('lname', e.target.value)}
+                                        placeholder="Last name"
+                                        className="w-full"
+                                    />
+                                    <InputError message={errors.lname} />
+                                </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..39b09c5
--- /dev/null
+++ b/resources/js/components/users/user-summary.tsx
@@ -0,0 +1,56 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { Users, UserCheck, UserX } from 'lucide-react';
+
+interface User {
+    id: number;
+    fname: string;
+    mname?: string;
+    lname: 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/config/navigation.ts b/resources/js/config/navigation.ts
new file mode 100644
index 0000000..f0cc6a7
--- /dev/null
+++ b/resources/js/config/navigation.ts
@@ -0,0 +1,59 @@
+import { type NavItem } from '@/types';
+import { LayoutGrid, SquareCheckBig, Users, Calendar } from 'lucide-react';
+
+export const navigationConfig = {
+    admin: [
+        {
+            title: 'Dashboard',
+            href: '/admin/dashboard',
+            icon: LayoutGrid,
+            requiredRole: 'Client-Admin',
+        },
+        {
+            title: 'Tasks',
+            href: '/admin/tasks',
+            icon: SquareCheckBig,
+            requiredRole: 'Client-Admin',
+        },
+        {
+            title: 'Users',
+            href: '/admin/users',
+            icon: Users,
+            requiredRole: 'Client-Admin',
+        },
+        {
+            title: 'Meetings',
+            href: '/admin/meetings',
+            icon: Calendar,
+            requiredRole: 'Client-Admin',
+        },
+    ],
+    member: [
+        {
+            title: 'Dashboard',
+            href: '/member/dashboard',
+            icon: LayoutGrid,
+            requiredRole: 'Member',
+        },
+        {
+            title: 'My Tasks',
+            href: '/member/tasks',
+            icon: SquareCheckBig,
+            requiredRole: 'Member',
+        },
+        {
+            title: 'My Meetings',
+            href: '/member/meetings',
+            icon: Calendar,
+            requiredRole: 'Member',
+        },
+    ],
+} satisfies Record<string, NavItem[]>;
+
+export function getNavigationItems(role?: string): NavItem[] {
+    if (!role) return [];
+    
+    return role === 'Client-Admin' 
+        ? navigationConfig.admin 
+        : navigationConfig.member;
+} 
\ No newline at end of file
diff --git a/resources/js/hooks/use-role-prefix.ts b/resources/js/hooks/use-role-prefix.ts
new file mode 100644
index 0000000..36d8872
--- /dev/null
+++ b/resources/js/hooks/use-role-prefix.ts
@@ -0,0 +1,14 @@
+import { usePage } from '@inertiajs/react';
+import { type PageProps } from '@/types';
+
+export function useRolePrefix() {
+    const { auth } = usePage().props as unknown as PageProps;
+    const isAdmin = auth.user.role?.name === 'Client-Admin';
+    const prefix = isAdmin ? '/admin' : '/member';
+
+    return {
+        prefix,
+        isAdmin,
+        getRoute: (path: string) => `${prefix}${path}`
+    };
+} 
\ 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/lib/utils.ts b/resources/js/lib/utils.ts
index dd53ea8..86413aa 100644
--- a/resources/js/lib/utils.ts
+++ b/resources/js/lib/utils.ts
@@ -1,6 +1,17 @@
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { type User } from "@/types/user";
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
 }
+
+export function getFullName(user: User): string {
+    return [user.fname, user.mname, user.lname].filter(Boolean).join(' ');
+}
+
+export function getInitials(user: User): string {
+    const firstInitial = user.fname.charAt(0).toUpperCase();
+    const lastInitial = user.lname.charAt(0).toUpperCase();
+    return `${firstInitial}${lastInitial}`;
+}
diff --git a/resources/js/pages/Users/user-details.tsx b/resources/js/pages/Users/user-details.tsx
deleted file mode 100644
index 92a44e0..0000000
--- a/resources/js/pages/Users/user-details.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import React, { useState } from 'react';
-import { Head, Link, useForm, router } from '@inertiajs/react';
-import AppLayout from '@/layouts/app-layout';
-import { type BreadcrumbItem } from '@/types';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { User, Trash2 } from 'lucide-react';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-
-interface User {
-    id: number;
-    name: string;
-    email: string;
-}
-
-interface UserDetailsProps {
-    user: User;
-}
-
-export default function UserDetails({ user: initialUser }: UserDetailsProps) {
-    const [isEditing, setIsEditing] = useState(false);
-    const { data, setData, put, processing, errors, reset } = useForm({
-        name: initialUser.name,
-        email: initialUser.email,
-    });
-
-    const breadcrumbs: BreadcrumbItem[] = [
-        {
-            title: 'Users',
-            href: '/users',
-        },
-        {
-            title: 'User Details',
-            href: `/users/${initialUser.id}`,
-        },
-    ];
-
-    const handleSave = () => {
-        put(`/users/${initialUser.id}`, {
-            onSuccess: () => {
-                setIsEditing(false);
-            },
-        });
-    };
-
-    const handleCancel = () => {
-        reset();
-        setIsEditing(false);
-    };
-
-    const handleDelete = () => {
-        if (confirm('Are you sure you want to delete this user?')) {
-            router.delete(`/users/${initialUser.id}`, {
-            });
-        }
-    };
-
-
-    return (
-        <AppLayout breadcrumbs={breadcrumbs}>
-            <Head title={`User: ${data.name}`} />
-            <div className="container mx-auto py-8">
-                <Card className="w-full max-w-2xl mx-auto bg-white dark:bg-neutral-800 shadow-lg">
-                    <CardHeader className="border-b border-neutral-200 dark:border-neutral-700 pb-6">
-                        <div className="flex items-center justify-between">
-                            <div className="flex items-center gap-4">
-                                <div className="p-3 bg-primary/10 rounded-full">
-                                    <User className="h-6 w-6 text-primary" />
-                                </div>
-                                <CardTitle className="text-2xl font-semibold">{data.name}</CardTitle>
-                            </div>
-
-                            <div className="flex items-center gap-2">
-                                {isEditing ? (
-                                    <div className="flex gap-2">
-                                        <Button
-                                            variant="outline"
-                                            onClick={handleCancel}
-                                            disabled={processing}
-                                        >
-                                            Cancel
-                                        </Button>
-                                        <Button
-                                            onClick={handleSave}
-                                            disabled={processing}
-                                        >
-                                            {processing ? 'Saving...' : 'Save Changes'}
-                                        </Button>
-                                    </div>
-                                ) : (
-                                    <div className="flex gap-2">
-                                        <Button
-                                            variant="outline"
-                                            onClick={() => setIsEditing(true)}
-                                        >
-                                            Edit Profile
-                                        </Button>
-                                        <Button
-                                            variant="destructive"
-                                            onClick={handleDelete}
-                                        >
-                                            <Trash2 className="h-4 w-4 mr-2" />
-                                            Delete User
-                                        </Button>
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-                    </CardHeader>
-                    <CardContent className="pt-6">
-                        <div className="space-y-6">
-                            <div className="space-y-2">
-                                <Label htmlFor="name">Name</Label>
-
-                                {/* Edit Profile */}
-                                {isEditing ? (
-                                    <div className="space-y-1">
-                                        <Input
-                                            id="name"
-                                            value={data.name}
-                                            onChange={e => setData('name', e.target.value)}
-                                            className="w-full"
-                                            disabled={processing}
-                                        />
-                                        {errors.name && (
-                                            <p className="text-sm text-red-500">{errors.name}</p>
-                                        )}
-                                    </div>
-                                ) : (
-                                    <p className="text-lg">{data.name}</p>
-                                )}
-                            </div>
-                            <div className="space-y-2">
-                                <Label htmlFor="email">Email</Label>
-                                {isEditing ? (
-                                    <div className="space-y-1">
-                                        <Input
-                                            id="email"
-                                            type="email"
-                                            value={data.email}
-                                            onChange={e => setData('email', e.target.value)}
-                                            className="w-full"
-                                            disabled={processing}
-                                        />
-                                        {errors.email && (
-                                            <p className="text-sm text-red-500">{errors.email}</p>
-                                        )}
-                                    </div>
-                                ) : (
-                                    <p className="text-lg">{data.email}</p>
-                                )}
-                            </div>
-                            {!isEditing && (
-                                <div className="pt-4">
-                                    <Button asChild variant="outline" className="w-full sm:w-auto">
-                                        <Link href="/users">Back to User List</Link>
-                                    </Button>
-                                </div>
-                            )}
-                        </div>
-                    </CardContent>
-                </Card>
-            </div>
-        </AppLayout>
-    );
-}
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-dashboard.tsx b/resources/js/pages/admin/admin-dashboard.tsx
new file mode 100644
index 0000000..a33eee7
--- /dev/null
+++ b/resources/js/pages/admin/admin-dashboard.tsx
@@ -0,0 +1,109 @@
+import { PlaceholderPattern } from '@/components/ui/placeholder-pattern';
+import AppLayout from '@/layouts/app-layout';
+import { type BreadcrumbItem } from '@/types';
+import { Head } from '@inertiajs/react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { TaskProgress } from '@/components/tasks/task-progress';
+import { Task, User } from '@/types/task';
+import { Timeline } from '@/types/timeline';
+import { format } from 'date-fns';
+import { Badge } from '@/components/ui/badge';
+import { TaskStatusPieChart } from '@/components/dashboard/task-stats-pie';
+import { UserWorkloadChart } from '@/components/dashboard/user-workload-chart';
+import { RecentActivity } from '@/components/dashboard/admin-recent-activity';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Dashboard',
+        href: '/dashboard',
+    },
+];
+
+interface DashboardProps {
+    taskStats: {
+        total: number;
+        completed: number;
+        in_progress: number;
+        pending: number;
+    };
+    upcomingTasks: Task[];
+    users: User[];
+    tasks: Task[];
+    recentActivities: Timeline[];
+}
+
+export default function Dashboard({ taskStats, upcomingTasks, users, tasks, recentActivities }: DashboardProps) {
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title="Dashboard" />
+            <div className="flex h-[calc(100vh-5rem)] flex-1 flex-col gap-2 pt-2 px-4 pb-4">
+                <h1 className="text-2xl font-semibold mb-2">Dashboard</h1>
+                <div
+                    className="grid grid-cols-1 md:grid-cols-6 gap-4 h-[calc(100%-3rem)]"
+                >
+                    {/* Left Column - Recent Activity and Watch List stacked */}
+                    <div className="md:col-span-4 flex flex-col gap-4">
+                        <Card className="flex-[2] overflow-hidden">
+                            <CardHeader className="pb-2">
+                                <CardTitle>Recent Activity</CardTitle>
+                            </CardHeader>
+                            <CardContent className="h-[calc(100%-3rem)] overflow-y-auto">
+                                <RecentActivity activities={recentActivities} />
+                            </CardContent>
+                        </Card>
+
+                        <Card className="flex-1 overflow-hidden">
+                            <CardHeader className="pb-2">
+                                <CardTitle>Watch List</CardTitle>
+                            </CardHeader>
+                            <CardContent className="h-[calc(100%-3rem)] overflow-y-auto px-2">
+                                <div className="space-y-2">
+                                    {upcomingTasks.map((task) => (
+                                        <div key={task.id} className="flex items-center justify-between p-2 border rounded-lg">
+                                            <div>
+                                                <h3 className="font-medium text-sm">{task.name}</h3>
+                                                <p className="text-xs text-muted-foreground">
+                                                    Due: {task.due_date ? format(new Date(task.due_date), 'MMM d, yyyy') : 'No due date'}
+                                                </p>
+                                            </div>
+                                            <Badge className={statusColors[task.status]}>
+                                                {task.status.replace('_', ' ')}
+                                            </Badge>
+                                        </div>
+                                    ))}
+                                </div>
+                            </CardContent>
+                        </Card>
+                    </div>
+
+                    {/* Right Column - Charts stacked vertically */}
+                    <div className="md:col-span-2 flex flex-col gap-4">
+                        <Card className="flex-1 overflow-hidden">
+                            <CardHeader className="pb-2">
+                                <CardTitle>Task Completion</CardTitle>
+                            </CardHeader>
+                            <CardContent className="h-[calc(100%-3rem)]">
+                                <TaskStatusPieChart taskStats={taskStats} />
+                            </CardContent>
+                        </Card>
+
+                        <Card className="flex-1 overflow-hidden">
+                            <CardHeader className="pb-2">
+                                <CardTitle>Team Workload</CardTitle>
+                            </CardHeader>
+                            <CardContent className="h-[calc(100%-3rem)]">
+                                <UserWorkloadChart tasks={tasks} users={users} />
+                            </CardContent>
+                        </Card>
+                    </div>
+                </div>
+            </div>
+        </AppLayout>
+    );
+}
+
+const statusColors = {
+    'pending': 'bg-yellow-100 text-yellow-800',
+    'in_progress': 'bg-blue-100 text-blue-800',
+    'completed': 'bg-green-100 text-green-800'
+};
\ 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..ae0c760
--- /dev/null
+++ b/resources/js/pages/admin/admin-meeting-details.tsx
@@ -0,0 +1,434 @@
+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, parse } from 'date-fns';
+import { useForm } from '@inertiajs/react';
+import { Check, ChevronsUpDown, Trash2, Calendar, Users, ListTodo, Plus } 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';
+import { CreateTaskDialog } from '@/components/tasks/create-task-dialog';
+import { useRolePrefix } from '@/hooks/use-role-prefix';
+
+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 { getRoute } = useRolePrefix();
+    const [isEditing, setIsEditing] = useState(false);
+    const [isCreateTaskOpen, setIsCreateTaskOpen] = useState(false);
+    const { data, setData, put, processing, errors } = useForm({
+        title: meeting.title,
+        date: meeting.date ? format(new Date(meeting.date), "yyyy-MM-dd'T'HH:mm") : '',
+        type: meeting.type,
+        agenda_text: meeting.agenda_text,
+        users: meeting.users.map(user => user.id),
+        tasks: meeting.tasks.map(task => task.id)
+    });
+
+    const breadcrumbs: BreadcrumbItem[] = [
+        {
+            title: 'Meetings',
+            href: '/meetings',
+        },
+        {
+            title: meeting.title,
+            href: `/meetings/${meeting.id}`,
+        },
+    ];
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        put(getRoute(`/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(getRoute(`/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(getRoute(`/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-3 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-3 gap-8">
+                                    <div className="col-span-2 space-y-2 w-full">
+                                        <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-[calc(100vh-400px)] text-sm bg-muted/30 p-4 rounded-md border w-full"
+                                            />
+                                        ) : (
+                                            <div className="min-h-[calc(100vh-400px)] text-sm bg-muted/30 p-4 rounded-md border w-full whitespace-pre-wrap">
+                                                {meeting.agenda_text || 'No agenda set'}
+                                            </div>
+                                        )}
+                                    </div>
+
+                                    <div className="space-y-8">
+                                        <div className="space-y-2 w-full">
+                                            <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 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-foreground border w-full"
+                                                />
+                                            ) : (
+                                                <div className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-foreground border w-full">{meeting.title}</div>
+                                            )}
+                                        </div>
+
+                                        <div className="space-y-2 w-full">
+                                            <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 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center border w-full"
+                                                    placeholder="Type (e.g. Internal, Client, etc.)"
+                                                />
+                                            ) : (
+                                                <div className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center border w-full">
+                                                    <Badge className={cn(typeColors[meeting.type as MeetingType], "text-xs font-medium px-2 py-0.5 mr-2")}>{meeting.type}</Badge>
+                                                </div>
+                                            )}
+                                        </div>
+
+                                        <div className="space-y-2 w-full">
+                                            <Label htmlFor="date" className="text-sm font-medium">Date & Time</Label>
+                                            {isEditing ? (
+                                                <div className="relative">
+                                                    <Input
+                                                        type="datetime-local"
+                                                        id="date"
+                                                        value={data.date}
+                                                        onChange={e => {
+                                                            const date = new Date(e.target.value);
+                                                            // Set seconds to 0
+                                                            date.setSeconds(0);
+                                                            setData('date', format(date, "yyyy-MM-dd'T'HH:mm"));
+                                                        }}
+                                                        error={errors.date}
+                                                        className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-muted-foreground border w-full pl-10"
+                                                        step="60"
+                                                        onFocus={(e) => {
+                                                            // Remove seconds from the input when focused
+                                                            const date = new Date(e.target.value);
+                                                            date.setSeconds(0);
+                                                            e.target.value = format(date, "yyyy-MM-dd'T'HH:mm");
+                                                        }}
+                                                    />
+                                                    <Calendar className="h-4 w-4 absolute left-4 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
+                                                </div>
+                                            ) : (
+                                                <div className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-muted-foreground border w-full">
+                                                    <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 w-full">
+                                            <div className="flex items-center justify-between">
+                                                <div className="flex items-center gap-2">
+                                                    <Label className="text-sm font-medium">Attendees</Label>
+                                                    <span className="text-sm text-muted-foreground">
+                                                        ({meeting.users.length})
+                                                    </span>
+                                                </div>
+                                            </div>
+                                            {isEditing ? (
+                                                <>
+                                                    <div className="flex flex-wrap gap-1.5 mb-4">
+                                                        {users
+                                                            .filter(user => data.users.includes(user.id))
+                                                            .map((user) => (
+                                                                <Badge 
+                                                                    key={user.id} 
+                                                                    variant="secondary" 
+                                                                    className="text-sm bg-muted/50"
+                                                                >
+                                                                    {user.fname} {user.lname}
+                                                                </Badge>
+                                                            ))
+                                                        }
+                                                    </div>
+                                                    <Popover>
+                                                        <PopoverTrigger asChild>
+                                                            <Button
+                                                                variant="outline"
+                                                                role="combobox"
+                                                                className="w-full justify-between h-10"
+                                                            >
+                                                                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.fname} {user.lname}</span>
+                                                                        </CommandItem>
+                                                                    ))}
+                                                                </CommandGroup>
+                                                            </Command>
+                                                        </PopoverContent>
+                                                    </Popover>
+                                                </>
+                                            ) : (
+                                                <div className="space-y-4">
+                                                    <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 cursor-pointer hover:bg-muted/70 transition-colors"
+                                                                    onClick={() => router.visit(`/users/${user.id}?from_meeting=${meeting.id}`)}
+                                                                >
+                                                                    {user.fname} {user.lname}
+                                                                </Badge>
+                                                            ))
+                                                        ) : (
+                                                            <span className="text-muted-foreground text-sm">No attendees</span>
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            )}
+                                        </div>
+
+                                        <div className="space-y-2 w-full">
+                                            <div className="flex items-center gap-4">
+                                                <div className="flex items-center gap-2">
+                                                    <Label className="text-sm font-medium">Tasks</Label>
+                                                    <span className="text-sm text-muted-foreground">
+                                                        ({meeting.tasks.length})
+                                                    </span>
+                                                </div>
+                                                {!isEditing && (
+                                                    <Button
+                                                        variant="outline"
+                                                        size="sm"
+                                                        onClick={() => setIsCreateTaskOpen(true)}
+                                                        className="cursor-pointer"
+                                                    >
+                                                        <Plus className="h-4 w-4 mr-2" />
+                                                        Add Task
+                                                    </Button>
+                                                )}
+                                            </div>
+                                            {isEditing ? (
+                                                <>
+                                                    <div className="flex flex-wrap gap-1.5 mb-4">
+                                                        {tasks
+                                                            .filter(task => data.tasks.includes(task.id))
+                                                            .map((task) => (
+                                                                <Badge 
+                                                                    key={task.id} 
+                                                                    variant="secondary" 
+                                                                    className="text-sm bg-muted/50"
+                                                                >
+                                                                    {task.name}
+                                                                </Badge>
+                                                            ))
+                                                        }
+                                                    </div>
+                                                    <Popover>
+                                                        <PopoverTrigger asChild>
+                                                            <Button
+                                                                variant="outline"
+                                                                role="combobox"
+                                                                className="w-full justify-between h-10"
+                                                            >
+                                                                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 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 cursor-pointer hover:bg-muted/70 transition-colors" 
+                                                                    onClick={() => router.visit(`/tasks/${task.id}?from_meeting=${meeting.id}`)}
+                                                                >
+                                                                    {task.name}
+                                                                </Badge>
+                                                            ))
+                                                        ) : (
+                                                            <span className="text-muted-foreground text-sm">No tasks</span>
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+                            </form>
+                        </CardContent>
+                    </Card>
+                </div>
+                <div className="mt-6">
+                    <Button variant="outline" onClick={() => router.visit(getRoute('/meetings'))} className="cursor-pointer">
+                        ← Back to Meetings List
+                    </Button>
+                </div>
+            </div>
+            <CreateTaskDialog 
+                open={isCreateTaskOpen}
+                onOpenChange={setIsCreateTaskOpen}
+                users={users}
+                meetingId={meeting.id}
+            />
+        </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..53be588
--- /dev/null
+++ b/resources/js/pages/admin/admin-meeting-list.tsx
@@ -0,0 +1,212 @@
+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, isAfter } 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';
+import { useRolePrefix } from '@/hooks/use-role-prefix';
+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;
+            const now = new Date();
+            const meetingDate = new Date(meeting.date);
+            const isUpcoming = isAfter(meetingDate, now);
+            return (
+                <div>
+                    <div className="font-medium">{meeting.title}</div>
+                    <div>
+                        <span
+                            className={
+                                isUpcoming
+                                    ? "px-1.5 py-0.5 rounded text-[10px] font-semibold bg-green-100 text-green-800"
+                                    : "px-1.5 py-0.5 rounded text-[10px] font-semibold bg-gray-200 text-gray-700"
+                            }
+                        >
+                            {isUpcoming ? "Upcoming" : "Past"}
+                        </span>
+                    </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 (
+                <span className="text-sm text-muted-foreground">{row.getValue("type")}</span>
+            );
+        },
+    },
+    {
+        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.fname} {user.lname}
+                        </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);
+    const { getRoute } = useRolePrefix();
+
+    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(getRoute(`/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..9815b1c
--- /dev/null
+++ b/resources/js/pages/admin/admin-task-details.tsx
@@ -0,0 +1,315 @@
+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, usePage } from '@inertiajs/react';
+import { Check, ChevronsUpDown, Trash2, Calendar, Users, AlertCircle } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
+import { MultiSelect } from "@/components/ui/multi-select"
+import { useRolePrefix } from '@/hooks/use-role-prefix';
+
+interface PageProps {
+    task: Task;
+    all_users: User[];
+    from_meeting?: number;
+}
+
+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 { getRoute } = useRolePrefix();
+    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 { props } = usePage();
+    const fromMeetingId = props.from_meeting;
+    
+    const breadcrumbs: BreadcrumbItem[] = [
+        {
+            title: 'Meetings',
+            href: '/meetings',
+        },
+        ...(fromMeetingId ? [
+            {
+                title: 'Meeting Details',
+                href: `/meetings/${fromMeetingId}`,
+            }
+        ] : [
+            {
+                title: 'Tasks',
+                href: '/tasks',
+            }
+        ]),
+        {
+            title: task.name,
+            href: '#',
+        },
+    ];
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        put(getRoute(`/tasks/${task.id}`), {
+            onSuccess: () => {
+                setIsEditing(false);
+            },
+            preserveScroll: true
+        });
+    };
+
+    const handleCancel = () => {
+        setIsEditing(false);
+        setData({
+            name: task.name,
+            description: task.description,
+            status: task.status,
+            priority: task.priority,
+            due_date: task.due_date,
+            users: task.users.map(user => user.id)
+        });
+    };
+
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title={`Task: ${task.name}`} />
+            <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">{task.name}</h1>
+                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                            <Calendar className="h-4 w-4" />
+                            {task.due_date ? format(new Date(task.due_date), 'MMMM d, yyyy') : 'No due date'}
+                        </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"
+                                >
+                                    {processing ? 'Saving...' : '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>
+
+                <div className="grid grid-cols-3 gap-6">
+                    <Card className="col-span-3 shadow-sm">
+                        <CardHeader className="pb-4">
+                            <CardTitle className="text-lg font-medium">Task Details</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <form onSubmit={handleSubmit} className="space-y-8">
+                                <div className="grid grid-cols-2 gap-8">
+                                    <div className="space-y-8">
+                                        <div className="space-y-2 w-full">
+                                            <Label htmlFor="name" className="text-sm font-medium">Task Name</Label>
+                                            {isEditing ? (
+                                                <Input
+                                                    id="name"
+                                                    value={data.name}
+                                                    onChange={e => setData('name', e.target.value)}
+                                                    error={errors.name}
+                                                    className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-foreground border w-full"
+                                                />
+                                            ) : (
+                                                <div className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-foreground border w-full">
+                                                    {task.name}
+                                                </div>
+                                            )}
+                                        </div>
+
+                                        <div className="space-y-2 w-full">
+                                            <Label htmlFor="description" className="text-sm font-medium">Description</Label>
+                                            {isEditing ? (
+                                                <Textarea
+                                                    id="description"
+                                                    value={data.description}
+                                                    onChange={e => setData('description', e.target.value)}
+                                                    error={errors.description}
+                                                    className="min-h-[120px] text-sm bg-muted/30 p-4 rounded-md border w-full"
+                                                />
+                                            ) : (
+                                                <div className="min-h-[120px] text-sm bg-muted/30 p-4 rounded-md border w-full whitespace-pre-wrap">
+                                                    {task.description || 'No description provided'}
+                                                </div>
+                                            )}
+                                        </div>
+
+                                        <div className="space-y-2 w-full">
+                                            {isEditing ? (
+                                                <MultiSelect
+                                                    items={all_users.map(user => ({
+                                                        id: user.id,
+                                                        name: `${user.fname} ${user.lname}`
+                                                    }))}
+                                                    selectedIds={data.users}
+                                                    onSelectionChange={(ids) => setData('users', ids)}
+                                                    placeholder="Select users..."
+                                                    label="Assigned Users"
+                                                    error={errors.users}
+                                                />
+                                            ) : (
+                                                <div className="space-y-4">
+                                                    <div className="flex flex-wrap gap-1.5">
+                                                        {task.users.length > 0 ? (
+                                                            task.users.map((user) => (
+                                                                <Badge 
+                                                                    key={user.id} 
+                                                                    variant="secondary" 
+                                                                    className="text-sm bg-muted/50 cursor-pointer hover:bg-muted/70 transition-colors"
+                                                                    onClick={() => router.visit(`/users/${user.id}?from_task=${task.id}`)}
+                                                                >
+                                                                    {user.fname} {user.lname}
+                                                                </Badge>
+                                                            ))
+                                                        ) : (
+                                                            <span className="text-muted-foreground text-sm">No users assigned</span>
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+
+                                    <div className="space-y-8">
+                                        <div className="space-y-2 w-full">
+                                            <Label htmlFor="status" className="text-sm font-medium">Status</Label>
+                                            {isEditing ? (
+                                                <Select
+                                                    value={data.status}
+                                                    onValueChange={(value) => {
+                                                        setData('status', value as TaskStatus);
+                                                    }}
+                                                >
+                                                    <SelectTrigger className="h-10 text-sm bg-muted/30">
+                                                        <SelectValue />
+                                                    </SelectTrigger>
+                                                    <SelectContent>
+                                                        <SelectItem value="pending">Pending</SelectItem>
+                                                        <SelectItem value="in_progress">In Progress</SelectItem>
+                                                        <SelectItem value="completed">Completed</SelectItem>
+                                                    </SelectContent>
+                                                </Select>
+                                            ) : (
+                                                <div className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center border w-full">
+                                                    {task.status.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}
+                                                </div>
+                                            )}
+                                        </div>
+
+                                        <div className="space-y-2 w-full">
+                                            <Label htmlFor="priority" className="text-sm font-medium">Priority</Label>
+                                            {isEditing ? (
+                                                <Select
+                                                    value={data.priority}
+                                                    onValueChange={(value) => {
+                                                        setData('priority', value as TaskPriority);
+                                                    }}
+                                                >
+                                                    <SelectTrigger className="h-10 text-sm bg-muted/30">
+                                                        <SelectValue />
+                                                    </SelectTrigger>
+                                                    <SelectContent>
+                                                        <SelectItem value="low">Low</SelectItem>
+                                                        <SelectItem value="medium">Medium</SelectItem>
+                                                        <SelectItem value="high">High</SelectItem>
+                                                    </SelectContent>
+                                                </Select>
+                                            ) : (
+                                                <div className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center border w-full">
+                                                    {task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}
+                                                </div>
+                                            )}
+                                        </div>
+
+                                        <div className="space-y-2 w-full">
+                                            <Label htmlFor="due_date" className="text-sm font-medium">Due Date</Label>
+                                            {isEditing ? (
+                                                <div className="relative">
+                                                    <Input
+                                                        type="date"
+                                                        id="due_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 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-muted-foreground border w-full pl-10"
+                                                    />
+                                                    <Calendar className="h-4 w-4 absolute left-4 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
+                                                </div>
+                                            ) : (
+                                                <div className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-muted-foreground border w-full">
+                                                    <Calendar className="h-4 w-4 mr-2" />
+                                                    {task.due_date ? format(new Date(task.due_date), 'MMMM d, yyyy') : 'No due date'}
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+                            </form>
+                        </CardContent>
+                    </Card>
+                </div>
+
+                <div className="mt-6">
+                    {fromMeetingId ? (
+                        <Button variant="outline" onClick={() => router.visit(getRoute(`/meetings/${fromMeetingId}`))} className="cursor-pointer">
+                            ← Back to Meeting
+                        </Button>
+                    ) : (
+                        <Button variant="outline" onClick={() => router.visit(getRoute('/tasks'))} className="cursor-pointer">
+                            ← Back to Tasks List
+                        </Button>
+                    )}
+                </div>
+            </div>
+        </AppLayout>
+    );
+}
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..baaa5cd
--- /dev/null
+++ b/resources/js/pages/admin/admin-task-list.tsx
@@ -0,0 +1,371 @@
+import { Head, usePage, router } from '@inertiajs/react';
+import AppLayout from '@/layouts/app-layout';
+import { type BreadcrumbItem, type PageProps } 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, Filter, Calendar, User } from 'lucide-react';
+import { DataTable } from '@/components/data-table';
+import { ColumnDef } from '@tanstack/react-table';
+import { useState } from 'react';
+import { format, addDays, isAfter, isBefore, startOfDay, endOfDay } from 'date-fns';
+import { type Task, type User as TaskUser, type TaskStatus } from '@/types/task';
+import { CreateTaskDialog } from '@/components/tasks/create-task-dialog';
+import { AdminTaskStats } from '@/components/tasks/admin-task-stats';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+    DropdownMenuGroup,
+} from "@/components/ui/dropdown-menu";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { useRolePrefix } from '@/hooks/use-role-prefix';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Tasks',
+        href: '/tasks',
+    },
+];
+
+interface AdminTaskListProps extends PageProps {
+    tasks: Task[];
+    users: TaskUser[];
+}
+
+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.fname} {user.lname}
+                        </Badge>
+                    ))}
+                </div>
+            )
+        },
+    },
+];
+
+export default function AdminTaskList({ tasks, users }: AdminTaskListProps) {
+    const { auth } = usePage().props as unknown as PageProps;
+    const isAdmin = auth.user.role?.name === 'Client-Admin';
+    const { getRoute } = useRolePrefix();
+    const prefix = isAdmin ? '/admin' : '/member';
+    const [isTaskDialogOpen, setIsTaskDialogOpen] = useState(false);
+    const [filteredTasks, setFilteredTasks] = useState(tasks);
+    const [selectedUser, setSelectedUser] = useState<string | null>(null);
+    const [selectedDateFilter, setSelectedDateFilter] = useState<string | null>(null);
+
+    const clearFilters = () => {
+        setSelectedUser(null);
+        setSelectedDateFilter(null);
+        setFilteredTasks(tasks);
+    };
+
+    const applyFilters = (dateFilter?: string, userFilter?: string) => {
+        let filtered = tasks;
+
+        // Apply date filter
+        if (dateFilter) {
+            const now = new Date();
+            const today = startOfDay(now);
+            const tomorrow = endOfDay(addDays(today, 1));
+            const nextWeek = endOfDay(addDays(today, 7));
+            const nextMonth = endOfDay(addDays(today, 30));
+
+            switch (dateFilter) {
+                case 'due-today':
+                    filtered = filtered.filter(task => {
+                        if (!task.due_date) return false;
+                        const dueDate = new Date(task.due_date);
+                        return isAfter(dueDate, today) && isBefore(dueDate, tomorrow);
+                    });
+                    break;
+                case 'due-tomorrow':
+                    filtered = filtered.filter(task => {
+                        if (!task.due_date) return false;
+                        const dueDate = new Date(task.due_date);
+                        return isAfter(dueDate, tomorrow) && isBefore(dueDate, addDays(tomorrow, 1));
+                    });
+                    break;
+                case 'due-this-week':
+                    filtered = filtered.filter(task => {
+                        if (!task.due_date) return false;
+                        const dueDate = new Date(task.due_date);
+                        return isAfter(dueDate, today) && isBefore(dueDate, nextWeek);
+                    });
+                    break;
+                case 'due-this-month':
+                    filtered = filtered.filter(task => {
+                        if (!task.due_date) return false;
+                        const dueDate = new Date(task.due_date);
+                        return isAfter(dueDate, today) && isBefore(dueDate, nextMonth);
+                    });
+                    break;
+                case 'overdue':
+                    filtered = filtered.filter(task => {
+                        if (!task.due_date) return false;
+                        const dueDate = new Date(task.due_date);
+                        return isBefore(dueDate, today);
+                    });
+                    break;
+                case 'no-due-date':
+                    filtered = filtered.filter(task => !task.due_date);
+                    break;
+            }
+        }
+
+        // Apply user filter
+        if (userFilter) {
+            filtered = filtered.filter(task => 
+                task.users.some(user => String(user.id) === userFilter)
+            );
+        }
+
+        setFilteredTasks(filtered);
+    };
+
+    const handleDateFilter = (filterType: string) => {
+        setSelectedDateFilter(filterType === 'all' ? null : filterType);
+        applyFilters(filterType === 'all' ? undefined : filterType, selectedUser || undefined);
+    };
+
+    const handleUserFilter = (userId: string) => {
+        setSelectedUser(userId === 'all' ? null : userId);
+        applyFilters(selectedDateFilter || undefined, userId === 'all' ? undefined : userId);
+    };
+
+    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={filteredTasks}
+                            searchPlaceholder="Search tasks..."
+                            searchColumn="name"
+                            onRowClick={(task: Task) => router.visit(getRoute(`/tasks/${task.id}`))}
+                            addButton={
+                                <div className="flex items-center gap-2">
+                                    <DropdownMenu>
+                                        <DropdownMenuTrigger asChild>
+                                            <Button variant="outline" size="sm" className="h-8 gap-1">
+                                                <Filter className="h-4 w-4" />
+                                                Filter
+                                                {(selectedUser || selectedDateFilter) && (
+                                                    <Badge variant="secondary" className="ml-1">
+                                                        {[selectedUser, selectedDateFilter].filter(Boolean).length}
+                                                    </Badge>
+                                                )}
+                                            </Button>
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent align="end" className="w-[200px]">
+                                            {(selectedUser || selectedDateFilter) && (
+                                                <>
+                                                    <DropdownMenuItem onClick={clearFilters}>
+                                                        Clear All Filters
+                                                    </DropdownMenuItem>
+                                                    <DropdownMenuSeparator />
+                                                </>
+                                            )}
+                                            <DropdownMenuGroup>
+                                                <DropdownMenuLabel>Filter by Due Date</DropdownMenuLabel>
+                                                <DropdownMenuSeparator />
+                                                <DropdownMenuItem 
+                                                    onClick={() => handleDateFilter('all')}
+                                                    className={selectedDateFilter === null ? 'bg-muted' : ''}
+                                                >
+                                                    All Tasks
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem 
+                                                    onClick={() => handleDateFilter('due-today')}
+                                                    className={selectedDateFilter === 'due-today' ? 'bg-muted' : ''}
+                                                >
+                                                    Due Today
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem 
+                                                    onClick={() => handleDateFilter('due-tomorrow')}
+                                                    className={selectedDateFilter === 'due-tomorrow' ? 'bg-muted' : ''}
+                                                >
+                                                    Due Tomorrow
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem 
+                                                    onClick={() => handleDateFilter('due-this-week')}
+                                                    className={selectedDateFilter === 'due-this-week' ? 'bg-muted' : ''}
+                                                >
+                                                    Due This Week
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem 
+                                                    onClick={() => handleDateFilter('due-this-month')}
+                                                    className={selectedDateFilter === 'due-this-month' ? 'bg-muted' : ''}
+                                                >
+                                                    Due This Month
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem 
+                                                    onClick={() => handleDateFilter('overdue')}
+                                                    className={selectedDateFilter === 'overdue' ? 'bg-muted' : ''}
+                                                >
+                                                    Overdue
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem 
+                                                    onClick={() => handleDateFilter('no-due-date')}
+                                                    className={selectedDateFilter === 'no-due-date' ? 'bg-muted' : ''}
+                                                >
+                                                    No Due Date
+                                                </DropdownMenuItem>
+                                            </DropdownMenuGroup>
+                                            <DropdownMenuSeparator />
+                                            <DropdownMenuGroup>
+                                                <DropdownMenuLabel>Filter by Assignee</DropdownMenuLabel>
+                                                <DropdownMenuSeparator />
+                                                <div className="px-2 py-1">
+                                                    <Select
+                                                        value={selectedUser || 'all'}
+                                                        onValueChange={handleUserFilter}
+                                                    >
+                                                        <SelectTrigger className="w-full">
+                                                            <SelectValue placeholder="Select user..." />
+                                                        </SelectTrigger>
+                                                        <SelectContent>
+                                                            <SelectItem value="all">All Users</SelectItem>
+                                                            {users.map((user) => (
+                                                                <SelectItem key={user.id} value={String(user.id)}>
+                                                                    {user.fname} {user.lname}
+                                                                </SelectItem>
+                                                            ))}
+                                                        </SelectContent>
+                                                    </Select>
+                                                </div>
+                                            </DropdownMenuGroup>
+                                        </DropdownMenuContent>
+                                    </DropdownMenu>
+                                    <Button onClick={() => setIsTaskDialogOpen(true)} className="cursor-pointer">
+                                        <Plus className="mr-2 h-4 w-4" />
+                                        Add Task
+                                    </Button>
+                                </div>
+                            }
+                        />
+                    </CardContent>
+                </Card>
+
+                <CreateTaskDialog
+                    users={users}
+                    open={isTaskDialogOpen}
+                    onOpenChange={setIsTaskDialogOpen}
+                />
+            </div>
+        </AppLayout>
+    );
+}
\ No newline at end of file
diff --git a/resources/js/pages/admin/admin-user-details.tsx b/resources/js/pages/admin/admin-user-details.tsx
new file mode 100644
index 0000000..0740390
--- /dev/null
+++ b/resources/js/pages/admin/admin-user-details.tsx
@@ -0,0 +1,193 @@
+import React, { useState } from 'react';
+import { Head, Link, useForm, router, usePage } from '@inertiajs/react';
+import AppLayout from '@/layouts/app-layout';
+import { type BreadcrumbItem } from '@/types';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { User } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
+import { useRolePrefix } from '@/hooks/use-role-prefix';
+
+interface UserData {
+    id: number;
+    fname: string;
+    mname?: string;
+    lname: string;
+    email: string;
+}
+
+interface PageProps {
+    user: UserData;
+    from_meeting?: number;
+}
+
+export default function UserDetails({ user }: PageProps) {
+    const [isEditing, setIsEditing] = useState(false);
+    const { getRoute } = useRolePrefix();
+    const { data, setData, put, processing, errors, reset } = useForm({
+        fname: user.fname,
+        mname: user.mname || '',
+        lname: user.lname,
+        email: user.email,
+    });
+    const { props } = usePage();
+    const fromMeetingId = props.from_meeting;
+    
+    const breadcrumbs: BreadcrumbItem[] = [
+        {
+            title: 'Meetings',
+            href: '/meetings',
+        },
+        ...(fromMeetingId ? [
+            {
+                title: 'Meeting Details',
+                href: `/meetings/${fromMeetingId}`,
+            }
+        ] : [
+            {
+                title: 'Users',
+                href: '/users',
+            }
+        ]),
+        {
+            title: `${user.fname} ${user.lname}`,
+            href: `/users/${user.id}`,
+        },
+    ];
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        put(getRoute(`/users/${user.id}`), {
+            onSuccess: () => {
+                setIsEditing(false);
+            }
+        });
+    };
+
+    const handleCancel = () => {
+        reset();
+        setIsEditing(false);
+    };
+
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title={`User: ${user.fname} ${user.lname}`} />
+            <div className="container mx-auto py-8">
+                <Card className="w-full max-w-2xl mx-auto bg-white dark:bg-neutral-800 shadow-lg">
+                    <CardHeader className="border-b border-neutral-200 dark:border-neutral-700 pb-6">
+                        <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-4">
+                                <div className="p-3 bg-primary/10 rounded-full">
+                                    <User className="h-6 w-6 text-primary" />
+                                </div>
+                                <CardTitle className="text-2xl font-semibold">{`${user.fname} ${user.lname}`}</CardTitle>
+                            </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 User
+                                        </Button>
+                                        <DeleteConfirmation
+                                            onConfirm={() => router.delete(`/users/${user.id}`)}
+                                            itemType="user"
+                                            itemName={`${user.fname} ${user.lname}`}
+                                        >
+                                            <Button variant="destructive" className="cursor-pointer">
+                                                Delete User
+                                            </Button>
+                                        </DeleteConfirmation>
+                                    </>
+                                )}
+                            </div>
+                        </div>
+                    </CardHeader>
+                    <CardContent className="pt-6">
+                        <div className="space-y-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="fname">First Name</Label>
+                                {isEditing ? (
+                                    <Input
+                                        id="fname"
+                                        value={data.fname}
+                                        onChange={e => setData('fname', e.target.value)}
+                                        error={errors.fname}
+                                        className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-foreground border w-full"
+                                    />
+                                ) : (
+                                    <p className="text-lg">{data.fname}</p>
+                                )}
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="mname">Middle Name</Label>
+                                {isEditing ? (
+                                    <Input
+                                        id="mname"
+                                        value={data.mname}
+                                        onChange={e => setData('mname', e.target.value)}
+                                        error={errors.mname}
+                                        className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-foreground border w-full"
+                                    />
+                                ) : (
+                                    <p className="text-lg">{data.mname || '-'}</p>
+                                )}
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="lname">Last Name</Label>
+                                {isEditing ? (
+                                    <Input
+                                        id="lname"
+                                        value={data.lname}
+                                        onChange={e => setData('lname', e.target.value)}
+                                        error={errors.lname}
+                                        className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-foreground border w-full"
+                                    />
+                                ) : (
+                                    <p className="text-lg">{data.lname}</p>
+                                )}
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="email">Email</Label>
+                                {isEditing ? (
+                                    <Input
+                                        id="email"
+                                        type="email"
+                                        value={data.email}
+                                        onChange={e => setData('email', e.target.value)}
+                                        error={errors.email}
+                                        className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-foreground border w-full"
+                                    />
+                                ) : (
+                                    <p className="text-lg">{data.email}</p>
+                                )}
+                            </div>
+                            <div className="mt-6">
+                                {fromMeetingId ? (
+                                    <Button variant="outline" onClick={() => router.visit(getRoute(`/meetings/${fromMeetingId}`))} className="cursor-pointer">
+                                        ← Back to Meeting
+                                    </Button>
+                                ) : (
+                                    <Button variant="outline" onClick={() => router.visit(getRoute('/users'))} className="cursor-pointer">
+                                        ← Back to Users List
+                                    </Button>
+                                )}
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+        </AppLayout>
+    );
+}
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..3da81b3
--- /dev/null
+++ b/resources/js/pages/admin/admin-user-list.tsx
@@ -0,0 +1,155 @@
+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';
+import { useRolePrefix } from '@/hooks/use-role-prefix';
+
+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.fname} {user.lname}</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);
+    const { getRoute } = useRolePrefix();
+
+    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(getRoute(`/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/auth/register.tsx b/resources/js/pages/auth/register.tsx
index 34d6801..d07bd2c 100644
--- a/resources/js/pages/auth/register.tsx
+++ b/resources/js/pages/auth/register.tsx
@@ -1,119 +1,148 @@
-import { Head, useForm } from '@inertiajs/react';
-import { LoaderCircle } from 'lucide-react';
-import { FormEventHandler } from 'react';
-
-import InputError from '@/components/input-error';
-import TextLink from '@/components/text-link';
+import { useEffect } from 'react';
+import { Head, Link, useForm } from '@inertiajs/react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import AuthLayout from '@/layouts/auth-layout';
-
-type RegisterForm = {
-    name: string;
-    email: string;
-    password: string;
-    password_confirmation: string;
-};
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { InputError } from '@/components/input-error';
 
 export default function Register() {
-    const { data, setData, post, processing, errors, reset } = useForm<Required<RegisterForm>>({
-        name: '',
+    const { data, setData, post, processing, errors, reset } = useForm({
+        fname: '',
+        mname: '',
+        lname: '',
         email: '',
         password: '',
         password_confirmation: '',
     });
 
-    const submit: FormEventHandler = (e) => {
+    useEffect(() => {
+        return () => {
+            reset('password', 'password_confirmation');
+        };
+    }, []);
+
+    const submit = (e: React.FormEvent) => {
         e.preventDefault();
-        post(route('register'), {
-            onFinish: () => reset('password', 'password_confirmation'),
-        });
+        post(route('register'));
     };
 
     return (
-        <AuthLayout title="Create an account" description="Enter your details below to create your account">
+        <>
             <Head title="Register" />
-            <form className="flex flex-col gap-6" onSubmit={submit}>
-                <div className="grid gap-6">
-                    <div className="grid gap-2">
-                        <Label htmlFor="name">Name</Label>
-                        <Input
-                            id="name"
-                            type="text"
-                            required
-                            autoFocus
-                            tabIndex={1}
-                            autoComplete="name"
-                            value={data.name}
-                            onChange={(e) => setData('name', e.target.value)}
-                            disabled={processing}
-                            placeholder="Full name"
-                        />
-                        <InputError message={errors.name} className="mt-2" />
-                    </div>
+            <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
+                <Card className="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-lg">
+                    <CardHeader>
+                        <CardTitle>Register</CardTitle>
+                        <CardDescription>Create a new account to get started.</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <form onSubmit={submit} className="space-y-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="fname">First Name</Label>
+                                <Input
+                                    id="fname"
+                                    type="text"
+                                    name="fname"
+                                    value={data.fname}
+                                    className="mt-1 block w-full"
+                                    autoComplete="given-name"
+                                    onChange={(e) => setData('fname', e.target.value)}
+                                    required
+                                />
+                                <InputError message={errors.fname} className="mt-2" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="mname">Middle Name</Label>
+                                <Input
+                                    id="mname"
+                                    type="text"
+                                    name="mname"
+                                    value={data.mname}
+                                    className="mt-1 block w-full"
+                                    autoComplete="additional-name"
+                                    onChange={(e) => setData('mname', e.target.value)}
+                                />
+                                <InputError message={errors.mname} className="mt-2" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="lname">Last Name</Label>
+                                <Input
+                                    id="lname"
+                                    type="text"
+                                    name="lname"
+                                    value={data.lname}
+                                    className="mt-1 block w-full"
+                                    autoComplete="family-name"
+                                    onChange={(e) => setData('lname', e.target.value)}
+                                    required
+                                />
+                                <InputError message={errors.lname} className="mt-2" />
+                            </div>
 
-                    <div className="grid gap-2">
-                        <Label htmlFor="email">Email address</Label>
-                        <Input
-                            id="email"
-                            type="email"
-                            required
-                            tabIndex={2}
-                            autoComplete="email"
-                            value={data.email}
-                            onChange={(e) => setData('email', e.target.value)}
-                            disabled={processing}
-                            placeholder="email@example.com"
-                        />
-                        <InputError message={errors.email} />
-                    </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="email">Email</Label>
+                                <Input
+                                    id="email"
+                                    type="email"
+                                    name="email"
+                                    value={data.email}
+                                    className="mt-1 block w-full"
+                                    autoComplete="username"
+                                    onChange={(e) => setData('email', e.target.value)}
+                                    required
+                                />
+                                <InputError message={errors.email} className="mt-2" />
+                            </div>
 
-                    <div className="grid gap-2">
-                        <Label htmlFor="password">Password</Label>
-                        <Input
-                            id="password"
-                            type="password"
-                            required
-                            tabIndex={3}
-                            autoComplete="new-password"
-                            value={data.password}
-                            onChange={(e) => setData('password', e.target.value)}
-                            disabled={processing}
-                            placeholder="Password"
-                        />
-                        <InputError message={errors.password} />
-                    </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="password">Password</Label>
+                                <Input
+                                    id="password"
+                                    type="password"
+                                    name="password"
+                                    value={data.password}
+                                    className="mt-1 block w-full"
+                                    autoComplete="new-password"
+                                    onChange={(e) => setData('password', e.target.value)}
+                                    required
+                                />
+                                <InputError message={errors.password} className="mt-2" />
+                            </div>
 
-                    <div className="grid gap-2">
-                        <Label htmlFor="password_confirmation">Confirm password</Label>
-                        <Input
-                            id="password_confirmation"
-                            type="password"
-                            required
-                            tabIndex={4}
-                            autoComplete="new-password"
-                            value={data.password_confirmation}
-                            onChange={(e) => setData('password_confirmation', e.target.value)}
-                            disabled={processing}
-                            placeholder="Confirm password"
-                        />
-                        <InputError message={errors.password_confirmation} />
-                    </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="password_confirmation">Confirm Password</Label>
+                                <Input
+                                    id="password_confirmation"
+                                    type="password"
+                                    name="password_confirmation"
+                                    value={data.password_confirmation}
+                                    className="mt-1 block w-full"
+                                    autoComplete="new-password"
+                                    onChange={(e) => setData('password_confirmation', e.target.value)}
+                                    required
+                                />
+                                <InputError message={errors.password_confirmation} className="mt-2" />
+                            </div>
 
-                    <Button type="submit" className="mt-2 w-full" tabIndex={5} disabled={processing}>
-                        {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
-                        Create account
-                    </Button>
-                </div>
+                            <div className="flex items-center justify-end mt-4">
+                                <Link
+                                    href={route('login')}
+                                    className="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
+                                >
+                                    Already registered?
+                                </Link>
 
-                <div className="text-muted-foreground text-center text-sm">
-                    Already have an account?{' '}
-                    <TextLink href={route('login')} tabIndex={6}>
-                        Log in
-                    </TextLink>
-                </div>
-            </form>
-        </AuthLayout>
+                                <Button className="ml-4" disabled={processing}>
+                                    Register
+                                </Button>
+                            </div>
+                        </form>
+                    </CardContent>
+                </Card>
+            </div>
+        </>
     );
 }
diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx
deleted file mode 100644
index 083954a..0000000
--- a/resources/js/pages/dashboard.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { PlaceholderPattern } from '@/components/ui/placeholder-pattern';
-import AppLayout from '@/layouts/app-layout';
-import { type BreadcrumbItem } from '@/types';
-import { Head } from '@inertiajs/react';
-
-const breadcrumbs: BreadcrumbItem[] = [
-    {
-        title: 'Dashboard',
-        href: '/dashboard',
-    },
-];
-
-export default function Dashboard() {
-    return (
-        <AppLayout breadcrumbs={breadcrumbs}>
-            <Head title="Dashboard" />
-            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
-                <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                    <div className="border-sidebar-border/70 dark:border-sidebar-border relative aspect-video overflow-hidden rounded-xl border">
-                        <PlaceholderPattern className="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" />
-                    </div>
-                    <div className="border-sidebar-border/70 dark:border-sidebar-border relative aspect-video overflow-hidden rounded-xl border">
-                        <PlaceholderPattern className="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" />
-                    </div>
-                    <div className="border-sidebar-border/70 dark:border-sidebar-border relative aspect-video overflow-hidden rounded-xl border">
-                        <PlaceholderPattern className="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" />
-                    </div>
-                </div>
-                <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">
-                    <PlaceholderPattern className="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" />
-                </div>
-            </div>
-        </AppLayout>
-    );
-}
diff --git a/resources/js/pages/member/member-dashboard.tsx b/resources/js/pages/member/member-dashboard.tsx
new file mode 100644
index 0000000..9eddd39
--- /dev/null
+++ b/resources/js/pages/member/member-dashboard.tsx
@@ -0,0 +1,108 @@
+import { Head } from '@inertiajs/react';
+import AppLayout from '@/layouts/app-layout';
+import { type BreadcrumbItem } from '@/types';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { AlertCircle, CheckCircle2 } from 'lucide-react';
+import { PerformanceMetrics } from '@/components/dashboard/member-performance-metrics';
+import { MemberRecentActivity } from '@/components/dashboard/member-recent-activity';
+import { MemberWatchList } from '@/components/dashboard/member-watch-list';
+import { Timeline } from '@/types/timeline';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Dashboard',
+        href: '/dashboard',
+    },
+];
+
+const alerts = [
+    { id: 1, type: 'Overdue', message: 'Task "Submit Report" is overdue!', icon: <AlertCircle className="h-4 w-4 text-red-500" /> },
+    { id: 2, type: 'New', message: 'You have been assigned a new task.', icon: <CheckCircle2 className="h-4 w-4 text-green-500" /> },
+];
+
+interface Task {
+    id: number;
+    name: string;
+    status: 'pending' | 'in_progress' | 'completed';
+    due_date: string;
+    priority: 'low' | 'medium' | 'high';
+}
+
+interface DashboardProps {
+    taskStats: {
+        total: number;
+        completed: number;
+        in_progress: number;
+        pending: number;
+    };
+    recentActivities: Timeline[];
+    tasks: Task[];
+}
+
+export default function MemberDashboard({ taskStats, recentActivities, tasks }: DashboardProps) {
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title="Dashboard" />
+            <div className="h-[calc(100vh-4rem)] p-2 overflow-hidden">
+                <div className="grid grid-cols-1 md:grid-cols-[1.5fr_1.5fr] gap-4 h-full min-h-0 overflow-hidden">
+                    {/* Left Column */}
+                    <div className="flex flex-col gap-4 h-full min-h-0">
+                        {/* Recent Activity */}
+                        <Card className="flex-1 py-3 min-h-0 ">
+                            <CardHeader className="px-3 gap-0">
+                                <CardTitle className="text-base mt-0 mb-0">Recent Activity</CardTitle>
+                            </CardHeader>
+                            <CardContent className="overflow-y-auto px-0 h-full min-h-0">
+                                <MemberRecentActivity activities={recentActivities} />
+                            </CardContent>
+                        </Card>
+
+                        {/* Watch List */}
+                        <Card className="flex-1 py-3 min-h-0">
+                            <CardHeader className="px-3 gap-0">
+                                <CardTitle className="text-base mt-0 mb-0">Watch List</CardTitle>
+                            </CardHeader>
+                            <CardContent className="overflow-y-auto px-1 h-full min-h-0">
+                                <MemberWatchList tasks={tasks} />
+                            </CardContent>
+                        </Card>
+                    </div>
+
+                    {/* Right Column */}
+                    <div className="flex flex-col gap-4 h-full">
+                        {/* Performance Metric */}
+                        <Card className="py-3">
+                            <CardHeader className="px-3 gap-0">
+                                <CardTitle className="text-base mt-0 mb-0">Task Overview</CardTitle>
+                            </CardHeader>
+                            <CardContent className="px-3">
+                                <PerformanceMetrics taskStats={taskStats} />
+                            </CardContent>
+                        </Card>
+                        
+                        {/* Alerts */}
+                        <Card className="flex-1 py-3 min-h-0">
+                            <CardHeader className="px-3 gap-0">
+                                <CardTitle className="text-base mt-0 mb-0">Alerts</CardTitle>
+                            </CardHeader>
+                            <CardContent className="overflow-y-auto px-3 h-full min-h-0">
+                                {alerts.length === 0 ? (
+                                    <div className="text-muted-foreground text-sm">No alerts</div>
+                                ) : (
+                                    <ul className="space-y-3">
+                                        {alerts.map(alert => (
+                                            <li key={alert.id} className="flex items-center gap-3">
+                                                {alert.icon}
+                                                <span className="text-sm">{alert.message}</span>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                )}
+                            </CardContent>
+                        </Card>
+                    </div>
+                </div>
+            </div>
+        </AppLayout>
+    );
+} 
\ No newline at end of file
diff --git a/resources/js/pages/member/member-meeting-details.tsx b/resources/js/pages/member/member-meeting-details.tsx
new file mode 100644
index 0000000..7d820da
--- /dev/null
+++ b/resources/js/pages/member/member-meeting-details.tsx
@@ -0,0 +1,166 @@
+import { Head, usePage, router } from '@inertiajs/react';
+import AppLayout from '@/layouts/app-layout';
+import { type BreadcrumbItem, type PageProps } from '@/types';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { format } from 'date-fns';
+import { type Meeting } from '@/types/meeting';
+import { type User } from '@/types/user';
+import { type Task } from '@/types/task';
+import { useRolePrefix } from '@/hooks/use-role-prefix';
+import { ArrowLeft, Calendar, Users, ListTodo } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from "@/lib/utils";
+
+interface MemberMeetingDetailsProps extends 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 MemberMeetingDetails({ meeting, users, tasks }: MemberMeetingDetailsProps) {
+    const { getRoute } = useRolePrefix();
+
+    const breadcrumbs: BreadcrumbItem[] = [
+        {
+            title: 'Meetings',
+            href: getRoute('/meetings'),
+        },
+        {
+            title: meeting.title,
+            href: getRoute(`/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>
+                    <Button
+                        variant="outline"
+                        onClick={() => router.visit(getRoute('/meetings'))}
+                        className="cursor-pointer"
+                    >
+                        <ArrowLeft className="h-4 w-4 mr-2" />
+                        Back to Meetings
+                    </Button>
+                </div>
+
+                <div className="grid grid-cols-3 gap-6">
+                    <Card className="col-span-3 shadow-sm">
+                        <CardHeader className="pb-4">
+                            <CardTitle className="text-lg font-medium">Meeting Details</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="space-y-8">
+                                <div className="grid grid-cols-3 gap-8">
+                                    <div className="col-span-2 space-y-2 w-full">
+                                        <div className="text-sm font-medium">Agenda</div>
+                                        <div className="min-h-[calc(100vh-400px)] text-sm bg-muted/30 p-4 rounded-md border w-full whitespace-pre-wrap">
+                                            {meeting.agenda_text || 'No agenda set'}
+                                        </div>
+                                    </div>
+
+                                    <div className="space-y-8">
+                                        <div className="space-y-2 w-full">
+                                            <div className="text-sm font-medium">Meeting Title</div>
+                                            <div className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-foreground border w-full">
+                                                {meeting.title}
+                                            </div>
+                                        </div>
+
+                                        <div className="space-y-2 w-full">
+                                            <div className="text-sm font-medium">Meeting Type</div>
+                                            <div className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center border w-full">
+                                                <Badge className={cn(typeColors[meeting.type as MeetingType], "text-xs font-medium px-2 py-0.5 mr-2")}>
+                                                    {meeting.type}
+                                                </Badge>
+                                            </div>
+                                        </div>
+
+                                        <div className="space-y-2 w-full">
+                                            <div className="text-sm font-medium">Date & Time</div>
+                                            <div className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-muted-foreground border w-full">
+                                                <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 w-full">
+                                            <div className="flex items-center justify-between">
+                                                <div className="flex items-center gap-2">
+                                                    <div className="text-sm font-medium">Attendees</div>
+                                                    <span className="text-sm text-muted-foreground">
+                                                        ({meeting.users.length})
+                                                    </span>
+                                                </div>
+                                            </div>
+                                            <div className="flex flex-wrap gap-1.5">
+                                                {meeting.users.map((user) => (
+                                                    <Badge 
+                                                        key={user.id} 
+                                                        variant="secondary" 
+                                                        className="text-sm bg-muted/50"
+                                                    >
+                                                        {user.fname} {user.lname}
+                                                    </Badge>
+                                                ))}
+                                            </div>
+                                        </div>
+
+                                        {meeting.tasks && meeting.tasks.length > 0 && (
+                                            <div className="space-y-2 w-full">
+                                                <div className="flex items-center justify-between">
+                                                    <div className="flex items-center gap-2">
+                                                        <div className="text-sm font-medium">Related Tasks</div>
+                                                        <span className="text-sm text-muted-foreground">
+                                                            ({meeting.tasks.length})
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                                <div className="space-y-2">
+                                                    {meeting.tasks.map((task) => (
+                                                        <div
+                                                            key={task.id}
+                                                            className="flex items-center justify-between p-2 rounded-lg border bg-muted/30"
+                                                        >
+                                                            <div className="flex items-center gap-2">
+                                                                <ListTodo className="h-4 w-4 text-muted-foreground" />
+                                                                <span className="text-sm">{task.name}</span>
+                                                            </div>
+                                                            <Badge variant="outline" className="text-xs">
+                                                                {task.status.split('_').map(word => 
+                                                                    word.charAt(0).toUpperCase() + word.slice(1)
+                                                                ).join(' ')}
+                                                            </Badge>
+                                                        </div>
+                                                    ))}
+                                                </div>
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+            </div>
+        </AppLayout>
+    );
+} 
\ No newline at end of file
diff --git a/resources/js/pages/member/member-meeting-list.tsx b/resources/js/pages/member/member-meeting-list.tsx
new file mode 100644
index 0000000..d5f5b69
--- /dev/null
+++ b/resources/js/pages/member/member-meeting-list.tsx
@@ -0,0 +1,350 @@
+import { Head, usePage, router } from '@inertiajs/react';
+import AppLayout from '@/layouts/app-layout';
+import { type BreadcrumbItem, type PageProps } from '@/types';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Plus, ArrowUpDown, Filter, Calendar } from 'lucide-react';
+import { DataTable } from '@/components/data-table';
+import { ColumnDef } from '@tanstack/react-table';
+import { useState, useEffect } from 'react';
+import { format, addDays, isAfter, isBefore, startOfDay, endOfDay } from 'date-fns';
+import { type Meeting } from '@/types/meeting';
+import { type User } from '@/types/user';
+import { type Task } from '@/types/task';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+    DropdownMenuGroup,
+} from "@/components/ui/dropdown-menu";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { useRolePrefix } from '@/hooks/use-role-prefix';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Meetings',
+        href: '/member/meetings',
+    },
+];
+
+interface MemberMeetingListProps extends 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;
+            const now = new Date();
+            const meetingDate = new Date(meeting.date);
+            const isUpcoming = isAfter(meetingDate, now);
+            return (
+                <div>
+                    <div className="font-medium">{meeting.title}</div>
+                    <div>
+                        <span
+                            className={
+                                isUpcoming
+                                    ? "px-1.5 py-0.5 rounded text-[10px] font-semibold bg-green-100 text-green-800"
+                                    : "px-1.5 py-0.5 rounded text-[10px] font-semibold bg-gray-200 text-gray-700"
+                            }
+                        >
+                            {isUpcoming ? "Upcoming" : "Past"}
+                        </span>
+                    </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 (
+                <span className="text-sm text-muted-foreground">{row.getValue("type")}</span>
+            );
+        },
+    },
+    {
+        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.fname} {user.lname}
+                        </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 MemberMeetingList({ meetings, users, tasks }: MemberMeetingListProps) {
+    const { getRoute } = useRolePrefix();
+    const [isMeetingDialogOpen, setIsMeetingDialogOpen] = useState(false);
+    const [filteredMeetings, setFilteredMeetings] = useState(meetings);
+    const [selectedDateFilter, setSelectedDateFilter] = useState<string | null>(null);
+    const [meetingView, setMeetingView] = useState<'upcoming' | 'all'>('upcoming');
+    const { auth } = usePage().props as unknown as PageProps;
+
+    // Update filtered meetings when meetings prop changes
+    useEffect(() => {
+        setFilteredMeetings(meetings);
+    }, [meetings]);
+
+    const clearFilters = () => {
+        setSelectedDateFilter(null);
+        setFilteredMeetings(meetings);
+    };
+
+    const applyFilters = (dateFilter?: string) => {
+        let filtered = [...meetings];
+
+        // Apply date filter
+        if (dateFilter) {
+            const today = new Date();
+            const tomorrow = addDays(today, 1);
+            const endOfWeek = addDays(today, 7);
+            const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+
+            switch (dateFilter) {
+                case 'today':
+                    filtered = filtered.filter(meeting => {
+                        const meetingDate = new Date(meeting.date);
+                        return meetingDate >= startOfDay(today) && meetingDate <= endOfDay(today);
+                    });
+                    break;
+                case 'tomorrow':
+                    filtered = filtered.filter(meeting => {
+                        const meetingDate = new Date(meeting.date);
+                        return meetingDate >= startOfDay(tomorrow) && meetingDate <= endOfDay(tomorrow);
+                    });
+                    break;
+                case 'this-week':
+                    filtered = filtered.filter(meeting => {
+                        const meetingDate = new Date(meeting.date);
+                        return meetingDate >= startOfDay(today) && meetingDate <= endOfDay(endOfWeek);
+                    });
+                    break;
+                case 'this-month':
+                    filtered = filtered.filter(meeting => {
+                        const meetingDate = new Date(meeting.date);
+                        return meetingDate >= startOfDay(today) && meetingDate <= endOfDay(endOfMonth);
+                    });
+                    break;
+            }
+        }
+
+        // Apply view filter
+        if (meetingView === 'upcoming') {
+            const now = new Date();
+            filtered = filtered.filter(meeting => isAfter(new Date(meeting.date), now));
+        }
+
+        setFilteredMeetings(filtered);
+    };
+
+    const handleDateFilter = (filterType: string) => {
+        setSelectedDateFilter(filterType);
+        applyFilters(filterType);
+    };
+
+    const handleMeetingViewChange = (view: 'upcoming' | 'all') => {
+        setMeetingView(view);
+        applyFilters(selectedDateFilter || undefined);
+    };
+
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title="Meetings" />
+            <div className="flex h-[calc(100vh-4rem)] flex-1 flex-col p-4">
+                <div className="flex items-center justify-between mb-4">
+                    <h1 className="text-2xl font-semibold">Meetings</h1>
+                    <div className="flex items-center gap-2">
+                        <Select
+                            value={meetingView}
+                            onValueChange={(value) => handleMeetingViewChange(value as 'upcoming' | 'all')}
+                        >
+                            <SelectTrigger className="w-[180px] h-8 cursor-pointer">
+                                <SelectValue placeholder="View meetings" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem className="cursor-pointer" value="upcoming">Upcoming Meetings</SelectItem>
+                                <SelectItem className="cursor-pointer" value="all">All Meetings</SelectItem>
+                            </SelectContent>
+                        </Select>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            className="h-8 gap-1 cursor-pointer"
+                            onClick={() => setIsMeetingDialogOpen(true)}
+                        >
+                            <Plus className="h-4 w-4" />
+                            Add Meeting
+                        </Button>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button variant="outline" size="sm" className="h-8 gap-1 cursor-pointer">
+                                    <Filter className="h-4 w-4" />
+                                    Filter
+                                    {selectedDateFilter && (
+                                        <Badge variant="secondary" className="ml-1">
+                                            1
+                                        </Badge>
+                                    )}
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end" className="w-[200px]">
+                                <DropdownMenuLabel>Filter by Date</DropdownMenuLabel>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuGroup>
+                                    <DropdownMenuItem onClick={() => handleDateFilter('today')}>
+                                        Today
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem onClick={() => handleDateFilter('tomorrow')}>
+                                        Tomorrow
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem onClick={() => handleDateFilter('this-week')}>
+                                        This Week
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem onClick={() => handleDateFilter('this-month')}>
+                                        This Month
+                                    </DropdownMenuItem>
+                                </DropdownMenuGroup>
+                                {selectedDateFilter && (
+                                    <>
+                                        <DropdownMenuSeparator />
+                                        <DropdownMenuItem onClick={clearFilters}>
+                                            Clear Filters
+                                        </DropdownMenuItem>
+                                    </>
+                                )}
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </div>
+                </div>
+
+                <Card className="flex-1 overflow-hidden">
+                    <CardContent className="h-full p-0">
+                        <div className="h-full flex flex-col">
+                            <div className="p-6 pb-0">
+                                <DataTable
+                                    columns={columns}
+                                    data={filteredMeetings}
+                                    searchPlaceholder="Search meetings..."
+                                    searchColumn="title"
+                                    onRowClick={(meeting: Meeting) => router.visit(getRoute(`/meetings/${meeting.id}`), {
+                                        preserveState: true,
+                                        preserveScroll: true,
+                                    })}
+                                />
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+        </AppLayout>
+    );
+} 
\ No newline at end of file
diff --git a/resources/js/pages/member/member-task-details.tsx b/resources/js/pages/member/member-task-details.tsx
new file mode 100644
index 0000000..ad467d0
--- /dev/null
+++ b/resources/js/pages/member/member-task-details.tsx
@@ -0,0 +1,262 @@
+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 } from '@/types/task';
+import { useState } from 'react';
+import { router } from '@inertiajs/react';
+import { format } from 'date-fns';
+import { useForm } from '@inertiajs/react';
+import { Calendar, Users, AlertCircle } from "lucide-react";
+import { useRolePrefix } from '@/hooks/use-role-prefix';
+
+interface PageProps {
+    task: Task;
+}
+
+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 }: PageProps) {
+    const { getRoute } = useRolePrefix();
+    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
+    });
+    
+    const breadcrumbs: BreadcrumbItem[] = [
+        {
+            title: 'Tasks',
+            href: '/member/tasks',
+        },
+        {
+            title: task.name,
+            href: '#',
+        },
+    ];
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        put(getRoute(`/tasks/${task.id}`), {
+            onSuccess: () => {
+                setIsEditing(false);
+            },
+            preserveScroll: true
+        });
+    };
+
+    const handleCancel = () => {
+        setIsEditing(false);
+        setData({
+            name: task.name,
+            description: task.description,
+            status: task.status,
+            priority: task.priority,
+            due_date: task.due_date
+        });
+    };
+
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title={`Task: ${task.name}`} />
+            <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">{task.name}</h1>
+                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                            <Calendar className="h-4 w-4" />
+                            {task.due_date ? format(new Date(task.due_date), 'MMMM d, yyyy') : 'No due date'}
+                        </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"
+                                >
+                                    {processing ? 'Saving...' : 'Save Changes'}
+                                </Button>
+                            </>
+                        ) : (
+                            <Button onClick={() => setIsEditing(true)} className="cursor-pointer">
+                                Edit Task
+                            </Button>
+                        )}
+                    </div>
+                </div>
+
+                <div className="grid grid-cols-3 gap-6">
+                    <Card className="col-span-3 shadow-sm">
+                        <CardHeader className="pb-4">
+                            <CardTitle className="text-lg font-medium">Task Details</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <form onSubmit={handleSubmit} className="space-y-8">
+                                <div className="grid grid-cols-2 gap-8">
+                                    <div className="space-y-8">
+                                        <div className="space-y-2 w-full">
+                                            <Label htmlFor="name" className="text-sm font-medium">Task Name</Label>
+                                            {isEditing ? (
+                                                <Input
+                                                    id="name"
+                                                    value={data.name}
+                                                    onChange={e => setData('name', e.target.value)}
+                                                    error={errors.name}
+                                                    className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-foreground border w-full"
+                                                />
+                                            ) : (
+                                                <div className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-foreground border w-full">
+                                                    {task.name}
+                                                </div>
+                                            )}
+                                        </div>
+
+                                        <div className="space-y-2 w-full">
+                                            <Label htmlFor="description" className="text-sm font-medium">Description</Label>
+                                            {isEditing ? (
+                                                <Textarea
+                                                    id="description"
+                                                    value={data.description}
+                                                    onChange={e => setData('description', e.target.value)}
+                                                    error={errors.description}
+                                                    className="min-h-[120px] text-sm bg-muted/30 p-4 rounded-md border w-full"
+                                                />
+                                            ) : (
+                                                <div className="min-h-[120px] text-sm bg-muted/30 p-4 rounded-md border w-full whitespace-pre-wrap">
+                                                    {task.description || 'No description provided'}
+                                                </div>
+                                            )}
+                                        </div>
+
+                                        <div className="space-y-2 w-full">
+                                            <Label className="text-sm font-medium">Assigned Users</Label>
+                                            <div className="flex flex-wrap gap-1.5">
+                                                {task.users.length > 0 ? (
+                                                    task.users.map((user) => (
+                                                        <Badge 
+                                                            key={user.id} 
+                                                            variant="secondary" 
+                                                            className="text-sm bg-muted/50"
+                                                        >
+                                                            {user.fname} {user.lname}
+                                                        </Badge>
+                                                    ))
+                                                ) : (
+                                                    <span className="text-muted-foreground text-sm">No users assigned</span>
+                                                )}
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div className="space-y-8">
+                                        <div className="space-y-2 w-full">
+                                            <Label htmlFor="status" className="text-sm font-medium">Status</Label>
+                                            {isEditing ? (
+                                                <Select
+                                                    value={data.status}
+                                                    onValueChange={(value) => setData('status', value as TaskStatus)}
+                                                >
+                                                    <SelectTrigger className="h-10 text-sm bg-muted/30">
+                                                        <SelectValue />
+                                                    </SelectTrigger>
+                                                    <SelectContent>
+                                                        <SelectItem value="pending">Pending</SelectItem>
+                                                        <SelectItem value="in_progress">In Progress</SelectItem>
+                                                        <SelectItem value="completed">Completed</SelectItem>
+                                                    </SelectContent>
+                                                </Select>
+                                            ) : (
+                                                <div className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center border w-full">
+                                                    <Badge className={statusColors[task.status]}>
+                                                        {task.status.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}
+                                                    </Badge>
+                                                </div>
+                                            )}
+                                        </div>
+
+                                        <div className="space-y-2 w-full">
+                                            <Label htmlFor="priority" className="text-sm font-medium">Priority</Label>
+                                            {isEditing ? (
+                                                <Select
+                                                    value={data.priority}
+                                                    onValueChange={(value) => setData('priority', value as TaskPriority)}
+                                                >
+                                                    <SelectTrigger className="h-10 text-sm bg-muted/30">
+                                                        <SelectValue />
+                                                    </SelectTrigger>
+                                                    <SelectContent>
+                                                        <SelectItem value="low">Low</SelectItem>
+                                                        <SelectItem value="medium">Medium</SelectItem>
+                                                        <SelectItem value="high">High</SelectItem>
+                                                    </SelectContent>
+                                                </Select>
+                                            ) : (
+                                                <div className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center border w-full">
+                                                    <Badge className={priorityColors[task.priority]}>
+                                                        {task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}
+                                                    </Badge>
+                                                </div>
+                                            )}
+                                        </div>
+
+                                        <div className="space-y-2 w-full">
+                                            <Label htmlFor="due_date" className="text-sm font-medium">Due Date</Label>
+                                            {isEditing ? (
+                                                <div className="relative">
+                                                    <Input
+                                                        type="date"
+                                                        id="due_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 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-muted-foreground border w-full pl-10"
+                                                    />
+                                                    <Calendar className="h-4 w-4 absolute left-4 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
+                                                </div>
+                                            ) : (
+                                                <div className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-muted-foreground border w-full">
+                                                    <Calendar className="h-4 w-4 mr-2" />
+                                                    {task.due_date ? format(new Date(task.due_date), 'MMMM d, yyyy') : 'No due date'}
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+                            </form>
+                        </CardContent>
+                    </Card>
+                </div>
+
+                <div className="mt-6">
+                    <Button variant="outline" onClick={() => router.visit(getRoute('/tasks'))} className="cursor-pointer">
+                        ← Back to Tasks List
+                    </Button>
+                </div>
+            </div>
+        </AppLayout>
+    );
+}
diff --git a/resources/js/pages/member/member-task-list.tsx b/resources/js/pages/member/member-task-list.tsx
new file mode 100644
index 0000000..7bb60dd
--- /dev/null
+++ b/resources/js/pages/member/member-task-list.tsx
@@ -0,0 +1,435 @@
+import { Head, usePage, router } from '@inertiajs/react';
+import AppLayout from '@/layouts/app-layout';
+import { type BreadcrumbItem, type PageProps } from '@/types';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Plus, ArrowUpDown, Filter, Calendar } from 'lucide-react';
+import { DataTable } from '@/components/data-table';
+import { ColumnDef } from '@tanstack/react-table';
+import { useState, useEffect } from 'react';
+import { format, addDays, isAfter, isBefore, startOfDay, endOfDay } from 'date-fns';
+import { type Task, type TaskStatus, type User as TaskUser } from '@/types/task';
+import { MemberTaskStats } from '@/components/tasks/member-task-stats';
+import { CreateTaskDialog } from '@/components/tasks/create-task-dialog';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+    DropdownMenuGroup,
+} from "@/components/ui/dropdown-menu";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { useRolePrefix } from '@/hooks/use-role-prefix';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Tasks',
+        href: '/member/tasks',
+    },
+];
+
+interface MemberTaskListProps extends PageProps {
+    tasks: Task[];
+    users: TaskUser[];
+}
+
+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 className="flex flex-col">
+                    <span className="font-medium">{task.name}</span>
+                    {task.description && (
+                        <span className="text-sm text-muted-foreground line-clamp-1">
+                            {task.description}
+                        </span>
+                    )}
+                </div>
+            )
+        },
+    },
+    {
+        accessorKey: "priority",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Priority
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const priority = row.getValue("priority") as string
+            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'
+            }
+            return (
+                <Badge className={priorityColors[priority as keyof typeof priorityColors]}>
+                    {priority.charAt(0).toUpperCase() + priority.slice(1)}
+                </Badge>
+            )
+        },
+    },
+    {
+        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 task = row.original;
+            const statusColors = {
+                pending: 'bg-yellow-100 text-yellow-800',
+                in_progress: 'bg-blue-100 text-blue-800',
+                completed: 'bg-green-100 text-green-800',
+            };
+
+            const handleStatusChange = (newStatus: 'pending' | 'in_progress' | 'completed') => {
+                router.put(`/member/tasks/${task.id}`, {
+                    status: newStatus
+                }, {
+                    preserveState: true,
+                    preserveScroll: true,
+                    onSuccess: () => {
+                        // Refresh the page data after status update
+                        router.reload({ only: ['tasks'] });
+                    }
+                });
+            };
+
+            return (
+                <div onClick={(e) => e.stopPropagation()}>
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button 
+                                variant="ghost" 
+                                className={`h-6 px-2 py-1 ${statusColors[task.status]} hover:opacity-80`}
+                            >
+                                {task.status.split('_').map(word => 
+                                    word.charAt(0).toUpperCase() + word.slice(1)
+                                ).join(' ')}
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start">
+                            <DropdownMenuLabel>Change Status</DropdownMenuLabel>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuGroup>
+                                <DropdownMenuItem 
+                                    onClick={() => handleStatusChange('pending')}
+                                    className="cursor-pointer"
+                                >
+                                    Pending
+                                </DropdownMenuItem>
+                                <DropdownMenuItem 
+                                    onClick={() => handleStatusChange('in_progress')}
+                                    className="cursor-pointer"
+                                >
+                                    In Progress
+                                </DropdownMenuItem>
+                                <DropdownMenuItem 
+                                    onClick={() => handleStatusChange('completed')}
+                                    className="cursor-pointer"
+                                >
+                                    Completed
+                                </DropdownMenuItem>
+                            </DropdownMenuGroup>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                </div>
+            );
+        },
+    },
+    {
+        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.fname} {user.lname}
+                        </Badge>
+                    ))}
+                </div>
+            )
+        },
+    },
+];
+
+export default function MemberTaskList({ tasks, users }: MemberTaskListProps) {
+    const { getRoute } = useRolePrefix();
+    const [isTaskDialogOpen, setIsTaskDialogOpen] = useState(false);
+    const [filteredTasks, setFilteredTasks] = useState(tasks);
+    const [selectedDateFilter, setSelectedDateFilter] = useState<string | null>(null);
+    const [taskView, setTaskView] = useState<'assigned' | 'all'>('assigned');
+    const { auth } = usePage().props as unknown as PageProps;
+
+    // Update filtered tasks when tasks prop changes
+    useEffect(() => {
+        setFilteredTasks(tasks);
+    }, [tasks]);
+
+    const clearFilters = () => {
+        setSelectedDateFilter(null);
+        setFilteredTasks(tasks);
+    };
+
+    const applyFilters = (dateFilter?: string) => {
+        let filtered = tasks;
+
+        // Apply date filter
+        if (dateFilter) {
+            const now = new Date();
+            const today = startOfDay(now);
+            const tomorrow = endOfDay(addDays(today, 1));
+            const nextWeek = endOfDay(addDays(today, 7));
+            const nextMonth = endOfDay(addDays(today, 30));
+
+            switch (dateFilter) {
+                case 'due-today':
+                    filtered = filtered.filter(task => {
+                        if (!task.due_date) return false;
+                        const dueDate = new Date(task.due_date);
+                        return isAfter(dueDate, today) && isBefore(dueDate, tomorrow);
+                    });
+                    break;
+                case 'due-tomorrow':
+                    filtered = filtered.filter(task => {
+                        if (!task.due_date) return false;
+                        const dueDate = new Date(task.due_date);
+                        return isAfter(dueDate, tomorrow) && isBefore(dueDate, addDays(tomorrow, 1));
+                    });
+                    break;
+                case 'due-this-week':
+                    filtered = filtered.filter(task => {
+                        if (!task.due_date) return false;
+                        const dueDate = new Date(task.due_date);
+                        return isAfter(dueDate, today) && isBefore(dueDate, nextWeek);
+                    });
+                    break;
+                case 'due-this-month':
+                    filtered = filtered.filter(task => {
+                        if (!task.due_date) return false;
+                        const dueDate = new Date(task.due_date);
+                        return isAfter(dueDate, today) && isBefore(dueDate, nextMonth);
+                    });
+                    break;
+                case 'overdue':
+                    filtered = filtered.filter(task => {
+                        if (!task.due_date) return false;
+                        const dueDate = new Date(task.due_date);
+                        return isBefore(dueDate, today);
+                    });
+                    break;
+                case 'no-due-date':
+                    filtered = filtered.filter(task => !task.due_date);
+                    break;
+            }
+        }
+
+        setFilteredTasks(filtered);
+    };
+
+    const handleDateFilter = (filterType: string) => {
+        setSelectedDateFilter(filterType === 'all' ? null : filterType);
+        applyFilters(filterType === 'all' ? undefined : filterType);
+    };
+
+    const handleTaskViewChange = (view: 'assigned' | 'all') => {
+        setTaskView(view);
+        router.get(getRoute('/tasks'), { view }, {
+            preserveState: true,
+            preserveScroll: true,
+            only: ['tasks']
+        });
+    };
+
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title="My Tasks" />
+            <div className="flex h-[calc(100vh-4rem)] flex-1 flex-col p-4">
+                <div className="flex items-center justify-between mb-4">
+                    <h1 className="text-2xl font-semibold">My Tasks</h1>
+                    <div className="flex items-center gap-5">
+                        <MemberTaskStats tasks={tasks} />
+                    </div>
+                </div>
+
+                <Card className="flex-1 overflow-hidden">
+                    <CardContent className="h-full p-0">
+                        <div className="h-full flex flex-col">
+                            <div className="p-6 pb-0">
+                                <DataTable
+                                    columns={columns}
+                                    data={filteredTasks}
+                                    searchPlaceholder="Search tasks..."
+                                    searchColumn="name"
+                                    onRowClick={(task: Task) => router.visit(getRoute(`/tasks/${task.id}`), {
+                                        preserveState: true,
+                                        preserveScroll: true,
+                                        onSuccess: () => {
+                                            // Refresh the page data after task update
+                                            router.reload({ only: ['tasks'] });
+                                        }
+                                    })}
+                                    addButton={
+                                        <div className="flex items-center gap-2">
+                                            <Select
+                                                value={taskView}
+                                                onValueChange={(value) => handleTaskViewChange(value as 'assigned' | 'all')}
+                                            >
+                                                <SelectTrigger className="w-[180px] h-8 cursor-pointer">
+                                                    <SelectValue placeholder="View tasks" />
+                                                </SelectTrigger>
+                                                <SelectContent>
+                                                    <SelectItem className="cursor-pointer" value="assigned">My Assigned Tasks</SelectItem>
+                                                    <SelectItem className="cursor-pointer" value="all">All Client Tasks</SelectItem>
+                                                </SelectContent>
+                                            </Select>
+                                            <Button
+                                                variant="outline"
+                                                size="sm"
+                                                className="h-8 gap-1 cursor-pointer"
+                                                onClick={() => setIsTaskDialogOpen(true)}
+                                            >
+                                                <Plus className="h-4 w-4" />
+                                                Add Task
+                                            </Button>
+                                            <DropdownMenu>
+                                                <DropdownMenuTrigger asChild>
+                                                    <Button variant="outline" size="sm" className="h-8 gap-1 cursor-pointer">
+                                                        <Filter className="h-4 w-4" />
+                                                        Filter
+                                                        {selectedDateFilter && (
+                                                            <Badge variant="secondary" className="ml-1">
+                                                                1
+                                                            </Badge>
+                                                        )}
+                                                    </Button>
+                                                </DropdownMenuTrigger>
+                                                <DropdownMenuContent align="end" className="w-[200px]">
+                                                    <DropdownMenuLabel>Filter by Date</DropdownMenuLabel>
+                                                    <DropdownMenuSeparator />
+                                                    <DropdownMenuGroup>
+                                                        <DropdownMenuItem onClick={() => handleDateFilter('all')}>
+                                                            All Dates
+                                                        </DropdownMenuItem>
+                                                        <DropdownMenuItem onClick={() => handleDateFilter('due-today')}>
+                                                            Due Today
+                                                        </DropdownMenuItem>
+                                                        <DropdownMenuItem onClick={() => handleDateFilter('due-tomorrow')}>
+                                                            Due Tomorrow
+                                                        </DropdownMenuItem>
+                                                        <DropdownMenuItem onClick={() => handleDateFilter('due-this-week')}>
+                                                            Due This Week
+                                                        </DropdownMenuItem>
+                                                        <DropdownMenuItem onClick={() => handleDateFilter('due-this-month')}>
+                                                            Due This Month
+                                                        </DropdownMenuItem>
+                                                        <DropdownMenuItem onClick={() => handleDateFilter('overdue')}>
+                                                            Overdue
+                                                        </DropdownMenuItem>
+                                                        <DropdownMenuItem onClick={() => handleDateFilter('no-due-date')}>
+                                                            No Due Date
+                                                        </DropdownMenuItem>
+                                                    </DropdownMenuGroup>
+                                                    {selectedDateFilter && (
+                                                        <>
+                                                            <DropdownMenuSeparator />
+                                                            <DropdownMenuItem onClick={clearFilters}>
+                                                                Clear Filters
+                                                            </DropdownMenuItem>
+                                                        </>
+                                                    )}
+                                                </DropdownMenuContent>
+                                            </DropdownMenu>
+                                        </div>
+                                    }
+                                />
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <CreateTaskDialog
+                    users={users}
+                    open={isTaskDialogOpen}
+                    onOpenChange={setIsTaskDialogOpen}
+                />
+            </div>
+        </AppLayout>
+    );
+}
diff --git a/resources/js/pages/settings/profile.tsx b/resources/js/pages/settings/profile.tsx
index 7be605f..cfb55ae 100644
--- a/resources/js/pages/settings/profile.tsx
+++ b/resources/js/pages/settings/profile.tsx
@@ -1,7 +1,7 @@
-import { type BreadcrumbItem, type SharedData } from '@/types';
+import { type BreadcrumbItem, type PageProps } from '@/types';
 import { Transition } from '@headlessui/react';
 import { Head, Link, useForm, usePage } from '@inertiajs/react';
-import { FormEventHandler } from 'react';
+import { FormEventHandler, useEffect } from 'react';
 
 import DeleteUser from '@/components/delete-user';
 import HeadingSmall from '@/components/heading-small';
@@ -11,6 +11,9 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AppLayout from '@/layouts/app-layout';
 import SettingsLayout from '@/layouts/settings/layout';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { User } from 'lucide-react';
+import { toast } from 'sonner';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -19,24 +22,46 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-type ProfileForm = {
-    name: string;
-    email: string;
-}
-
-export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail: boolean; status?: string }) {
-    const { auth } = usePage<SharedData>().props;
-
-    const { data, setData, patch, errors, processing, recentlySuccessful } = useForm<Required<ProfileForm>>({
-        name: auth.user.name,
-        email: auth.user.email,
+export default function Profile() {
+    const { auth } = usePage<PageProps>().props;
+    const { data, setData, patch, errors, processing, recentlySuccessful } = useForm({
+        fname: '',
+        mname: '',
+        lname: '',
+        email: '',
+        current_password: '',
+        password: '',
+        password_confirmation: '',
     });
 
-    const submit: FormEventHandler = (e) => {
-        e.preventDefault();
+    useEffect(() => {
+        setData({
+            fname: auth.user.fname,
+            mname: auth.user.mname || '',
+            lname: auth.user.lname,
+            email: auth.user.email,
+            current_password: '',
+            password: '',
+            password_confirmation: '',
+        });
+    }, [auth.user]);
 
+    const updateProfile = (e: React.FormEvent) => {
+        e.preventDefault();
         patch(route('profile.update'), {
-            preserveScroll: true,
+            onSuccess: () => {
+                toast.success('Profile updated successfully');
+                // Clear password fields after successful update
+                setData(data => ({
+                    ...data,
+                    current_password: '',
+                    password: '',
+                    password_confirmation: '',
+                }));
+            },
+            onError: () => {
+                toast.error('Failed to update profile');
+            },
         });
     };
 
@@ -48,76 +73,113 @@ export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail:
                 <div className="space-y-6">
                     <HeadingSmall title="Profile information" description="Update your name and email address" />
 
-                    <form onSubmit={submit} className="space-y-6">
-                        <div className="grid gap-2">
-                            <Label htmlFor="name">Name</Label>
-
-                            <Input
-                                id="name"
-                                className="mt-1 block w-full"
-                                value={data.name}
-                                onChange={(e) => setData('name', e.target.value)}
-                                required
-                                autoComplete="name"
-                                placeholder="Full name"
-                            />
-
-                            <InputError className="mt-2" message={errors.name} />
-                        </div>
-
-                        <div className="grid gap-2">
-                            <Label htmlFor="email">Email address</Label>
-
-                            <Input
-                                id="email"
-                                type="email"
-                                className="mt-1 block w-full"
-                                value={data.email}
-                                onChange={(e) => setData('email', e.target.value)}
-                                required
-                                autoComplete="username"
-                                placeholder="Email address"
-                            />
-
-                            <InputError className="mt-2" message={errors.email} />
-                        </div>
-
-                        {mustVerifyEmail && auth.user.email_verified_at === null && (
-                            <div>
-                                <p className="text-muted-foreground -mt-4 text-sm">
-                                    Your email address is unverified.{' '}
-                                    <Link
-                                        href={route('verification.send')}
-                                        method="post"
-                                        as="button"
-                                        className="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
-                                    >
-                                        Click here to resend the verification email.
-                                    </Link>
-                                </p>
-
-                                {status === 'verification-link-sent' && (
-                                    <div className="mt-2 text-sm font-medium text-green-600">
-                                        A new verification link has been sent to your email address.
-                                    </div>
-                                )}
+                    <Card className="w-full max-w-2xl mx-auto bg-white dark:bg-neutral-800 shadow-lg">
+                        <CardHeader className="border-b border-neutral-200 dark:border-neutral-700 pb-6">
+                            <div className="flex items-center gap-4">
+                                <div className="p-3 bg-primary/10 rounded-full">
+                                    <User className="h-6 w-6 text-primary" />
+                                </div>
+                                <CardTitle className="text-2xl font-semibold">Profile Settings</CardTitle>
                             </div>
-                        )}
-
-                        <div className="flex items-center gap-4">
-                            <Button disabled={processing}>Save</Button>
-
-                            <Transition
-                                show={recentlySuccessful}
-                                enter="transition ease-in-out"
-                                enterFrom="opacity-0"
-                                leave="transition ease-in-out"
-                                leaveTo="opacity-0"
-                            >
-                                <p className="text-sm text-neutral-600">Saved</p>
-                            </Transition>
-                        </div>
-                    </form>
+                        </CardHeader>
+                        <CardContent className="pt-6">
+                            <form onSubmit={updateProfile} className="space-y-6">
+                                <div className="space-y-2">
+                                    <Label htmlFor="fname">First Name</Label>
+                                    <Input
+                                        id="fname"
+                                        value={data.fname}
+                                        onChange={e => setData('fname', e.target.value)}
+                                        error={errors.fname}
+                                        className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-foreground border w-full"
+                                    />
+                                    <InputError message={errors.fname} />
+                                </div>
+                                <div className="space-y-2">
+                                    <Label htmlFor="mname">Middle Name</Label>
+                                    <Input
+                                        id="mname"
+                                        value={data.mname}
+                                        onChange={e => setData('mname', e.target.value)}
+                                        error={errors.mname}
+                                        className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-foreground border w-full"
+                                    />
+                                    <InputError message={errors.mname} />
+                                </div>
+                                <div className="space-y-2">
+                                    <Label htmlFor="lname">Last Name</Label>
+                                    <Input
+                                        id="lname"
+                                        value={data.lname}
+                                        onChange={e => setData('lname', e.target.value)}
+                                        error={errors.lname}
+                                        className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-foreground border w-full"
+                                    />
+                                    <InputError message={errors.lname} />
+                                </div>
+                                <div className="space-y-2">
+                                    <Label htmlFor="email">Email</Label>
+                                    <Input
+                                        id="email"
+                                        type="email"
+                                        value={data.email}
+                                        onChange={e => setData('email', e.target.value)}
+                                        error={errors.email}
+                                        className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-foreground border w-full"
+                                    />
+                                    <InputError message={errors.email} />
+                                </div>
+
+                                <div className="border-t border-neutral-200 dark:border-neutral-700 pt-6">
+                                    <h3 className="text-lg font-medium mb-4">Update Password</h3>
+                                    <div className="space-y-4">
+                                        <div className="space-y-2">
+                                            <Label htmlFor="current_password">Current Password</Label>
+                                            <Input
+                                                id="current_password"
+                                                type="password"
+                                                value={data.current_password}
+                                                onChange={e => setData('current_password', e.target.value)}
+                                                error={errors.current_password}
+                                                className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-foreground border w-full"
+                                            />
+                                            <InputError message={errors.current_password} />
+                                        </div>
+                                        <div className="space-y-2">
+                                            <Label htmlFor="password">New Password</Label>
+                                            <Input
+                                                id="password"
+                                                type="password"
+                                                value={data.password}
+                                                onChange={e => setData('password', e.target.value)}
+                                                error={errors.password}
+                                                className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-foreground border w-full"
+                                            />
+                                            <InputError message={errors.password} />
+                                        </div>
+                                        <div className="space-y-2">
+                                            <Label htmlFor="password_confirmation">Confirm New Password</Label>
+                                            <Input
+                                                id="password_confirmation"
+                                                type="password"
+                                                value={data.password_confirmation}
+                                                onChange={e => setData('password_confirmation', e.target.value)}
+                                                error={errors.password_confirmation}
+                                                className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-foreground border w-full"
+                                            />
+                                            <InputError message={errors.password_confirmation} />
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className="flex justify-end">
+                                    <Button type="submit" disabled={processing}>
+                                        Save Changes
+                                    </Button>
+                                </div>
+                            </form>
+                        </CardContent>
+                    </Card>
                 </div>
 
                 <DeleteUser />
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/index.d.ts b/resources/js/types/index.d.ts
index 790ec89..0cf8f8f 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -20,6 +20,7 @@ export interface NavItem {
     href: string;
     icon?: LucideIcon | null;
     isActive?: boolean;
+    requiredRole?: UserRole;
 }
 
 export interface SharedData {
@@ -31,15 +32,24 @@ export interface SharedData {
     [key: string]: unknown;
 }
 
+export type UserRole = 'Client-Admin' | 'Member';
+
+export interface Role {
+    name: UserRole;
+}
+
 export interface User {
     id: number;
-    name: string;
+    fname: string;
+    mname?: string;
+    lname: string;
     email: string;
     avatar?: string;
     email_verified_at: string | null;
     created_at: string;
     updated_at: string;
-    [key: string]: unknown; // This allows for additional properties...
+    role?: Role;
+    [key: string]: unknown;
 }
 
 export type PageProps<T extends Record<string, unknown> = Record<string, unknown>> = {
diff --git a/resources/js/types/meeting.ts b/resources/js/types/meeting.ts
new file mode 100644
index 0000000..b4f4ecb
--- /dev/null
+++ b/resources/js/types/meeting.ts
@@ -0,0 +1,20 @@
+import { type User } from './user';
+
+export type MeetingStatus = 'scheduled' | 'in_progress' | 'completed' | 'cancelled';
+
+export interface Meeting {
+    id: number;
+    name: string;
+    description: string;
+    status: MeetingStatus;
+    start_time: string;
+    end_time: string;
+    location?: string;
+    meeting_link?: string;
+    client_id: number;
+    created_by: number;
+    created_at: string;
+    updated_at: string;
+    users: User[];
+    created_by_user: User;
+}
\ 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..8798675
--- /dev/null
+++ b/resources/js/types/task.ts
@@ -0,0 +1,19 @@
+export type TaskStatus = 'pending' | 'in_progress' | 'completed';
+export type TaskPriority = 'low' | 'medium' | 'high';
+
+export interface User {
+    id: number;
+    fname: string;
+    lname: 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/resources/js/types/timeline.ts b/resources/js/types/timeline.ts
new file mode 100644
index 0000000..9c9f2f6
--- /dev/null
+++ b/resources/js/types/timeline.ts
@@ -0,0 +1,16 @@
+export interface Timeline {
+    id: number;
+    user_id: number;
+    subject_type: string;
+    subject_id: number;
+    origin_client_id: number;
+    message: string;
+    created_at: string;
+    updated_at: string;
+    deleted_at: string | null;
+    user?: {
+        id: number;
+        fname: string;
+        lname: string;
+    };
+} 
\ No newline at end of file
diff --git a/resources/js/types/user.ts b/resources/js/types/user.ts
new file mode 100644
index 0000000..2cb0222
--- /dev/null
+++ b/resources/js/types/user.ts
@@ -0,0 +1,13 @@
+export interface User {
+    id: number;
+    fname: string;
+    mname?: string;
+    lname: string;
+    email: string;
+    role?: {
+        id: number;
+        name: string;
+    };
+    client_id?: number;
+    full_name?: string;
+} 
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 2f9396a..6698c38 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -3,30 +3,64 @@
 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;
+use App\Http\Controllers\ClientAdmin\AdminDashboardController;
+use App\Http\Controllers\Crud\Member\MemberTaskController;
+use App\Http\Controllers\Crud\Member\MemberMeetingController;
+use App\Http\Controllers\Member\MemberDashboardController;
 
 Route::get('/', function () {
     return Inertia::render('welcome');
 })->name('home');
 
 Route::middleware(['auth', 'verified'])->group(function () {
-    Route::get('dashboard', function () {
-        return Inertia::render('dashboard');
-    })->name('dashboard');
-
-    Route::get('tasks', function () {
-        return Inertia::render('tasks');
-    })->name('tasks');
-
+    // Client Admin Routes
+    Route::middleware(['role:Client-Admin'])->prefix('admin')->name('admin.')->group(function () {
+        Route::get('/dashboard', [AdminDashboardController::class, 'index'])->name('dashboard');
+        
+        // Admin Task Routes
+        Route::get('tasks', [ClientAdminTaskController::class, 'index'])->name('tasks.index');
+        Route::post('tasks', [ClientAdminTaskController::class, 'store'])->name('tasks.store');
+        Route::get('tasks/{task}', [ClientAdminTaskController::class, 'show'])->name('tasks.show');
+        Route::put('tasks/{task}', [ClientAdminTaskController::class, 'update'])->name('tasks.update');
+        Route::delete('tasks/{task}', [ClientAdminTaskController::class, 'destroy'])->name('tasks.destroy');
 
-
-    Route::middleware(['role:Client-Admin'])->group(function () {
+        // Admin User Routes
         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');
+
+        // Admin Meeting Routes
+        Route::get('meetings', [ClientAdminMeetingController::class, 'index'])->name('meetings.index');
+        Route::post('meetings', [ClientAdminMeetingController::class, 'store'])->name('meetings.store');
+        Route::get('meetings/{meeting}', [ClientAdminMeetingController::class, 'show'])->name('meetings.show');
+        Route::put('meetings/{meeting}', [ClientAdminMeetingController::class, 'update'])->name('meetings.update');
+        Route::delete('meetings/{meeting}', [ClientAdminMeetingController::class, 'destroy'])->name('meetings.destroy');
     });
+
+    // Member Routes
+    Route::middleware(['role:Member'])->prefix('member')->name('member.')->group(function () {
+        Route::get('/dashboard', [MemberDashboardController::class, 'index'])->name('dashboard');
+        
+        // Member Task Routes
+        Route::get('tasks', [MemberTaskController::class, 'index'])->name('tasks.index');
+        Route::post('tasks', [MemberTaskController::class, 'store'])->name('tasks.store');
+        Route::get('tasks/{task}', [MemberTaskController::class, 'show'])->name('tasks.show');
+        Route::put('tasks/{task}', [MemberTaskController::class, 'update'])->name('tasks.update');
+
+        // Member Meeting Routes
+        Route::get('meetings', [MemberMeetingController::class, 'index'])->name('meetings.index');
+        Route::get('meetings/{meeting}', [MemberMeetingController::class, 'show'])->name('meetings.show');
+    });
+
+    // Redirect root dashboard to role-specific dashboard
+    Route::get('/dashboard', function () {
+        return redirect()->route(auth()->user()->role->name === 'Client-Admin' ? 'admin.dashboard' : 'member.dashboard');
+    })->name('dashboard');
 });
 
 require __DIR__.'/settings.php';