From a377ce3bde77ed6abbdc05443b1889b80f495cbb Mon Sep 17 00:00:00 2001
From: ryanmueller24 <ryanpmueller24@gmail.com>
Date: Tue, 13 May 2025 23:01:33 -0500
Subject: [PATCH 01/21] folder restructure

---
 .../Crud/ClientAdmin/UserController.php           |  6 +++---
 .../{tasks.tsx => admin/admin-task-list.tsx}      |  0
 .../admin-user-details.tsx}                       |  0
 .../user-list.tsx => admin/admin-user-list.tsx}   |  0
 routes/web.php                                    | 15 +++++++--------
 5 files changed, 10 insertions(+), 11 deletions(-)
 rename resources/js/pages/{tasks.tsx => admin/admin-task-list.tsx} (100%)
 rename resources/js/pages/{Users/user-details.tsx => admin/admin-user-details.tsx} (100%)
 rename resources/js/pages/{Users/user-list.tsx => admin/admin-user-list.tsx} (100%)

diff --git a/app/Http/Controllers/Crud/ClientAdmin/UserController.php b/app/Http/Controllers/Crud/ClientAdmin/UserController.php
index 02c4c74..0b21db8 100644
--- a/app/Http/Controllers/Crud/ClientAdmin/UserController.php
+++ b/app/Http/Controllers/Crud/ClientAdmin/UserController.php
@@ -16,7 +16,7 @@ class UserController extends Controller
     public function index()
     {
         $users = User::where('client_id', auth()->user()->client_id)->get();
-        return Inertia::render('Users/user-list', [
+        return Inertia::render('admin/admin-user-list', [
             'users' => $users,
             'roles' => Role::all(['id', 'name'])->except(1)//exclude the system admin role
         ]);        
@@ -75,7 +75,7 @@ public function show(User $user)
             abort(403, 'Unauthorized');
         }
 
-        return Inertia::render('Users/user-details', [
+        return Inertia::render('admin/admin-user-details', [
             'user' => $user
         ]);
     }
@@ -83,7 +83,7 @@ public function show(User $user)
     public function destroy(User $user)
     {
         $user->delete();
-        return redirect()->route('users.index');
+        return redirect()->route('admin.users.index');
     }
     
     
diff --git a/resources/js/pages/tasks.tsx b/resources/js/pages/admin/admin-task-list.tsx
similarity index 100%
rename from resources/js/pages/tasks.tsx
rename to resources/js/pages/admin/admin-task-list.tsx
diff --git a/resources/js/pages/Users/user-details.tsx b/resources/js/pages/admin/admin-user-details.tsx
similarity index 100%
rename from resources/js/pages/Users/user-details.tsx
rename to resources/js/pages/admin/admin-user-details.tsx
diff --git a/resources/js/pages/Users/user-list.tsx b/resources/js/pages/admin/admin-user-list.tsx
similarity index 100%
rename from resources/js/pages/Users/user-list.tsx
rename to resources/js/pages/admin/admin-user-list.tsx
diff --git a/routes/web.php b/routes/web.php
index 2f9396a..454c276 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -15,17 +15,16 @@
     })->name('dashboard');
 
     Route::get('tasks', function () {
-        return Inertia::render('tasks');
+        return Inertia::render('admin/admin-task-list');
     })->name('tasks');
 
-
-
+    // Admin Routes
     Route::middleware(['role:Client-Admin'])->group(function () {
-        Route::get('users', [ClientAdminUserController::class, 'index'])->name('users.index');
-        Route::post('users', [ClientAdminUserController::class, 'store'])->name('users.store');
-        Route::get('users/{user}', [ClientAdminUserController::class, 'show'])->name('users.show');
-        Route::put('users/{user}', [ClientAdminUserController::class, 'update'])->name('users.update');
-        Route::delete('users/{user}', [ClientAdminUserController::class, 'destroy'])->name('users.destroy');
+        Route::get('users', [ClientAdminUserController::class, 'index'])->name('admin.users.index');
+        Route::post('users', [ClientAdminUserController::class, 'store'])->name('admin.users.store');
+        Route::get('users/{user}', [ClientAdminUserController::class, 'show'])->name('admin.users.show');
+        Route::put('users/{user}', [ClientAdminUserController::class, 'update'])->name('admin.users.update');
+        Route::delete('users/{user}', [ClientAdminUserController::class, 'destroy'])->name('admin.users.destroy');
     });
 });
 

From 9c778df8ec7f4dff5c7500f3e67627335f13046d Mon Sep 17 00:00:00 2001
From: ryanmueller24 <ryanpmueller24@gmail.com>
Date: Fri, 23 May 2025 00:07:04 -0500
Subject: [PATCH 02/21] user changes

---
 .../Crud/ClientAdmin/UserController.php       |   4 +-
 app/Models/Role.php                           |   3 +
 app/Models/Task.php                           |   1 +
 app/Models/User.php                           |   3 +-
 .../0001_01_01_000000_create_users_table.php  |   1 +
 .../js/components/ui/create-user-dialog.tsx   | 143 ----------------
 .../components/users/create-user-dialog.tsx   | 156 ++++++++++++++++++
 resources/js/pages/admin/admin-user-list.tsx  |  51 +++---
 routes/web.php                                |  12 +-
 9 files changed, 201 insertions(+), 173 deletions(-)
 delete mode 100644 resources/js/components/ui/create-user-dialog.tsx
 create mode 100644 resources/js/components/users/create-user-dialog.tsx

diff --git a/app/Http/Controllers/Crud/ClientAdmin/UserController.php b/app/Http/Controllers/Crud/ClientAdmin/UserController.php
index 0b21db8..c3257ae 100644
--- a/app/Http/Controllers/Crud/ClientAdmin/UserController.php
+++ b/app/Http/Controllers/Crud/ClientAdmin/UserController.php
@@ -15,7 +15,9 @@ class UserController extends Controller
 {
     public function index()
     {
-        $users = User::where('client_id', auth()->user()->client_id)->get();
+        $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
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..6bd1386 100644
--- a/app/Models/Task.php
+++ b/app/Models/Task.php
@@ -3,6 +3,7 @@
 namespace App\Models;
 
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
 
 class Task extends Model
 {
diff --git a/app/Models/User.php b/app/Models/User.php
index 3727e95..cb84df9 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -8,11 +8,12 @@
 use Illuminate\Notifications\Notifiable;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
+use Illuminate\Database\Eloquent\SoftDeletes;
 
 class User extends Authenticatable
 {
     /** @use HasFactory<\Database\Factories\UserFactory> */
-    use HasFactory, Notifiable;
+    use HasFactory, Notifiable, SoftDeletes;
 
     /**
      * The attributes that are mass assignable.
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/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/users/create-user-dialog.tsx b/resources/js/components/users/create-user-dialog.tsx
new file mode 100644
index 0000000..5e81e44
--- /dev/null
+++ b/resources/js/components/users/create-user-dialog.tsx
@@ -0,0 +1,156 @@
+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';
+import { Card, CardContent } from '@/components/ui/card';
+
+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('admin.users.store'), {
+            onSuccess: () => {
+                reset();
+                window.location.href = route('admin.users.index');
+            },
+        });
+    };
+
+    const formatRoleName = (name: string) => {
+        return name === "Client-Admin" ? "Admin" : name;
+    };
+
+    return (
+        <Dialog>
+            <DialogTrigger asChild>
+                <Button>
+                    <Plus className="mr-2 h-4 w-4" />
+                    New User
+                </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>Create New User</DialogTitle>
+                    <DialogDescription>
+                        Add a new user to the system
+                    </DialogDescription>
+                </DialogHeader>
+                <form onSubmit={submit}>
+                    <Card>
+                        <CardContent className="pt-6">
+                            <div className="grid gap-4">
+                                <div className="grid gap-2">
+                                    <Label htmlFor="name">Name</Label>
+                                    <Input
+                                        id="name"
+                                        value={data.name}
+                                        onChange={e => setData('name', e.target.value)}
+                                        placeholder="Full name"
+                                        className="w-full"
+                                    />
+                                    <InputError message={errors.name} />
+                                </div>
+
+                                <div className="grid gap-2">
+                                    <Label htmlFor="email">Email</Label>
+                                    <Input
+                                        id="email"
+                                        type="email"
+                                        value={data.email}
+                                        onChange={e => setData('email', e.target.value)}
+                                        placeholder="email@example.com"
+                                        className="w-full"
+                                    />
+                                    <InputError message={errors.email} />
+                                </div>
+
+                                <div className="grid gap-2">
+                                    <Label htmlFor="password">Password</Label>
+                                    <Input
+                                        id="password"
+                                        type="password"
+                                        value={data.password}
+                                        onChange={e => setData('password', e.target.value)}
+                                        placeholder="Password"
+                                        className="w-full"
+                                    />
+                                    <InputError message={errors.password} />
+                                </div>
+
+                                <div className="grid gap-2">
+                                    <Label htmlFor="password_confirmation">Confirm Password</Label>
+                                    <Input
+                                        id="password_confirmation"
+                                        type="password"
+                                        value={data.password_confirmation}
+                                        onChange={e => setData('password_confirmation', e.target.value)}
+                                        placeholder="Confirm password"
+                                        className="w-full"
+                                    />
+                                    <InputError message={errors.password_confirmation} />
+                                </div>
+
+                                <div className="grid gap-2">
+                                    <Label htmlFor="role_id">Role</Label>
+                                    <Select
+                                        value={data.role_id.toString()}
+                                        onValueChange={(value) => setData('role_id', parseInt(value))}
+                                    >
+                                        <SelectTrigger id="role_id" className="w-full">
+                                            <SelectValue placeholder="Select a role" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            {roles.map((role) => (
+                                                <SelectItem key={role.id} value={role.id.toString()}>
+                                                    {formatRoleName(role.name)}
+                                                </SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                    <InputError message={errors.role_id} />
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    <DialogFooter className="mt-4">
+                        <Button type="submit" disabled={processing} className="w-full sm:w-auto">
+                            {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/pages/admin/admin-user-list.tsx b/resources/js/pages/admin/admin-user-list.tsx
index d19ee9d..ce6d7a2 100644
--- a/resources/js/pages/admin/admin-user-list.tsx
+++ b/resources/js/pages/admin/admin-user-list.tsx
@@ -10,7 +10,7 @@ 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';
+import CreateUserDialog from '@/components/users/create-user-dialog';
 
 
 const breadcrumbs: BreadcrumbItem[] = [
@@ -21,36 +21,19 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-
-
 interface User {
     id: number;
     name: string;
     email: string;
+    role: {
+        id: number;
+        name: 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 }) => {
@@ -79,6 +62,24 @@ const columns: ColumnDef<User>[] = [
             )
         },
     },
+    {
+        accessorKey: "role.name",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Role
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const roleName = row.original.role.name;
+            return roleName === "Client-Admin" ? "Admin" : roleName;
+        }
+    },
 ];
 
 export default function Users({ users }: PageProps<{ users: User[] }>) {
diff --git a/routes/web.php b/routes/web.php
index 454c276..fd87089 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -3,6 +3,7 @@
 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\Middleware\CheckRole;
 
 Route::get('/', function () {
@@ -14,9 +15,14 @@
         return Inertia::render('dashboard');
     })->name('dashboard');
 
-    Route::get('tasks', function () {
-        return Inertia::render('admin/admin-task-list');
-    })->name('tasks');
+    // Task routes
+    Route::middleware(['role:Client-Admin'])->group(function () {
+        Route::get('tasks', [ClientAdminTaskController::class, 'index'])->name('admin.tasks.index');
+        Route::post('tasks', [ClientAdminTaskController::class, 'store'])->name('admin.tasks.store');
+        Route::get('tasks/{task}', [ClientAdminTaskController::class, 'show'])->name('admin.tasks.show');
+        Route::put('tasks/{task}', [ClientAdminTaskController::class, 'update'])->name('admin.tasks.update');
+        Route::delete('tasks/{task}', [ClientAdminTaskController::class, 'destroy'])->name('admin.tasks.destroy');
+    });
 
     // Admin Routes
     Route::middleware(['role:Client-Admin'])->group(function () {

From 6b45bfde5ac4be0c6ea5325c9813f1bb543df12c Mon Sep 17 00:00:00 2001
From: ryanmueller24 <ryanpmueller24@gmail.com>
Date: Fri, 23 May 2025 03:41:21 -0500
Subject: [PATCH 03/21] task and user backend -> frontend working

---
 .../Crud/ClientAdmin/TaskController.php       |  124 ++
 app/Models/Task.php                           |   15 +-
 app/Models/User.php                           |    1 +
 .../2025_04_29_063856_create_tasks_table.php  |    1 +
 ..._04_30_181719_create_client_task_table.php |   31 -
 database/seeders/ClientSeeder.php             |    2 +-
 database/seeders/DatabaseSeeder.php           |    1 +
 database/seeders/TaskSeeder.php               |   75 ++
 database/seeders/UserSeeder.php               |   37 +-
 package-lock.json                             | 1094 +++++++++++++++--
 package.json                                  |    6 +-
 resources/js/components/data-table.tsx        |   31 +-
 .../js/components/tasks/admin-task-stats.tsx  |   12 +
 .../components/tasks/create-task-dialog.tsx   |  252 ++++
 .../js/components/tasks/task-progress.tsx     |   25 +
 .../js/components/tasks/task-statistics.tsx   |   64 +
 resources/js/components/ui/command.tsx        |  175 +++
 resources/js/components/ui/data-table.tsx     |   75 ++
 resources/js/components/ui/input.tsx          |   37 +-
 resources/js/components/ui/popover.tsx        |   46 +
 resources/js/components/ui/progress.tsx       |   29 +
 resources/js/components/ui/textarea.tsx       |   28 +
 .../components/users/create-user-dialog.tsx   |    6 +-
 .../js/pages/admin/admin-task-details.tsx     |  281 +++++
 resources/js/pages/admin/admin-task-list.tsx  |  207 ++--
 .../js/pages/admin/admin-user-details.tsx     |   35 +-
 resources/js/pages/admin/admin-user-list.tsx  |   47 +-
 resources/js/types/task.ts                    |   18 +
 28 files changed, 2369 insertions(+), 386 deletions(-)
 create mode 100644 app/Http/Controllers/Crud/ClientAdmin/TaskController.php
 delete mode 100644 database/migrations/2025_04_30_181719_create_client_task_table.php
 create mode 100644 database/seeders/TaskSeeder.php
 create mode 100644 resources/js/components/tasks/admin-task-stats.tsx
 create mode 100644 resources/js/components/tasks/create-task-dialog.tsx
 create mode 100644 resources/js/components/tasks/task-progress.tsx
 create mode 100644 resources/js/components/tasks/task-statistics.tsx
 create mode 100644 resources/js/components/ui/command.tsx
 create mode 100644 resources/js/components/ui/data-table.tsx
 create mode 100644 resources/js/components/ui/popover.tsx
 create mode 100644 resources/js/components/ui/progress.tsx
 create mode 100644 resources/js/components/ui/textarea.tsx
 create mode 100644 resources/js/pages/admin/admin-task-details.tsx
 create mode 100644 resources/js/types/task.ts

diff --git a/app/Http/Controllers/Crud/ClientAdmin/TaskController.php b/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
new file mode 100644
index 0000000..5f6b578
--- /dev/null
+++ b/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
@@ -0,0 +1,124 @@
+<?php
+
+namespace App\Http\Controllers\Crud\ClientAdmin;
+
+use App\Http\Controllers\Controller;
+use App\Models\Task;
+use App\Models\User;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class TaskController extends Controller
+{
+    public function index()
+    {
+        $clientId = auth()->user()->client->id;
+
+        $tasks = Task::where('client_id', $clientId)
+            ->with(['users' => function ($query) use ($clientId) {
+                $query->where('users.client_id', $clientId)
+                    ->select('users.id', 'users.name', 'users.email');
+            }])
+            ->get();
+
+        $users = User::where('client_id', $clientId)
+            ->select('id', 'name', 'email')
+            ->get();
+
+        return Inertia::render('admin/admin-task-list', [
+            'tasks' => $tasks,
+            'users' => $users
+        ]);
+    }
+
+    public function store(Request $request)
+    {
+        $request->validate([
+            'name' => 'required|string|max:255',
+            'description' => 'required|string|max:255',
+            'status' => 'required|in:pending,in_progress,completed',
+            'priority' => 'required|in:low,medium,high',
+            'due_date' => 'nullable|date',
+            'users' => 'array',
+            'users.*' => 'exists:users,id'
+        ]);
+
+        $task = Task::create([
+            'name' => $request->name,
+            'description' => $request->description,
+            'status' => $request->status,
+            'priority' => $request->priority,
+            'due_date' => $request->due_date,
+            'client_id' => auth()->user()->client->id
+        ]);
+
+        if ($request->has('users')) {
+            $task->users()->attach($request->users);
+        }
+
+        return back();
+    }   
+
+    public function show(Task $task)
+    {
+        // Ensure the task belongs to the user's client
+        if ($task->client_id !== auth()->user()->client->id) {
+            abort(403, 'Unauthorized');
+        }
+
+        $clientId = auth()->user()->client->id;
+
+        // Get all users for the client, for the task details page (to assign users to the task)
+        $all_users = User::where('client_id', $clientId)
+            ->select('id', 'name', 'email')
+            ->get();
+
+        return Inertia::render('admin/admin-task-details', [
+            'task' => $task->load(['users' => function ($query) use ($clientId) {
+                $query->where('users.client_id', $clientId)
+                    ->select('users.id', 'users.name', 'users.email');
+            }]),
+            'all_users' => $all_users
+        ]);
+    }
+
+    public function update(Request $request, Task $task)
+    {
+        // Ensure the task belongs to the user's client
+        if ($task->client_id !== auth()->user()->client->id) {
+            abort(403, 'Unauthorized');
+        }
+
+        $request->validate([
+            'name' => 'required|string|max:255',
+            'description' => 'required|string|max:255',
+            'status' => 'required|in:pending,in_progress,completed',
+            'priority' => 'required|in:low,medium,high',
+            'due_date' => 'nullable|date',
+            'users' => 'array',
+            'users.*' => 'exists:users,id'
+        ]);
+
+        $task->update($request->only(['name', 'description', 'status', 'priority', 'due_date']));
+
+        if ($request->has('users')) {
+            $task->users()->sync($request->users);
+        }
+
+        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();
+        return redirect()->route('admin.tasks.index');
+    }
+    
+    
+       
+}
\ No newline at end of file
diff --git a/app/Models/Task.php b/app/Models/Task.php
index 6bd1386..bf07704 100644
--- a/app/Models/Task.php
+++ b/app/Models/Task.php
@@ -4,6 +4,8 @@
 
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 
 class Task extends Model
 {
@@ -15,20 +17,21 @@ class Task extends Model
         'status',
         'priority',
         'due_date',
+        'client_id'
     ];
 
-    public function users()
+    public function client(): BelongsTo
     {
-        return $this->belongsToMany(User::class);
+        return $this->belongsTo(Client::class);
     }
 
-    public function meetings()
+    public function users(): BelongsToMany
     {
-        return $this->belongsToMany(Meeting::class);
+        return $this->belongsToMany(User::class);
     }
 
-    public function clients()
+    public function meetings()
     {
-        return $this->belongsToMany(Client::class);
+        return $this->belongsToMany(Meeting::class);
     }
 }
diff --git a/app/Models/User.php b/app/Models/User.php
index cb84df9..67d495d 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -70,4 +70,5 @@ public function role(): BelongsTo
     {
         return $this->belongsTo(Role::class);
     }
+
 }
diff --git a/database/migrations/2025_04_29_063856_create_tasks_table.php b/database/migrations/2025_04_29_063856_create_tasks_table.php
index 7eaf60b..42f88b8 100644
--- a/database/migrations/2025_04_29_063856_create_tasks_table.php
+++ b/database/migrations/2025_04_29_063856_create_tasks_table.php
@@ -13,6 +13,7 @@ public function up(): void
     {
         Schema::create('tasks', function (Blueprint $table) {
             $table->id();
+            $table->foreignId('client_id')->constrained()->onDelete('cascade');
             $table->string('name');
             $table->string('description');
             $table->enum('status', ['pending', 'in_progress', 'completed']);
diff --git a/database/migrations/2025_04_30_181719_create_client_task_table.php b/database/migrations/2025_04_30_181719_create_client_task_table.php
deleted file mode 100644
index dae705f..0000000
--- a/database/migrations/2025_04_30_181719_create_client_task_table.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php
-
-use Illuminate\Database\Migrations\Migration;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Support\Facades\Schema;
-use Illuminate\Database\Eloquent\SoftDeletes;
-
-return new class extends Migration
-{
-    /**
-     * Run the migrations.
-     */
-    public function up(): void
-    {
-        Schema::create('client_task', function (Blueprint $table) {
-            $table->id();
-            $table->foreignId('client_id')->constrained('clients');
-            $table->foreignId('task_id')->constrained('tasks');
-            $table->timestamps();
-            $table->softDeletes();
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     */
-    public function down(): void
-    {
-        Schema::dropIfExists('client_task');
-    }
-};
diff --git a/database/seeders/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..72e39a0 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -16,6 +16,7 @@ public function run(): void
             ClientSeeder::class,
             SystemAdminSeeder::class,
             UserSeeder::class,
+            TaskSeeder::class,
         ]);
     }
 }
diff --git a/database/seeders/TaskSeeder.php b/database/seeders/TaskSeeder.php
new file mode 100644
index 0000000..10192e3
--- /dev/null
+++ b/database/seeders/TaskSeeder.php
@@ -0,0 +1,75 @@
+<?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 client 1
+        $client = Client::find(1);
+
+        // Get some users to assign to tasks
+        $users = User::where('client_id', 1)->take(3)->get();
+
+        // Create 5 tasks for client 1
+        $tasks = [
+            [
+                'name' => 'Implement User Authentication',
+                'description' => 'Set up secure user authentication system with JWT tokens',
+                'status' => 'in_progress',
+                'priority' => 'high',
+                'due_date' => now()->addDays(7),
+                'client_id' => 1,
+            ],
+            [
+                'name' => 'Design Database Schema',
+                'description' => 'Create and optimize database schema for the application',
+                'status' => 'completed',
+                'priority' => 'high',
+                'due_date' => now()->subDays(2),
+                'client_id' => 1,
+            ],
+            [
+                'name' => 'Create API Documentation',
+                'description' => 'Write comprehensive API documentation for all endpoints',
+                'status' => 'pending',
+                'priority' => 'medium',
+                'due_date' => now()->addDays(14),
+                'client_id' => 1,
+            ],
+            [
+                'name' => 'Implement Task Management',
+                'description' => 'Build task management system with CRUD operations',
+                'status' => 'in_progress',
+                'priority' => 'high',
+                'due_date' => now()->addDays(5),
+                'client_id' => 1,
+            ],
+            [
+                'name' => 'Setup CI/CD Pipeline',
+                'description' => 'Configure continuous integration and deployment pipeline',
+                'status' => 'pending',
+                'priority' => 'medium',
+                'due_date' => now()->addDays(10),
+                'client_id' => 1,
+            ],
+        ];
+
+        foreach ($tasks as $taskData) {
+            $task = Task::create($taskData);
+            
+            // Assign 2 random users to each task
+            $task->users()->attach(
+                $users->random(2)->pluck('id')->toArray(),
+                ['created_at' => now(), 'updated_at' => now()]
+            );
+        }
+    }
+} 
\ No newline at end of file
diff --git a/database/seeders/UserSeeder.php b/database/seeders/UserSeeder.php
index fef625f..e40ee8a 100644
--- a/database/seeders/UserSeeder.php
+++ b/database/seeders/UserSeeder.php
@@ -17,7 +17,7 @@ public function run()
             # client admin
             'name' => 'Ryan Mueller',
             'password' => Hash::make('password'),
-            'email' => 'ryan@starplot.ai',
+            'email' => 'ryan@equippers.com',
             'password_set' => true,
             'email_verified_at' => now(),
             'client_id' => 1,
@@ -29,7 +29,40 @@ public function run()
             # client member
             'name' => 'Andrew McDowell',
             'password' => Hash::make('password'),
-            'email' => 'andrew@starplot.ai',
+            'email' => 'andrew@equippers.com',
+            'password_set' => true,
+            'email_verified_at' => now(),
+            'client_id' => 1,
+            'role_id' => 3,
+        ]);
+
+        User::create([
+            # client member
+            'name' => 'Allison Port',
+            'password' => Hash::make('password'),
+            'email' => 'allison@equippers.com',
+            'password_set' => true,
+            'email_verified_at' => now(),
+            'client_id' => 1,
+            'role_id' => 3,
+        ]);
+
+        User::create([
+            # client member
+            'name' => 'George Kalafatis',
+            'password' => Hash::make('password'),
+            'email' => 'george@equippers.com',
+            'password_set' => true,
+            'email_verified_at' => now(),
+            'client_id' => 1,
+            'role_id' => 3,
+        ]);
+
+        User::create([
+            # client member
+            'name' => 'John Doe',
+            'password' => Hash::make('password'),
+            'email' => 'john@equippers.com',
             'password_set' => true,
             'email_verified_at' => now(),
             'client_id' => 1,
diff --git a/package-lock.json b/package-lock.json
index ddc58af..58dd788 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,10 +10,12 @@
                 "@radix-ui/react-avatar": "^1.1.3",
                 "@radix-ui/react-checkbox": "^1.1.4",
                 "@radix-ui/react-collapsible": "^1.1.3",
-                "@radix-ui/react-dialog": "^1.1.6",
+                "@radix-ui/react-dialog": "^1.1.14",
                 "@radix-ui/react-dropdown-menu": "^2.1.6",
                 "@radix-ui/react-label": "^2.1.2",
                 "@radix-ui/react-navigation-menu": "^1.2.5",
+                "@radix-ui/react-popover": "^1.1.14",
+                "@radix-ui/react-progress": "^1.1.7",
                 "@radix-ui/react-select": "^2.1.6",
                 "@radix-ui/react-separator": "^1.1.2",
                 "@radix-ui/react-slot": "^1.1.2",
@@ -27,7 +29,9 @@
                 "@vitejs/plugin-react": "^4.3.4",
                 "class-variance-authority": "^0.7.1",
                 "clsx": "^2.1.1",
+                "cmdk": "^1.1.1",
                 "concurrently": "^9.0.1",
+                "date-fns": "^4.1.0",
                 "globals": "^15.14.0",
                 "laravel-vite-plugin": "^1.0",
                 "lucide-react": "^0.475.0",
@@ -1302,23 +1306,23 @@
             }
         },
         "node_modules/@radix-ui/react-dialog": {
-            "version": "1.1.6",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.6.tgz",
-            "integrity": "sha512-/IVhJV5AceX620DUJ4uYVMymzsipdKBzo3edo+omeskCKGm9FRHM0ebIdbPnlQVJqyuHbuBltQUOG2mOTq2IYw==",
-            "license": "MIT",
-            "dependencies": {
-                "@radix-ui/primitive": "1.1.1",
-                "@radix-ui/react-compose-refs": "1.1.1",
-                "@radix-ui/react-context": "1.1.1",
-                "@radix-ui/react-dismissable-layer": "1.1.5",
-                "@radix-ui/react-focus-guards": "1.1.1",
-                "@radix-ui/react-focus-scope": "1.1.2",
-                "@radix-ui/react-id": "1.1.0",
-                "@radix-ui/react-portal": "1.1.4",
-                "@radix-ui/react-presence": "1.1.2",
-                "@radix-ui/react-primitive": "2.0.2",
-                "@radix-ui/react-slot": "1.1.2",
-                "@radix-ui/react-use-controllable-state": "1.1.0",
+            "version": "1.1.14",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.14.tgz",
+            "integrity": "sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.2",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-context": "1.1.2",
+                "@radix-ui/react-dismissable-layer": "1.1.10",
+                "@radix-ui/react-focus-guards": "1.1.2",
+                "@radix-ui/react-focus-scope": "1.1.7",
+                "@radix-ui/react-id": "1.1.1",
+                "@radix-ui/react-portal": "1.1.9",
+                "@radix-ui/react-presence": "1.1.4",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-slot": "1.2.3",
+                "@radix-ui/react-use-controllable-state": "1.2.2",
                 "aria-hidden": "^1.2.4",
                 "react-remove-scroll": "^2.6.3"
             },
@@ -1337,6 +1341,283 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/primitive": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+            "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
+            "license": "MIT"
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-compose-refs": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+            "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-context": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+            "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": {
+            "version": "1.1.10",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz",
+            "integrity": "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.2",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-callback-ref": "1.1.1",
+                "@radix-ui/react-use-escape-keydown": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-guards": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
+            "integrity": "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-scope": {
+            "version": "1.1.7",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+            "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-callback-ref": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-id": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+            "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-portal": {
+            "version": "1.1.9",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+            "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-presence": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz",
+            "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-primitive": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+            "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-slot": "1.2.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+            "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-callback-ref": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+            "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-controllable-state": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+            "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-effect-event": "0.0.2",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-escape-keydown": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+            "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-callback-ref": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-layout-effect": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+            "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-direction": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
@@ -1352,17 +1633,464 @@
                 }
             }
         },
-        "node_modules/@radix-ui/react-dismissable-layer": {
-            "version": "1.1.5",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz",
-            "integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==",
+        "node_modules/@radix-ui/react-dismissable-layer": {
+            "version": "1.1.5",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz",
+            "integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.1",
+                "@radix-ui/react-compose-refs": "1.1.1",
+                "@radix-ui/react-primitive": "2.0.2",
+                "@radix-ui/react-use-callback-ref": "1.1.0",
+                "@radix-ui/react-use-escape-keydown": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dropdown-menu": {
+            "version": "2.1.6",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.6.tgz",
+            "integrity": "sha512-no3X7V5fD487wab/ZYSHXq3H37u4NVeLDKI/Ks724X/eEFSSEFYZxWgsIlr1UBeEyDaM29HM5x9p1Nv8DuTYPA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.1",
+                "@radix-ui/react-compose-refs": "1.1.1",
+                "@radix-ui/react-context": "1.1.1",
+                "@radix-ui/react-id": "1.1.0",
+                "@radix-ui/react-menu": "2.1.6",
+                "@radix-ui/react-primitive": "2.0.2",
+                "@radix-ui/react-use-controllable-state": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-focus-guards": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+            "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-focus-scope": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.2.tgz",
+            "integrity": "sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.1",
+                "@radix-ui/react-primitive": "2.0.2",
+                "@radix-ui/react-use-callback-ref": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-id": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+            "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-layout-effect": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-label": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.2.tgz",
+            "integrity": "sha512-zo1uGMTaNlHehDyFQcDZXRJhUPDuukcnHz0/jnrup0JA6qL+AFpAnty+7VKa9esuU5xTblAZzTGYJKSKaBxBhw==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-primitive": "2.0.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-menu": {
+            "version": "2.1.6",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.6.tgz",
+            "integrity": "sha512-tBBb5CXDJW3t2mo9WlO7r6GTmWV0F0uzHZVFmlRmYpiSK1CDU5IKojP1pm7oknpBOrFZx/YgBRW9oorPO2S/Lg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.1",
+                "@radix-ui/react-collection": "1.1.2",
+                "@radix-ui/react-compose-refs": "1.1.1",
+                "@radix-ui/react-context": "1.1.1",
+                "@radix-ui/react-direction": "1.1.0",
+                "@radix-ui/react-dismissable-layer": "1.1.5",
+                "@radix-ui/react-focus-guards": "1.1.1",
+                "@radix-ui/react-focus-scope": "1.1.2",
+                "@radix-ui/react-id": "1.1.0",
+                "@radix-ui/react-popper": "1.2.2",
+                "@radix-ui/react-portal": "1.1.4",
+                "@radix-ui/react-presence": "1.1.2",
+                "@radix-ui/react-primitive": "2.0.2",
+                "@radix-ui/react-roving-focus": "1.1.2",
+                "@radix-ui/react-slot": "1.1.2",
+                "@radix-ui/react-use-callback-ref": "1.1.0",
+                "aria-hidden": "^1.2.4",
+                "react-remove-scroll": "^2.6.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-navigation-menu": {
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.5.tgz",
+            "integrity": "sha512-myMHHQUZ3ZLTi8W381/Vu43Ia0NqakkQZ2vzynMmTUtQQ9kNkjzhOwkZC9TAM5R07OZUVIQyHC06f/9JZJpvvA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.1",
+                "@radix-ui/react-collection": "1.1.2",
+                "@radix-ui/react-compose-refs": "1.1.1",
+                "@radix-ui/react-context": "1.1.1",
+                "@radix-ui/react-direction": "1.1.0",
+                "@radix-ui/react-dismissable-layer": "1.1.5",
+                "@radix-ui/react-id": "1.1.0",
+                "@radix-ui/react-presence": "1.1.2",
+                "@radix-ui/react-primitive": "2.0.2",
+                "@radix-ui/react-use-callback-ref": "1.1.0",
+                "@radix-ui/react-use-controllable-state": "1.1.0",
+                "@radix-ui/react-use-layout-effect": "1.1.0",
+                "@radix-ui/react-use-previous": "1.1.0",
+                "@radix-ui/react-visually-hidden": "1.1.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover": {
+            "version": "1.1.14",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.14.tgz",
+            "integrity": "sha512-ODz16+1iIbGUfFEfKx2HTPKizg2MN39uIOV8MXeHnmdd3i/N9Wt7vU46wbHsqA0xoaQyXVcs0KIlBdOA2Y95bw==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.2",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-context": "1.1.2",
+                "@radix-ui/react-dismissable-layer": "1.1.10",
+                "@radix-ui/react-focus-guards": "1.1.2",
+                "@radix-ui/react-focus-scope": "1.1.7",
+                "@radix-ui/react-id": "1.1.1",
+                "@radix-ui/react-popper": "1.2.7",
+                "@radix-ui/react-portal": "1.1.9",
+                "@radix-ui/react-presence": "1.1.4",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-slot": "1.2.3",
+                "@radix-ui/react-use-controllable-state": "1.2.2",
+                "aria-hidden": "^1.2.4",
+                "react-remove-scroll": "^2.6.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/primitive": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+            "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
+            "license": "MIT"
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-arrow": {
+            "version": "1.1.7",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+            "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-primitive": "2.1.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-compose-refs": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+            "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-context": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+            "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-dismissable-layer": {
+            "version": "1.1.10",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz",
+            "integrity": "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.2",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-callback-ref": "1.1.1",
+                "@radix-ui/react-use-escape-keydown": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-focus-guards": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
+            "integrity": "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-focus-scope": {
+            "version": "1.1.7",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+            "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-callback-ref": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-id": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+            "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-popper": {
+            "version": "1.2.7",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.7.tgz",
+            "integrity": "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@floating-ui/react-dom": "^2.0.0",
+                "@radix-ui/react-arrow": "1.1.7",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-context": "1.1.2",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-callback-ref": "1.1.1",
+                "@radix-ui/react-use-layout-effect": "1.1.1",
+                "@radix-ui/react-use-rect": "1.1.1",
+                "@radix-ui/react-use-size": "1.1.1",
+                "@radix-ui/rect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-portal": {
+            "version": "1.1.9",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+            "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-presence": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz",
+            "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==",
             "license": "MIT",
             "dependencies": {
-                "@radix-ui/primitive": "1.1.1",
-                "@radix-ui/react-compose-refs": "1.1.1",
-                "@radix-ui/react-primitive": "2.0.2",
-                "@radix-ui/react-use-callback-ref": "1.1.0",
-                "@radix-ui/react-use-escape-keydown": "1.1.0"
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
             },
             "peerDependencies": {
                 "@types/react": "*",
@@ -1379,19 +2107,13 @@
                 }
             }
         },
-        "node_modules/@radix-ui/react-dropdown-menu": {
-            "version": "2.1.6",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.6.tgz",
-            "integrity": "sha512-no3X7V5fD487wab/ZYSHXq3H37u4NVeLDKI/Ks724X/eEFSSEFYZxWgsIlr1UBeEyDaM29HM5x9p1Nv8DuTYPA==",
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-primitive": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+            "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
             "license": "MIT",
             "dependencies": {
-                "@radix-ui/primitive": "1.1.1",
-                "@radix-ui/react-compose-refs": "1.1.1",
-                "@radix-ui/react-context": "1.1.1",
-                "@radix-ui/react-id": "1.1.0",
-                "@radix-ui/react-menu": "2.1.6",
-                "@radix-ui/react-primitive": "2.0.2",
-                "@radix-ui/react-use-controllable-state": "1.1.0"
+                "@radix-ui/react-slot": "1.2.3"
             },
             "peerDependencies": {
                 "@types/react": "*",
@@ -1408,11 +2130,14 @@
                 }
             }
         },
-        "node_modules/@radix-ui/react-focus-guards": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
-            "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+            "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
             "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2"
+            },
             "peerDependencies": {
                 "@types/react": "*",
                 "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
@@ -1423,38 +2148,29 @@
                 }
             }
         },
-        "node_modules/@radix-ui/react-focus-scope": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.2.tgz",
-            "integrity": "sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==",
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-callback-ref": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+            "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
             "license": "MIT",
-            "dependencies": {
-                "@radix-ui/react-compose-refs": "1.1.1",
-                "@radix-ui/react-primitive": "2.0.2",
-                "@radix-ui/react-use-callback-ref": "1.1.0"
-            },
             "peerDependencies": {
                 "@types/react": "*",
-                "@types/react-dom": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
             },
             "peerDependenciesMeta": {
                 "@types/react": {
                     "optional": true
-                },
-                "@types/react-dom": {
-                    "optional": true
                 }
             }
         },
-        "node_modules/@radix-ui/react-id": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
-            "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-controllable-state": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+            "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
             "license": "MIT",
             "dependencies": {
-                "@radix-ui/react-use-layout-effect": "1.1.0"
+                "@radix-ui/react-use-effect-event": "0.0.2",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
             },
             "peerDependencies": {
                 "@types/react": "*",
@@ -1466,105 +2182,81 @@
                 }
             }
         },
-        "node_modules/@radix-ui/react-label": {
-            "version": "2.1.2",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.2.tgz",
-            "integrity": "sha512-zo1uGMTaNlHehDyFQcDZXRJhUPDuukcnHz0/jnrup0JA6qL+AFpAnty+7VKa9esuU5xTblAZzTGYJKSKaBxBhw==",
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-escape-keydown": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+            "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
             "license": "MIT",
             "dependencies": {
-                "@radix-ui/react-primitive": "2.0.2"
+                "@radix-ui/react-use-callback-ref": "1.1.1"
             },
             "peerDependencies": {
                 "@types/react": "*",
-                "@types/react-dom": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
             },
             "peerDependenciesMeta": {
                 "@types/react": {
                     "optional": true
-                },
-                "@types/react-dom": {
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-layout-effect": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+            "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
                     "optional": true
                 }
             }
         },
-        "node_modules/@radix-ui/react-menu": {
-            "version": "2.1.6",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.6.tgz",
-            "integrity": "sha512-tBBb5CXDJW3t2mo9WlO7r6GTmWV0F0uzHZVFmlRmYpiSK1CDU5IKojP1pm7oknpBOrFZx/YgBRW9oorPO2S/Lg==",
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-rect": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+            "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
             "license": "MIT",
             "dependencies": {
-                "@radix-ui/primitive": "1.1.1",
-                "@radix-ui/react-collection": "1.1.2",
-                "@radix-ui/react-compose-refs": "1.1.1",
-                "@radix-ui/react-context": "1.1.1",
-                "@radix-ui/react-direction": "1.1.0",
-                "@radix-ui/react-dismissable-layer": "1.1.5",
-                "@radix-ui/react-focus-guards": "1.1.1",
-                "@radix-ui/react-focus-scope": "1.1.2",
-                "@radix-ui/react-id": "1.1.0",
-                "@radix-ui/react-popper": "1.2.2",
-                "@radix-ui/react-portal": "1.1.4",
-                "@radix-ui/react-presence": "1.1.2",
-                "@radix-ui/react-primitive": "2.0.2",
-                "@radix-ui/react-roving-focus": "1.1.2",
-                "@radix-ui/react-slot": "1.1.2",
-                "@radix-ui/react-use-callback-ref": "1.1.0",
-                "aria-hidden": "^1.2.4",
-                "react-remove-scroll": "^2.6.3"
+                "@radix-ui/rect": "1.1.1"
             },
             "peerDependencies": {
                 "@types/react": "*",
-                "@types/react-dom": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
             },
             "peerDependenciesMeta": {
                 "@types/react": {
                     "optional": true
-                },
-                "@types/react-dom": {
-                    "optional": true
                 }
             }
         },
-        "node_modules/@radix-ui/react-navigation-menu": {
-            "version": "1.2.5",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.5.tgz",
-            "integrity": "sha512-myMHHQUZ3ZLTi8W381/Vu43Ia0NqakkQZ2vzynMmTUtQQ9kNkjzhOwkZC9TAM5R07OZUVIQyHC06f/9JZJpvvA==",
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-size": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+            "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
             "license": "MIT",
             "dependencies": {
-                "@radix-ui/primitive": "1.1.1",
-                "@radix-ui/react-collection": "1.1.2",
-                "@radix-ui/react-compose-refs": "1.1.1",
-                "@radix-ui/react-context": "1.1.1",
-                "@radix-ui/react-direction": "1.1.0",
-                "@radix-ui/react-dismissable-layer": "1.1.5",
-                "@radix-ui/react-id": "1.1.0",
-                "@radix-ui/react-presence": "1.1.2",
-                "@radix-ui/react-primitive": "2.0.2",
-                "@radix-ui/react-use-callback-ref": "1.1.0",
-                "@radix-ui/react-use-controllable-state": "1.1.0",
-                "@radix-ui/react-use-layout-effect": "1.1.0",
-                "@radix-ui/react-use-previous": "1.1.0",
-                "@radix-ui/react-visually-hidden": "1.1.2"
+                "@radix-ui/react-use-layout-effect": "1.1.1"
             },
             "peerDependencies": {
                 "@types/react": "*",
-                "@types/react-dom": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
             },
             "peerDependenciesMeta": {
                 "@types/react": {
                     "optional": true
-                },
-                "@types/react-dom": {
-                    "optional": true
                 }
             }
         },
+        "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/rect": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+            "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+            "license": "MIT"
+        },
         "node_modules/@radix-ui/react-popper": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz",
@@ -1668,6 +2360,101 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-progress": {
+            "version": "1.1.7",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz",
+            "integrity": "sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-context": "1.1.2",
+                "@radix-ui/react-primitive": "2.1.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-compose-refs": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+            "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-context": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+            "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-primitive": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+            "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-slot": "1.2.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-slot": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+            "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-roving-focus": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.2.tgz",
@@ -1904,6 +2691,39 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-use-effect-event": {
+            "version": "0.0.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+            "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-effect-event/node_modules/@radix-ui/react-use-layout-effect": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+            "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-use-escape-keydown": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
@@ -3429,6 +4249,22 @@
                 "node": ">=6"
             }
         },
+        "node_modules/cmdk": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.1.1.tgz",
+            "integrity": "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "^1.1.1",
+                "@radix-ui/react-dialog": "^1.1.6",
+                "@radix-ui/react-id": "^1.1.0",
+                "@radix-ui/react-primitive": "^2.0.2"
+            },
+            "peerDependencies": {
+                "react": "^18 || ^19 || ^19.0.0-rc",
+                "react-dom": "^18 || ^19 || ^19.0.0-rc"
+            }
+        },
         "node_modules/color-convert": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3572,6 +4408,16 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/date-fns": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+            "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/kossnocorp"
+            }
+        },
         "node_modules/debug": {
             "version": "4.4.0",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
diff --git a/package.json b/package.json
index 693fd0e..1656df4 100644
--- a/package.json
+++ b/package.json
@@ -28,10 +28,12 @@
         "@radix-ui/react-avatar": "^1.1.3",
         "@radix-ui/react-checkbox": "^1.1.4",
         "@radix-ui/react-collapsible": "^1.1.3",
-        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-dialog": "^1.1.14",
         "@radix-ui/react-dropdown-menu": "^2.1.6",
         "@radix-ui/react-label": "^2.1.2",
         "@radix-ui/react-navigation-menu": "^1.2.5",
+        "@radix-ui/react-popover": "^1.1.14",
+        "@radix-ui/react-progress": "^1.1.7",
         "@radix-ui/react-select": "^2.1.6",
         "@radix-ui/react-separator": "^1.1.2",
         "@radix-ui/react-slot": "^1.1.2",
@@ -45,7 +47,9 @@
         "@vitejs/plugin-react": "^4.3.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
         "concurrently": "^9.0.1",
+        "date-fns": "^4.1.0",
         "globals": "^15.14.0",
         "laravel-vite-plugin": "^1.0",
         "lucide-react": "^0.475.0",
diff --git a/resources/js/components/data-table.tsx b/resources/js/components/data-table.tsx
index d704a70..3ac1bd2 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>
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..2305f33
--- /dev/null
+++ b/resources/js/components/tasks/create-task-dialog.tsx
@@ -0,0 +1,252 @@
+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 { Check, ChevronsUpDown } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { useState, useEffect, useCallback } from "react"
+import { useForm } from "@inertiajs/react"
+import { TaskStatus, TaskPriority, User } from "@/types/task"
+import { Badge } from "@/components/ui/badge"
+
+interface CreateTaskDialogProps {
+    users: User[];
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+
+export function CreateTaskDialog({ users, open, onOpenChange }: CreateTaskDialogProps) {
+    const [userPopoverOpen, setUserPopoverOpen] = useState(false);
+    const [filteredUsers, setFilteredUsers] = useState<User[]>(users);
+    
+    const { data, setData, post, processing, errors, reset } = useForm({
+        name: '',
+        description: '',
+        status: 'pending' as TaskStatus,
+        priority: 'medium' as TaskPriority,
+        due_date: '',
+        users: [] as number[]
+    });
+
+    // Update filtered users when users prop changes
+    useEffect(() => {
+        setFilteredUsers(users);
+    }, [users]);
+
+    const handleUserSearch = useCallback((searchTerm: string) => {
+        const filtered = users.filter(user => 
+            user.name.toLowerCase().includes(searchTerm.toLowerCase())
+        );
+        setFilteredUsers(filtered);
+    }, [users]);
+
+    const handleUserSelect = useCallback((userId: number) => {
+        const currentUsers = [...data.users];
+        const index = currentUsers.indexOf(userId);
+        
+        if (index === -1) {
+            currentUsers.push(userId);
+        } else {
+            currentUsers.splice(index, 1);
+        }
+        
+        setData('users', currentUsers);
+    }, [data.users, setData]);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        post('/tasks', {
+            onSuccess: () => {
+                reset();
+                onOpenChange(false);
+            }
+        });
+    };
+
+    const handleDropdownToggle = (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setUserPopoverOpen(prev => !prev);
+    };
+
+    const handleDropdownClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+    };
+
+    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="grid grid-cols-2 gap-4">
+                                <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>
+
+                            <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">
+                            <div className="space-y-2">
+                                <Label>Assign Users</Label>
+                                <div className="relative">
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        role="combobox"
+                                        className="w-full justify-between"
+                                        onClick={handleDropdownToggle}
+                                    >
+                                        {data.users.length > 0
+                                            ? `${data.users.length} users selected`
+                                            : "Select users..."}
+                                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                    </Button>
+                                    {userPopoverOpen && (
+                                        <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 users..." 
+                                                    className="border-0 focus-visible:ring-0"
+                                                    onClick={handleDropdownClick}
+                                                    onChange={(e) => handleUserSearch(e.target.value)}
+                                                />
+                                            </div>
+                                            <div className="max-h-[300px] overflow-auto">
+                                                {(filteredUsers.length > 0 ? filteredUsers : users).map((user) => (
+                                                    <div
+                                                        key={user.id}
+                                                        className="flex items-center px-4 py-2 hover:bg-accent cursor-pointer"
+                                                        onClick={(e) => {
+                                                            e.preventDefault();
+                                                            e.stopPropagation();
+                                                            handleUserSelect(user.id);
+                                                        }}
+                                                    >
+                                                        <Check
+                                                            className={cn(
+                                                                "mr-2 h-4 w-4",
+                                                                data.users.includes(user.id) ? "opacity-100" : "opacity-0"
+                                                            )}
+                                                        />
+                                                        {user.name}
+                                                    </div>
+                                                ))}
+                                                {filteredUsers.length === 0 && (
+                                                    <div className="px-4 py-2 text-sm text-muted-foreground">
+                                                        No users found.
+                                                    </div>
+                                                )}
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                                {data.users.length > 0 && (
+                                    <div className="flex flex-wrap gap-1">
+                                        {users
+                                            .filter(user => data.users.includes(user.id))
+                                            .map(user => (
+                                                <Badge key={user.id} variant="secondary">
+                                                    {user.name}
+                                                </Badge>
+                                            ))}
+                                    </div>
+                                )}
+                                {errors.users && (
+                                    <p className="text-sm text-red-500">{errors.users}</p>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+
+                    <DialogFooter>
+                        <Button type="submit" disabled={processing}>
+                            Create Task
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/resources/js/components/tasks/task-progress.tsx b/resources/js/components/tasks/task-progress.tsx
new file mode 100644
index 0000000..84702d6
--- /dev/null
+++ b/resources/js/components/tasks/task-progress.tsx
@@ -0,0 +1,25 @@
+import { Task } from "@/types/task"
+import { Progress } from "@/components/ui/progress"
+
+interface TaskProgressProps {
+    tasks: Task[]
+}
+
+export function TaskProgress({ tasks }: TaskProgressProps) {
+    const completedCount = tasks.filter(t => t.status === 'completed').length
+    const totalCount = tasks.length
+    const progress = totalCount > 0 ? (completedCount / totalCount) * 100 : 0
+
+    return (
+        <div className="flex flex-col gap-2 w-40">
+            <div className="flex justify-between items-center">
+                <span className="text-sm font-medium">Progress</span>
+                <span className="text-sm font-semibold text-green-600">{Math.round(progress)}%</span>
+            </div>
+            <Progress 
+                value={progress} 
+                className="h-3 bg-muted [&>div]:bg-gradient-to-r [&>div]:from-green-500 [&>div]:to-green-600 [&>div]:transition-all [&>div]:duration-500"
+            />
+        </div>
+    )
+} 
\ No newline at end of file
diff --git a/resources/js/components/tasks/task-statistics.tsx b/resources/js/components/tasks/task-statistics.tsx
new file mode 100644
index 0000000..cb2d319
--- /dev/null
+++ b/resources/js/components/tasks/task-statistics.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/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/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/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/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/users/create-user-dialog.tsx b/resources/js/components/users/create-user-dialog.tsx
index 5e81e44..d40f96d 100644
--- a/resources/js/components/users/create-user-dialog.tsx
+++ b/resources/js/components/users/create-user-dialog.tsx
@@ -1,7 +1,7 @@
 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 { PageProps } from '@/types';
 
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
@@ -11,7 +11,7 @@ import InputError from '@/components/input-error';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Card, CardContent } from '@/components/ui/card';
 
-interface PageProps extends InertiaPageProps {
+type DialogProps = {
     auth: {
         user: {
             client_id: number;
@@ -24,7 +24,7 @@ interface PageProps extends InertiaPageProps {
 }
 
 export default function CreateUserDialog() {
-    const { auth, roles } = usePage<PageProps>().props;
+    const { auth, roles } = usePage<PageProps<DialogProps>>().props;
     const clientId = auth.user.client_id;
 
     const { data, setData, post, processing, errors, reset } = useForm({
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..abba2e8
--- /dev/null
+++ b/resources/js/pages/admin/admin-task-details.tsx
@@ -0,0 +1,281 @@
+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, useEffect } from 'react';
+import { router } from '@inertiajs/react';
+import { format } from 'date-fns';
+import { useForm } from '@inertiajs/react';
+import { Check, ChevronsUpDown, Trash2 } 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"
+
+
+
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Tasks',
+        href: '/tasks',
+    },
+    {
+        title: 'Task Details',
+        href: '/tasks/details',
+    },
+];
+
+interface PageProps {
+    task: Task;
+    all_users: User[];
+}
+
+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 priorityColors = {
+    'low': 'bg-gray-100 text-gray-800',
+    'medium': 'bg-orange-100 text-orange-800',
+    'high': 'bg-red-100 text-red-800'
+};
+
+export default function TaskDetails({ task, all_users }: PageProps) {
+    const [isEditing, setIsEditing] = useState(false);
+    const { data, setData, put, processing, errors } = useForm({
+        name: task.name,
+        description: task.description,
+        status: task.status,
+        priority: task.priority,
+        due_date: task.due_date,
+        users: task.users.map(user => user.id)
+    });
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        put(`/tasks/${task.id}`, {
+            onSuccess: () => {
+                setIsEditing(false);
+            }
+        });
+    };
+
+    const handleCancel = () => {
+        setIsEditing(false);
+    };
+
+    const handleDelete = () => {
+        if (confirm("Are you sure you want to delete this task?")) {
+            router.delete(`/tasks/${task.id}`);
+        }
+    };
+
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title={`Task: ${task.name}`} />
+            <div className="flex h-full flex-1 flex-col gap-4 p-4">
+                <div className="flex items-center justify-between">
+                    <h1 className="text-2xl font-semibold">Task Details</h1>
+                    <div className="flex gap-2">
+                        {isEditing ? (
+                            <>
+                                <Button variant="outline" onClick={handleCancel}>
+                                    Cancel
+                                </Button>
+                                <Button onClick={handleSubmit} disabled={processing}>
+                                    Save Changes
+                                </Button>
+                            </>
+                        ) : (
+                            <>
+                                <Button onClick={() => setIsEditing(true)}>
+                                    Edit Task
+                                </Button>
+                                <Button
+                                    variant="destructive"
+                                    onClick={handleDelete}
+                                >
+                                    <Trash2 className="h-4 w-4 mr-2" />
+                                    Delete Task
+                                </Button>
+                            </>
+                        )}
+                    </div>
+                </div>
+
+                <Card>
+                    <CardHeader>
+                        <CardTitle>Task Information</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <form onSubmit={handleSubmit} className="space-y-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="name">Task Name</Label>
+                                {isEditing ? (
+                                    <Input
+                                        id="name"
+                                        value={data.name}
+                                        onChange={e => setData('name', e.target.value)}
+                                        error={errors.name}
+                                    />
+                                ) : (
+                                    <div className="text-lg font-medium">{task.name}</div>
+                                )}
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="description">Description</Label>
+                                {isEditing ? (
+                                    <Textarea
+                                        id="description"
+                                        value={data.description}
+                                        onChange={e => setData('description', e.target.value)}
+                                        error={errors.description}
+                                    />
+                                ) : (
+                                    <div className="text-muted-foreground">{task.description}</div>
+                                )}
+                            </div>
+
+                            <div className="grid grid-cols-2 gap-4">
+                                <div className="space-y-2">
+                                    <Label htmlFor="status">Status</Label>
+                                    {isEditing ? (
+                                        <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>
+                                    ) : (
+                                        <Badge className={statusColors[task.status]}>
+                                            {task.status.replace('_', ' ')}
+                                        </Badge>
+                                    )}
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="priority">Priority</Label>
+                                    {isEditing ? (
+                                        <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>
+                                    ) : (
+                                        <Badge className={priorityColors[task.priority]}>
+                                            {task.priority}
+                                        </Badge>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label>Due Date</Label>
+                                {isEditing ? (
+                                    <Input
+                                        type="date"
+                                        value={data.due_date ? new Date(data.due_date).toISOString().split('T')[0] : ''}
+                                        onChange={e => setData('due_date', e.target.value)}
+                                        error={errors.due_date}
+                                    />
+                                ) : (
+                                    <div>
+                                        {task.due_date ? format(new Date(task.due_date), 'MMM dd, yyyy') : 'No due date'}
+                                    </div>
+                                )}
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label>Assigned Users</Label>
+                                {isEditing ? (
+                                    <Popover>
+                                        <PopoverTrigger asChild>
+                                            <Button
+                                                variant="outline"
+                                                role="combobox"
+                                                className="w-full justify-between"
+                                            >
+                                                {data.users.length > 0
+                                                    ? `${data.users.length} users selected`
+                                                    : "Select users..."}
+                                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                            </Button>
+                                        </PopoverTrigger>
+                                        <PopoverContent className="w-full p-0">
+                                            <Command>
+                                                <CommandInput placeholder="Search users..." />
+                                                <CommandEmpty>No users found.</CommandEmpty>
+                                                <CommandGroup>
+                                                    {all_users.map((user) => (
+                                                        <CommandItem
+                                                            key={user.id}
+                                                            onSelect={() => {
+                                                                const currentUsers = [...data.users];
+                                                                const index = currentUsers.indexOf(user.id);
+                                                                if (index === -1) {
+                                                                    currentUsers.push(user.id);
+                                                                } else {
+                                                                    currentUsers.splice(index, 1);
+                                                                }
+                                                                setData('users', currentUsers);
+                                                            }}
+                                                        >
+                                                            <Check
+                                                                className={cn(
+                                                                    "mr-2 h-4 w-4",
+                                                                    data.users.includes(user.id) ? "opacity-100" : "opacity-0"
+                                                                )}
+                                                            />
+                                                            {user.name}
+                                                        </CommandItem>
+                                                    ))}
+                                                </CommandGroup>
+                                            </Command>
+                                        </PopoverContent>
+                                    </Popover>
+                                ) : (
+                                    <div className="flex flex-wrap gap-1">
+                                        {task.users.map((user) => (
+                                            <Badge key={user.id} variant="secondary">
+                                                {user.name}
+                                            </Badge>
+                                        ))}
+                                    </div>
+                                )}
+                            </div>
+                        </form>
+                    </CardContent>
+                </Card>
+            </div>
+        </AppLayout>
+    );
+}
\ No newline at end of file
diff --git a/resources/js/pages/admin/admin-task-list.tsx b/resources/js/pages/admin/admin-task-list.tsx
index b125e55..3d00848 100644
--- a/resources/js/pages/admin/admin-task-list.tsx
+++ b/resources/js/pages/admin/admin-task-list.tsx
@@ -2,16 +2,17 @@ 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 { Card, CardContent, CardDescription } from '@/components/ui/card';
 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 { Plus } from 'lucide-react';
 import { DataTable } from '@/components/data-table';
 import { ColumnDef } from '@tanstack/react-table';
+import { useState } from 'react';
+import { router } from '@inertiajs/react';
+import { format } from 'date-fns';
+import { Task, TaskStatus, User } from '@/types/task';
+import { CreateTaskDialog } from '@/components/tasks/create-task-dialog';
+import { AdminTaskStats } from '@/components/tasks/admin-task-stats';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -20,103 +21,22 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-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;
+interface PageProps {
+    tasks: Task[];
+    users: User[];
 }
 
-// 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>
-            )
-        },
+        accessorKey: "name",
+        header: "Task",
         cell: ({ row }) => {
             const task = row.original
             return (
                 <div>
-                    <div className="font-medium">{task.title}</div>
+                    <div className="font-medium">{task.name}</div>
                     <div className="text-sm text-muted-foreground">{task.description}</div>
                 </div>
             )
@@ -127,65 +47,86 @@ const columns: ColumnDef<Task>[] = [
         header: "Status",
         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 variant="outline" className={statusColors[status]}>
-                    {status}
+                <Badge className={statusColors[status]}>
+                    {status.replace('_', ' ')}
                 </Badge>
             )
         },
     },
     {
-        accessorKey: "priority",
-        header: "Priority",
+        accessorKey: "due_date",
+        header: "Due Date",
         cell: ({ row }) => {
-            const priority = row.getValue("priority") as TaskPriority
-            return (
-                <Badge variant="outline" className={priorityColors[priority]}>
-                    {priority}
-                </Badge>
-            )
+            const date = row.original.due_date
+            if (!date) return '-'
+            try {
+                return format(new Date(date), 'MMM dd, yyyy')
+            } catch (error) {
+                return '-'
+            }
         },
     },
     {
-        accessorKey: "dueDate",
-        header: "Due Date",
-    },
-    {
-        accessorKey: "assignedTo",
+        accessorKey: "users",
         header: "Assigned To",
+        cell: ({ row }) => {
+            const assignedUsers = row.original.users || []
+            return (
+                <div className="flex flex-wrap gap-1">
+                    {assignedUsers.map((user) => (
+                        <Badge key={user.id} variant="secondary">
+                            {user.name}
+                        </Badge>
+                    ))}
+                </div>
+            )
+        },
     },
 ];
 
-export default function Tasks() {
+export default function Tasks({ tasks, users }: PageProps) {
+    const [isTaskDialogOpen, setIsTaskDialogOpen] = useState(false);
+
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
             <Head title="Tasks" />
             <div className="flex h-full flex-1 flex-col gap-4 p-4">
-                <div className="flex items-center justify-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 className="flex items-center justify-between">
+                    <h1 className="text-2xl font-semibold ml-5">Manage Your Tasks</h1>
+                    <div className="flex items-center gap-5">
+                        <AdminTaskStats tasks={tasks} />
                     </div>
                 </div>
+
+                <Card>
+                    <CardContent className="pt-6 ">
+                        <DataTable
+                            columns={columns}
+                            data={tasks}
+                            searchPlaceholder="Search tasks..."
+                            searchColumn="name"
+                            onRowClick={(task) => router.visit(`/tasks/${task.id}`)}
+                            addButton={
+                                <Button onClick={() => setIsTaskDialogOpen(true)} className="cursor-pointer">
+                                    <Plus className="mr-2 h-4 w-4" />
+                                    Add Task
+                                </Button>
+                            }
+                        />
+                    </CardContent>
+                </Card>
+
+                <CreateTaskDialog
+                    users={users}
+                    open={isTaskDialogOpen}
+                    onOpenChange={setIsTaskDialogOpen}
+                />
             </div>
         </AppLayout>
     );
diff --git a/resources/js/pages/admin/admin-user-details.tsx b/resources/js/pages/admin/admin-user-details.tsx
index 92a44e0..357c201 100644
--- a/resources/js/pages/admin/admin-user-details.tsx
+++ b/resources/js/pages/admin/admin-user-details.tsx
@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
 import { User, Trash2 } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { PageProps } from '@/types';
 
 interface User {
     id: number;
@@ -14,30 +15,26 @@ interface User {
     email: string;
 }
 
-interface UserDetailsProps {
-    user: User;
-}
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Users',
+        href: '/users',
+    },
+    {
+        title: 'User Details',
+        href: '/users/details',
+    },
+];
 
-export default function UserDetails({ user: initialUser }: UserDetailsProps) {
+export default function UserDetails({ user }: PageProps<{ user: User }>) {
     const [isEditing, setIsEditing] = useState(false);
     const { data, setData, put, processing, errors, reset } = useForm({
-        name: initialUser.name,
-        email: initialUser.email,
+        name: user.name,
+        email: user.email,
     });
 
-    const breadcrumbs: BreadcrumbItem[] = [
-        {
-            title: 'Users',
-            href: '/users',
-        },
-        {
-            title: 'User Details',
-            href: `/users/${initialUser.id}`,
-        },
-    ];
-
     const handleSave = () => {
-        put(`/users/${initialUser.id}`, {
+        put(`/users/${user.id}`, {
             onSuccess: () => {
                 setIsEditing(false);
             },
@@ -51,7 +48,7 @@ export default function UserDetails({ user: initialUser }: UserDetailsProps) {
 
     const handleDelete = () => {
         if (confirm('Are you sure you want to delete this user?')) {
-            router.delete(`/users/${initialUser.id}`, {
+            router.delete(`/users/${user.id}`, {
             });
         }
     };
diff --git a/resources/js/pages/admin/admin-user-list.tsx b/resources/js/pages/admin/admin-user-list.tsx
index ce6d7a2..d2f8ef6 100644
--- a/resources/js/pages/admin/admin-user-list.tsx
+++ b/resources/js/pages/admin/admin-user-list.tsx
@@ -86,30 +86,29 @@ 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 className="flex h-full flex-1 flex-col gap-4 p-4">
+                <h1 className="text-2xl font-semibold ml-5">Manage Your Users</h1>
+                <div className="flex h-full flex-1 flex-col gap-5">
+                    <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>
diff --git a/resources/js/types/task.ts b/resources/js/types/task.ts
new file mode 100644
index 0000000..20fb363
--- /dev/null
+++ b/resources/js/types/task.ts
@@ -0,0 +1,18 @@
+export type TaskStatus = 'pending' | 'in_progress' | 'completed';
+export type TaskPriority = 'low' | 'medium' | 'high';
+
+export interface User {
+    id: number;
+    name: string;
+    email: string;
+}
+
+export interface Task {
+    id: number;
+    name: string;
+    description: string;
+    status: TaskStatus;
+    priority: TaskPriority;
+    due_date: string | null;
+    users: User[];
+} 
\ No newline at end of file

From df1e2db8d89e6147c69be9679310a0c8b458d2ef Mon Sep 17 00:00:00 2001
From: ryanmueller24 <ryanpmueller24@gmail.com>
Date: Fri, 23 May 2025 13:49:39 -0500
Subject: [PATCH 04/21] small fixes

---
 database/seeders/AdditionalUsersSeeder.php    |   1 +
 database/seeders/UserSeeder.php               | 168 ++++++++++++------
 .../{task-statistics.tsx => task-summary.tsx} |   0
 resources/js/pages/admin/admin-task-list.tsx  |  55 +++++-
 4 files changed, 163 insertions(+), 61 deletions(-)
 create mode 100644 database/seeders/AdditionalUsersSeeder.php
 rename resources/js/components/tasks/{task-statistics.tsx => task-summary.tsx} (100%)

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/UserSeeder.php b/database/seeders/UserSeeder.php
index e40ee8a..65ed2ab 100644
--- a/database/seeders/UserSeeder.php
+++ b/database/seeders/UserSeeder.php
@@ -12,61 +12,119 @@ class UserSeeder extends Seeder
 {
     public function run()
     {
-        
-        User::create([
-            # client admin
-            'name' => 'Ryan Mueller',
-            'password' => Hash::make('password'),
-            'email' => 'ryan@equippers.com',
-            'password_set' => true,
-            'email_verified_at' => now(),
-            'client_id' => 1,
-            'role_id' => 2,
+        $users = [
+            [
+                'name' => 'Ryan Mueller',
+                'email' => 'ryan@equippers.com',
+                'role_id' => 2, // Client-Admin
+            ],
+            [
+                'name' => 'Andrew McDowell',
+                'email' => 'andrew@equippers.com',
+                'role_id' => 3, // Member
+            ],
+            [
+                'name' => 'Allison Port',
+                'email' => 'allison@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'George Kalafatis',
+                'email' => 'george@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'John Doe',
+                'email' => 'john@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Sarah Johnson',
+                'email' => 'sarah@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Michael Chen',
+                'email' => 'michael@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Emma Wilson',
+                'email' => 'emma@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'David Brown',
+                'email' => 'david@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Lisa Anderson',
+                'email' => 'lisa@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'James Taylor',
+                'email' => 'james@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Rachel Martinez',
+                'email' => 'rachel@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Thomas White',
+                'email' => 'thomas@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Olivia Lee',
+                'email' => 'olivia@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Daniel Kim',
+                'email' => 'daniel@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Sophia Garcia',
+                'email' => 'sophia@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'William Clark',
+                'email' => 'william@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Ava Rodriguez',
+                'email' => 'ava@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Ethan Moore',
+                'email' => 'ethan@equippers.com',
+                'role_id' => 3,
+            ],
+            [
+                'name' => 'Isabella Thompson',
+                'email' => 'isabella@equippers.com',
+                'role_id' => 3,
+            ],
+        ];
 
-        ]);
-
-        User::create([
-            # client member
-            'name' => 'Andrew McDowell',
-            'password' => Hash::make('password'),
-            'email' => 'andrew@equippers.com',
-            'password_set' => true,
-            'email_verified_at' => now(),
-            'client_id' => 1,
-            'role_id' => 3,
-        ]);
-
-        User::create([
-            # client member
-            'name' => 'Allison Port',
-            'password' => Hash::make('password'),
-            'email' => 'allison@equippers.com',
-            'password_set' => true,
-            'email_verified_at' => now(),
-            'client_id' => 1,
-            'role_id' => 3,
-        ]);
-
-        User::create([
-            # client member
-            'name' => 'George Kalafatis',
-            'password' => Hash::make('password'),
-            'email' => 'george@equippers.com',
-            'password_set' => true,
-            'email_verified_at' => now(),
-            'client_id' => 1,
-            'role_id' => 3,
-        ]);
-
-        User::create([
-            # client member
-            'name' => 'John Doe',
-            'password' => Hash::make('password'),
-            'email' => 'john@equippers.com',
-            'password_set' => true,
-            'email_verified_at' => now(),
-            'client_id' => 1,
-            'role_id' => 3,
-        ]);
+        foreach ($users as $userData) {
+            User::create([
+                'name' => $userData['name'],
+                'email' => $userData['email'],
+                'password' => Hash::make('password'),
+                'password_set' => true,
+                'email_verified_at' => now(),
+                'client_id' => 1,
+                'role_id' => $userData['role_id'],
+            ]);
+        }
     }
 }
diff --git a/resources/js/components/tasks/task-statistics.tsx b/resources/js/components/tasks/task-summary.tsx
similarity index 100%
rename from resources/js/components/tasks/task-statistics.tsx
rename to resources/js/components/tasks/task-summary.tsx
diff --git a/resources/js/pages/admin/admin-task-list.tsx b/resources/js/pages/admin/admin-task-list.tsx
index 3d00848..ce052da 100644
--- a/resources/js/pages/admin/admin-task-list.tsx
+++ b/resources/js/pages/admin/admin-task-list.tsx
@@ -4,7 +4,7 @@ import { type BreadcrumbItem } from '@/types';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Plus } from 'lucide-react';
+import { Plus, ArrowUpDown } from 'lucide-react';
 import { DataTable } from '@/components/data-table';
 import { ColumnDef } from '@tanstack/react-table';
 import { useState } from 'react';
@@ -21,7 +21,6 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-type TaskPriority = 'low' | 'medium' | 'high';
 
 interface PageProps {
     tasks: Task[];
@@ -31,7 +30,18 @@ interface PageProps {
 const columns: ColumnDef<Task>[] = [
     {
         accessorKey: "name",
-        header: "Task",
+        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 (
@@ -44,7 +54,18 @@ const columns: ColumnDef<Task>[] = [
     },
     {
         accessorKey: "status",
-        header: "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 = {
@@ -61,7 +82,18 @@ const columns: ColumnDef<Task>[] = [
     },
     {
         accessorKey: "due_date",
-        header: "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 '-'
@@ -74,7 +106,18 @@ const columns: ColumnDef<Task>[] = [
     },
     {
         accessorKey: "users",
-        header: "Assigned To",
+        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 (

From 0b50da58640e248739a6d9619e6993a7eba3263a Mon Sep 17 00:00:00 2001
From: ryanmueller24 <ryanpmueller24@gmail.com>
Date: Fri, 23 May 2025 14:36:57 -0500
Subject: [PATCH 05/21] small change to task details

---
 .../js/pages/admin/admin-task-details.tsx     | 202 ++++++++++--------
 1 file changed, 107 insertions(+), 95 deletions(-)

diff --git a/resources/js/pages/admin/admin-task-details.tsx b/resources/js/pages/admin/admin-task-details.tsx
index abba2e8..530584c 100644
--- a/resources/js/pages/admin/admin-task-details.tsx
+++ b/resources/js/pages/admin/admin-task-details.tsx
@@ -9,18 +9,15 @@ 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, useEffect } from 'react';
+import { useState } from 'react';
 import { router } from '@inertiajs/react';
 import { format } from 'date-fns';
 import { useForm } from '@inertiajs/react';
-import { Check, ChevronsUpDown, Trash2 } from "lucide-react"
+import { Check, ChevronsUpDown, Trash2, Calendar, Users, AlertCircle } from "lucide-react"
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 import { cn } from "@/lib/utils"
 
-
-
-
 const breadcrumbs: BreadcrumbItem[] = [
     {
         title: 'Tasks',
@@ -28,7 +25,7 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
     {
         title: 'Task Details',
-        href: '/tasks/details',
+        href: '#',
     },
 ];
 
@@ -38,15 +35,15 @@ interface PageProps {
 }
 
 const statusColors = {
-    'pending': 'bg-yellow-100 text-yellow-800',
-    'in_progress': 'bg-blue-100 text-blue-800',
-    'completed': 'bg-green-100 text-green-800'
+    '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-100 text-gray-800',
-    'medium': 'bg-orange-100 text-orange-800',
-    'high': 'bg-red-100 text-red-800'
+    '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) {
@@ -126,9 +123,10 @@ export default function TaskDetails({ task, all_users }: PageProps) {
                                         value={data.name}
                                         onChange={e => setData('name', e.target.value)}
                                         error={errors.name}
+                                        className="h-10"
                                     />
                                 ) : (
-                                    <div className="text-lg font-medium">{task.name}</div>
+                                    <div className="text-lg font-medium mt-2 h-10 flex items-center">{task.name}</div>
                                 )}
                             </div>
 
@@ -140,13 +138,16 @@ export default function TaskDetails({ task, all_users }: PageProps) {
                                         value={data.description}
                                         onChange={e => setData('description', e.target.value)}
                                         error={errors.description}
+                                        className="min-h-[100px]"
                                     />
                                 ) : (
-                                    <div className="text-muted-foreground">{task.description}</div>
+                                    <div className="text-muted-foreground bg-muted/50 p-3 rounded-md mt-2 min-h-[100px]">
+                                        {task.description}
+                                    </div>
                                 )}
                             </div>
 
-                            <div className="grid grid-cols-2 gap-4">
+                            <div className="grid grid-cols-2 gap-6">
                                 <div className="space-y-2">
                                     <Label htmlFor="status">Status</Label>
                                     {isEditing ? (
@@ -156,7 +157,7 @@ export default function TaskDetails({ task, all_users }: PageProps) {
                                                 setData('status', value as TaskStatus);
                                             }}
                                         >
-                                            <SelectTrigger>
+                                            <SelectTrigger className="h-10">
                                                 <SelectValue />
                                             </SelectTrigger>
                                             <SelectContent>
@@ -166,9 +167,11 @@ export default function TaskDetails({ task, all_users }: PageProps) {
                                             </SelectContent>
                                         </Select>
                                     ) : (
-                                        <Badge className={statusColors[task.status]}>
-                                            {task.status.replace('_', ' ')}
-                                        </Badge>
+                                        <div className="mt-2 h-10 flex items-center">
+                                            <Badge className={cn(statusColors[task.status], "text-sm font-medium px-3 py-1")}>
+                                                {task.status.replace('_', ' ')}
+                                            </Badge>
+                                        </div>
                                     )}
                                 </div>
 
@@ -181,7 +184,7 @@ export default function TaskDetails({ task, all_users }: PageProps) {
                                                 setData('priority', value as TaskPriority);
                                             }}
                                         >
-                                            <SelectTrigger>
+                                            <SelectTrigger className="h-10">
                                                 <SelectValue />
                                             </SelectTrigger>
                                             <SelectContent>
@@ -191,86 +194,95 @@ export default function TaskDetails({ task, all_users }: PageProps) {
                                             </SelectContent>
                                         </Select>
                                     ) : (
-                                        <Badge className={priorityColors[task.priority]}>
-                                            {task.priority}
-                                        </Badge>
+                                        <div className="mt-2 h-10 flex items-center">
+                                            <Badge className={cn(priorityColors[task.priority], "text-sm font-medium px-3 py-1")}>
+                                                {task.priority}
+                                            </Badge>
+                                        </div>
                                     )}
                                 </div>
                             </div>
 
-                            <div className="space-y-2">
-                                <Label>Due Date</Label>
-                                {isEditing ? (
-                                    <Input
-                                        type="date"
-                                        value={data.due_date ? new Date(data.due_date).toISOString().split('T')[0] : ''}
-                                        onChange={e => setData('due_date', e.target.value)}
-                                        error={errors.due_date}
-                                    />
-                                ) : (
-                                    <div>
-                                        {task.due_date ? format(new Date(task.due_date), 'MMM dd, yyyy') : 'No due date'}
-                                    </div>
-                                )}
-                            </div>
+                            <div className="grid grid-cols-2 gap-6">
+                                <div className="space-y-2">
+                                    <Label>Due Date</Label>
+                                    {isEditing ? (
+                                        <Input
+                                            type="date"
+                                            value={data.due_date ? new Date(data.due_date).toISOString().split('T')[0] : ''}
+                                            onChange={e => setData('due_date', e.target.value)}
+                                            error={errors.due_date}
+                                            className="h-10"
+                                        />
+                                    ) : (
+                                        <div className="flex items-center text-muted-foreground mt-2 h-10">
+                                            <Calendar className="h-4 w-4 mr-2" />
+                                            {task.due_date ? format(new Date(task.due_date), 'MMM dd, yyyy') : 'No due date'}
+                                        </div>
+                                    )}
+                                </div>
 
-                            <div className="space-y-2">
-                                <Label>Assigned Users</Label>
-                                {isEditing ? (
-                                    <Popover>
-                                        <PopoverTrigger asChild>
-                                            <Button
-                                                variant="outline"
-                                                role="combobox"
-                                                className="w-full justify-between"
-                                            >
-                                                {data.users.length > 0
-                                                    ? `${data.users.length} users selected`
-                                                    : "Select users..."}
-                                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                                            </Button>
-                                        </PopoverTrigger>
-                                        <PopoverContent className="w-full p-0">
-                                            <Command>
-                                                <CommandInput placeholder="Search users..." />
-                                                <CommandEmpty>No users found.</CommandEmpty>
-                                                <CommandGroup>
-                                                    {all_users.map((user) => (
-                                                        <CommandItem
-                                                            key={user.id}
-                                                            onSelect={() => {
-                                                                const currentUsers = [...data.users];
-                                                                const index = currentUsers.indexOf(user.id);
-                                                                if (index === -1) {
-                                                                    currentUsers.push(user.id);
-                                                                } else {
-                                                                    currentUsers.splice(index, 1);
-                                                                }
-                                                                setData('users', currentUsers);
-                                                            }}
-                                                        >
-                                                            <Check
-                                                                className={cn(
-                                                                    "mr-2 h-4 w-4",
-                                                                    data.users.includes(user.id) ? "opacity-100" : "opacity-0"
-                                                                )}
-                                                            />
-                                                            {user.name}
-                                                        </CommandItem>
-                                                    ))}
-                                                </CommandGroup>
-                                            </Command>
-                                        </PopoverContent>
-                                    </Popover>
-                                ) : (
-                                    <div className="flex flex-wrap gap-1">
-                                        {task.users.map((user) => (
-                                            <Badge key={user.id} variant="secondary">
-                                                {user.name}
-                                            </Badge>
-                                        ))}
-                                    </div>
-                                )}
+                                <div className="space-y-2">
+                                    <Label>Assigned Users</Label>
+                                    {isEditing ? (
+                                        <Popover>
+                                            <PopoverTrigger asChild>
+                                                <Button
+                                                    variant="outline"
+                                                    role="combobox"
+                                                    className="w-full justify-between h-10"
+                                                >
+                                                    {data.users.length > 0
+                                                        ? `${data.users.length} users selected`
+                                                        : "Select users..."}
+                                                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                                </Button>
+                                            </PopoverTrigger>
+                                            <PopoverContent className="w-full p-0" align="start">
+                                                <Command className="max-h-[200px]">
+                                                    <CommandInput placeholder="Search users..." />
+                                                    <CommandEmpty>No users found.</CommandEmpty>
+                                                    <CommandGroup className="overflow-y-auto">
+                                                        {all_users.map((user) => (
+                                                            <CommandItem
+                                                                key={user.id}
+                                                                onSelect={() => {
+                                                                    const newUsers = data.users.includes(user.id)
+                                                                        ? data.users.filter(id => id !== user.id)
+                                                                        : [...data.users, user.id];
+                                                                    setData('users', newUsers);
+                                                                }}
+                                                                className="flex items-center gap-2 px-2 py-1.5"
+                                                            >
+                                                                <Check
+                                                                    className={cn(
+                                                                        "h-4 w-4",
+                                                                        data.users.includes(user.id) ? "opacity-100" : "opacity-0"
+                                                                    )}
+                                                                />
+                                                                <span>{user.name}</span>
+                                                            </CommandItem>
+                                                        ))}
+                                                    </CommandGroup>
+                                                </Command>
+                                            </PopoverContent>
+                                        </Popover>
+                                    ) : (
+                                        <div className="space-y-2 mt-2 min-h-[40px]">
+                                            <div className="flex items-center text-muted-foreground">
+                                                <Users className="h-4 w-4 mr-2" />
+                                                {task.users.length} {task.users.length === 1 ? 'User' : 'Users'} Assigned
+                                            </div>
+                                            <div className="flex flex-wrap gap-1">
+                                                {task.users.map((user) => (
+                                                    <Badge key={user.id} variant="secondary" className="text-sm">
+                                                        {user.name}
+                                                    </Badge>
+                                                ))}
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
                             </div>
                         </form>
                     </CardContent>

From 656a4813ae659dcb6c2f4717e6b48ebad79ac52d Mon Sep 17 00:00:00 2001
From: ryanmueller24 <ryanpmueller24@gmail.com>
Date: Fri, 23 May 2025 16:58:43 -0500
Subject: [PATCH 06/21] Mostly meeting changes but a few addition to the
 user/task pieces

---
 .../Crud/ClientAdmin/MeetingController.php    | 182 +++++++++
 .../Crud/ClientAdmin/TaskController.php       |   4 +-
 .../Crud/ClientAdmin/UserController.php       |   4 +-
 app/Providers/AppServiceProvider.php          |   9 +-
 database/seeders/AgendaSeeder.php             |  26 ++
 database/seeders/DatabaseSeeder.php           |   2 +
 database/seeders/MeetingSeeder.php            |  60 +++
 database/seeders/TaskSeeder.php               |   2 -
 resources/js/components/app-sidebar.tsx       |   8 +-
 resources/js/components/data-table.tsx        |   2 +
 .../meetings/create-meeting-dialog.tsx        | 120 ++++++
 .../components/meetings/meeting-summary.tsx   |  66 ++++
 .../components/tasks/create-task-dialog.tsx   | 193 +++-------
 .../js/components/ui/delete-confirmation.tsx  |  44 +++
 resources/js/components/ui/multi-select.tsx   | 142 +++++++
 resources/js/components/ui/single-select.tsx  | 102 +++++
 resources/js/components/ui/toast.tsx          |  20 +
 .../components/users/create-user-dialog.tsx   |  52 ++-
 .../js/components/users/user-summary.tsx      |  54 +++
 resources/js/layouts/app-layout.tsx           |  19 +-
 .../js/pages/admin/admin-meeting-details.tsx  | 358 ++++++++++++++++++
 .../js/pages/admin/admin-meeting-list.tsx     | 202 ++++++++++
 .../js/pages/admin/admin-task-details.tsx     |  50 ++-
 .../js/pages/admin/admin-user-details.tsx     |  26 +-
 resources/js/pages/admin/admin-user-list.tsx  |  99 +++--
 resources/js/types/meeting.ts                 |  16 +
 routes/web.php                                |  14 +-
 27 files changed, 1621 insertions(+), 255 deletions(-)
 create mode 100644 app/Http/Controllers/Crud/ClientAdmin/MeetingController.php
 create mode 100644 database/seeders/AgendaSeeder.php
 create mode 100644 database/seeders/MeetingSeeder.php
 create mode 100644 resources/js/components/meetings/create-meeting-dialog.tsx
 create mode 100644 resources/js/components/meetings/meeting-summary.tsx
 create mode 100644 resources/js/components/ui/delete-confirmation.tsx
 create mode 100644 resources/js/components/ui/multi-select.tsx
 create mode 100644 resources/js/components/ui/single-select.tsx
 create mode 100644 resources/js/components/ui/toast.tsx
 create mode 100644 resources/js/components/users/user-summary.tsx
 create mode 100644 resources/js/pages/admin/admin-meeting-details.tsx
 create mode 100644 resources/js/pages/admin/admin-meeting-list.tsx
 create mode 100644 resources/js/types/meeting.ts

diff --git a/app/Http/Controllers/Crud/ClientAdmin/MeetingController.php b/app/Http/Controllers/Crud/ClientAdmin/MeetingController.php
new file mode 100644
index 0000000..a626a07
--- /dev/null
+++ b/app/Http/Controllers/Crud/ClientAdmin/MeetingController.php
@@ -0,0 +1,182 @@
+<?php
+
+namespace App\Http\Controllers\Crud\ClientAdmin;
+
+use App\Http\Controllers\Controller;
+use App\Models\Meeting;
+use App\Models\User;
+use App\Models\Task;
+use App\Models\Agenda;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class MeetingController extends Controller
+{
+    public function index()
+    {
+        $clientId = auth()->user()->client->id;
+
+        $meetings = Meeting::where('client_id', $clientId)
+            ->with(['users' => function ($query) use ($clientId) {
+                $query->where('users.client_id', $clientId)
+                    ->select('users.id', 'users.name', 'users.email');
+            }])
+            ->with(['tasks' => function ($query) use ($clientId) {
+                $query->where('tasks.client_id', $clientId)
+                    ->select('tasks.id', 'tasks.name', 'tasks.status')
+                    ->withPivot('meeting_id');
+            }])
+            ->get();
+
+        $availableUsers = User::where('client_id', $clientId)
+            ->select('id', 'name', 'email')
+            ->get();
+
+        $availableTasks = Task::where('client_id', $clientId)
+            ->select('id', 'name', 'status')
+            ->get();
+
+        return Inertia::render('admin/admin-meeting-list', [
+            'meetings' => $meetings,
+            'users' => $availableUsers,
+            'tasks' => $availableTasks
+        ]);
+    }
+
+    public function store(Request $request)
+    {   
+        $request->validate([
+            'title' => 'required|string|max:255',
+            'date' => 'required|date',
+            'type' => 'required|string|max:255',
+            'agenda_text' => 'required|string',
+            'users' => 'nullable|array',
+            'users.*' => 'exists:users,id',
+            'tasks' => 'nullable|array',
+            'tasks.*' => 'exists:tasks,id'
+        ]);
+        
+        $clientId = auth()->user()->client->id;
+
+        // Create agenda first
+        $agenda = Agenda::create([
+            'text' => $request->agenda_text,
+            'client_id' => $clientId,
+        ]);
+
+        $meeting = Meeting::create([
+            'title' => $request->title,
+            'date' => $request->date,
+            'type' => $request->type,
+            'agenda_id' => $agenda->id,
+            'client_id' => $clientId,
+        ]);
+
+        if ($request->has('users')) {
+            $meeting->users()->attach($request->users);
+        }
+
+        if ($request->has('tasks')) {
+            $meeting->tasks()->attach($request->tasks);
+        }
+
+        session()->flash('success', 'Meeting created successfully!');
+        return back();
+    }
+
+    public function show(Meeting $meeting)
+    {
+        $clientId = auth()->user()->client->id;
+
+        // Ensure the meeting belongs to the client
+        if ($meeting->client_id !== $clientId) {
+            abort(403);
+        }
+
+        // Load the meeting with its relationships and agenda
+        $meeting->load(['users' => function ($query) use ($clientId) {
+            $query->where('users.client_id', $clientId)
+                ->select('users.id', 'users.name', 'users.email');
+        }])
+        ->load(['tasks' => function ($query) use ($clientId) {
+            $query->where('tasks.client_id', $clientId)
+                ->select('tasks.id', 'tasks.name', 'tasks.status');
+        }])
+        ->load('agenda');
+
+        // Add agenda_text to the meeting data
+        $meeting->agenda_text = $meeting->agenda->text;
+
+        // Get all available users and tasks for the form
+        $availableUsers = User::where('client_id', $clientId)
+            ->select('id', 'name', 'email')
+            ->get();
+
+        $availableTasks = Task::where('client_id', $clientId)
+            ->select('id', 'name', 'status')
+            ->get();
+
+        return Inertia::render('admin/admin-meeting-details', [
+            'meeting' => $meeting,
+            'users' => $availableUsers,
+            'tasks' => $availableTasks
+        ]);
+    }
+
+    public function update(Request $request, Meeting $meeting)
+    {
+        // Ensure the meeting belongs to the client
+        if ($meeting->client_id !== auth()->user()->client->id) {
+            abort(403, 'Unauthorized');
+        }
+
+        $request->validate([
+            'title' => 'required|string|max:255',
+            'date' => 'required|date',
+            'type' => 'required|string|max:255',
+            'agenda_text' => 'required|string',
+            'users' => 'nullable|array',
+            'users.*' => 'exists:users,id',
+            'tasks' => 'nullable|array',
+            'tasks.*' => 'exists:tasks,id'
+        ]);
+
+        // Update the meeting
+        $meeting->update([
+            'title' => $request->title,
+            'date' => $request->date,
+            'type' => $request->type,
+        ]);
+
+        // Update the agenda
+        $meeting->agenda()->update([
+            'text' => $request->agenda_text
+        ]);
+
+        // Sync users and tasks if they are provided
+        if ($request->has('users')) {
+            $meeting->users()->sync($request->users);
+        }
+
+        if ($request->has('tasks')) {
+            $meeting->tasks()->sync($request->tasks);
+        }
+
+        session()->flash('success', 'Meeting updated successfully!');
+        return back();
+    }
+
+    public function destroy(Meeting $meeting)
+    {
+        // Ensure the meeting belongs to the client
+        if ($meeting->client_id !== auth()->user()->client->id) {
+            abort(403, 'Unauthorized');
+        }
+
+        // Delete the meeting (this will cascade delete the agenda due to the relationship)
+        $meeting->delete();
+
+        session()->flash('success', 'Meeting deleted successfully!');
+        return redirect()->route('admin.meetings.index');
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Crud/ClientAdmin/TaskController.php b/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
index 5f6b578..1302bed 100644
--- a/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
+++ b/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
@@ -55,7 +55,7 @@ public function store(Request $request)
         if ($request->has('users')) {
             $task->users()->attach($request->users);
         }
-
+        session()->flash('success', 'Task created successfully!');
         return back();
     }   
 
@@ -105,6 +105,7 @@ public function update(Request $request, Task $task)
             $task->users()->sync($request->users);
         }
 
+        session()->flash('success', 'Task updated successfully!');
         return back();
     }
 
@@ -116,6 +117,7 @@ public function destroy(Task $task)
         }
 
         $task->delete();
+        session()->flash('success', 'Task deleted successfully!');
         return redirect()->route('admin.tasks.index');
     }
     
diff --git a/app/Http/Controllers/Crud/ClientAdmin/UserController.php b/app/Http/Controllers/Crud/ClientAdmin/UserController.php
index c3257ae..46a13c1 100644
--- a/app/Http/Controllers/Crud/ClientAdmin/UserController.php
+++ b/app/Http/Controllers/Crud/ClientAdmin/UserController.php
@@ -45,7 +45,7 @@ public function store(Request $request)
             'client_id' => $request->client_id,
             'role_id' => $request->role_id,
         ]);
-
+        session()->flash('success', 'User created successfully!');
         return back();
     }
     
@@ -68,6 +68,7 @@ public function update(Request $request, User $user)
 
 
         $user->update($validated);
+        session()->flash('success', 'User updated successfully!');
         return back();
     }
 
@@ -85,6 +86,7 @@ public function show(User $user)
     public function destroy(User $user)
     {
         $user->delete();
+        session()->flash('success', 'User deleted successfully!');
         return redirect()->route('admin.users.index');
     }
     
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 452e6b6..eaf988a 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -3,6 +3,7 @@
 namespace App\Providers;
 
 use Illuminate\Support\ServiceProvider;
+use Inertia\Inertia;
 
 class AppServiceProvider extends ServiceProvider
 {
@@ -19,6 +20,12 @@ public function register(): void
      */
     public function boot(): void
     {
-        //
+        Inertia::share([
+            'flash' => function () {
+                return [
+                    'success' => session('success'),
+                ];
+            },
+        ]);
     }
 }
diff --git a/database/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/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 72e39a0..de6af81 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -17,6 +17,8 @@ public function run(): void
             SystemAdminSeeder::class,
             UserSeeder::class,
             TaskSeeder::class,
+            AgendaSeeder::class,
+            MeetingSeeder::class,
         ]);
     }
 }
diff --git a/database/seeders/MeetingSeeder.php b/database/seeders/MeetingSeeder.php
new file mode 100644
index 0000000..1dcbeca
--- /dev/null
+++ b/database/seeders/MeetingSeeder.php
@@ -0,0 +1,60 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
+use Carbon\Carbon;
+use App\Models\Meeting;
+use App\Models\User;
+use App\Models\Task;
+
+class MeetingSeeder extends Seeder
+{
+    public function run()
+    {
+        // Get some users to assign to tasks
+        $users = User::where('client_id', 1)->take(5)->get();
+
+        // Get some tasks to assign to meetings
+        $tasks = Task::where('client_id', 1)->take(5)->get();
+
+        $meetings = [
+            [
+                'title' => 'Meeting 1',
+                'date' => Carbon::now(),
+                'type' => 'Online Meeting ',
+                'agenda_id' => 1,
+                'client_id' => 1,
+            ],
+            [
+                'title' => 'Meeting 2',
+                'date' => Carbon::now(),
+                'type' => 'In-Person Meeting',
+                'agenda_id' => 2,
+                'client_id' => 1,
+            ],
+            [
+                'title' => 'Meeting 3',
+                'date' => Carbon::now(),
+                'type' => 'In-Person Meeting',
+                'agenda_id' => 3,
+                'client_id' => 1,
+            ],
+        ];
+
+        foreach ($meetings as $meeting) {
+            $meeting = Meeting::create($meeting);
+
+            $meeting->users()->attach(
+                $users->random(2)->pluck('id')->toArray(),
+                ['created_at' => now(), 'updated_at' => now()]
+            );
+
+            $meeting->tasks()->attach(
+                $tasks->random(2)->pluck('id')->toArray(),
+                ['created_at' => now(), 'updated_at' => now()]
+            );
+        }
+    }
+}
diff --git a/database/seeders/TaskSeeder.php b/database/seeders/TaskSeeder.php
index 10192e3..0b49895 100644
--- a/database/seeders/TaskSeeder.php
+++ b/database/seeders/TaskSeeder.php
@@ -12,8 +12,6 @@ class TaskSeeder extends Seeder
 {
     public function run(): void
     {
-        // Get client 1
-        $client = Client::find(1);
 
         // Get some users to assign to tasks
         $users = User::where('client_id', 1)->take(3)->get();
diff --git a/resources/js/components/app-sidebar.tsx b/resources/js/components/app-sidebar.tsx
index 05ba0e8..298b41a 100644
--- a/resources/js/components/app-sidebar.tsx
+++ b/resources/js/components/app-sidebar.tsx
@@ -3,7 +3,7 @@ import { NavUser } from '@/components/nav-user';
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
 import { type NavItem } from '@/types';
 import { Link } from '@inertiajs/react';
-import { LayoutGrid, SquareCheckBig, Users } from 'lucide-react';
+import { LayoutGrid, SquareCheckBig, Users, Calendar } from 'lucide-react';
 import AppLogo from './app-logo';
 
 const mainNavItems: NavItem[] = [
@@ -22,6 +22,12 @@ const mainNavItems: NavItem[] = [
         href: '/users',
         icon: Users,
     },
+
+    {
+        title: 'Meetings',
+        href: '/meetings',
+        icon: Calendar,
+    },
 ];
 
 export function AppSidebar() {
diff --git a/resources/js/components/data-table.tsx b/resources/js/components/data-table.tsx
index 3ac1bd2..d8d19a7 100644
--- a/resources/js/components/data-table.tsx
+++ b/resources/js/components/data-table.tsx
@@ -157,6 +157,7 @@ export function DataTable<TData>({
             size="sm"
             onClick={() => table.previousPage()}
             disabled={!table.getCanPreviousPage()}
+            className="cursor-pointer"
           >
             Previous
           </Button>
@@ -165,6 +166,7 @@ export function DataTable<TData>({
             size="sm"
             onClick={() => table.nextPage()}
             disabled={!table.getCanNextPage()}
+            className="cursor-pointer"
           >
             Next
           </Button>
diff --git a/resources/js/components/meetings/create-meeting-dialog.tsx b/resources/js/components/meetings/create-meeting-dialog.tsx
new file mode 100644
index 0000000..32eb988
--- /dev/null
+++ b/resources/js/components/meetings/create-meeting-dialog.tsx
@@ -0,0 +1,120 @@
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { useForm } from "@inertiajs/react"
+import { User, Task } from "@/types/task"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { MultiSelect } from "@/components/ui/multi-select"
+
+interface CreateMeetingDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    users: User[]
+    tasks: Task[]
+}
+
+export function CreateMeetingDialog({ open, onOpenChange, users, tasks }: CreateMeetingDialogProps) {
+    const { data, setData, post, processing, errors, reset } = useForm({
+        title: '',
+        date: '',
+        type: '',
+        agenda_text: '',
+        users: [] as number[],
+        tasks: [] as number[],
+    })
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault()
+        post('/meetings', {
+            onSuccess: () => {
+                reset()
+                onOpenChange(false)
+            }
+        })
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[800px] max-h-[90vh]">
+                <form onSubmit={handleSubmit}>
+                    <DialogHeader>
+                        <DialogTitle>Create New Meeting</DialogTitle>
+                        <DialogDescription>
+                            Add a new meeting and assign attendees and tasks.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div className="grid grid-cols-2 gap-8 py-4">
+                        <div className="space-y-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="title">Title</Label>
+                                <Input
+                                    id="title"
+                                    value={data.title}
+                                    onChange={e => setData('title', e.target.value)}
+                                    error={errors.title}
+                                />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="date">Date & Time</Label>
+                                <Input
+                                    id="date"
+                                    type="datetime-local"
+                                    value={data.date}
+                                    onChange={e => setData('date', e.target.value)}
+                                    error={errors.date}
+                                />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="type">Meeting Type</Label>
+                                <Input
+                                    id="type"
+                                    value={data.type}
+                                    onChange={e => setData('type', e.target.value)}
+                                    error={errors.type}
+                                    placeholder="Type (e.g. Internal, Client, etc.)"
+                                />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="agenda">Agenda</Label>
+                                <Input
+                                    id="agenda"
+                                    value={data.agenda_text}
+                                    onChange={e => setData('agenda_text', e.target.value)}
+                                    error={errors.agenda_text}
+                                    placeholder="Meeting agenda or description"
+                                />
+                            </div>
+                        </div>
+                        <div className="space-y-6" >
+                            <MultiSelect
+                                items={users}
+                                selectedIds={data.users}
+                                onSelectionChange={(ids) => setData('users', ids)}
+                                placeholder="Select users..."
+                                label="Attendees"
+                                error={errors.users}
+                            />
+                            <MultiSelect
+                                items={tasks}
+                                selectedIds={data.tasks}
+                                onSelectionChange={(ids) => setData('tasks', ids)}
+                                placeholder="Select tasks..."
+                                label="Related Tasks"
+                                error={errors.tasks}
+                            />
+                        </div>
+                    </div>
+                    <DialogFooter>
+                        <Button variant="outline" onClick={() => onOpenChange(false)} className="cursor-pointer">
+                            Cancel
+                        </Button>
+                        <Button type="submit" disabled={processing} className="cursor-pointer">
+                            Create Meeting
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    )
+} 
\ No newline at end of file
diff --git a/resources/js/components/meetings/meeting-summary.tsx b/resources/js/components/meetings/meeting-summary.tsx
new file mode 100644
index 0000000..1ba02b5
--- /dev/null
+++ b/resources/js/components/meetings/meeting-summary.tsx
@@ -0,0 +1,66 @@
+import { Meeting } from "@/types/meeting"
+import { Card } from "@/components/ui/card"
+import { Users, Calendar, Clock } from "lucide-react"
+
+interface MeetingSummaryProps {
+    meetings: Meeting[]
+}
+
+export function MeetingSummary({ meetings }: MeetingSummaryProps) {
+    const now = new Date()
+    const upcomingCount = meetings.filter(m => new Date(m.date) > now).length
+    const pastCount = meetings.filter(m => new Date(m.date) <= now).length
+    const totalCount = meetings.length
+
+    const totalAttendees = meetings.reduce((acc, meeting) => acc + meeting.users.length, 0)
+    const averageAttendees = totalCount > 0 ? Math.round(totalAttendees / totalCount) : 0
+
+    return (
+        <Card className="px-6 py-3">
+            <div className="flex items-center justify-center gap-8">
+                <div className="flex items-center gap-6">
+                    <div className="flex flex-col items-center">
+                        <div className="flex items-center gap-2 group">
+                            <Clock className="h-4 w-4 text-blue-500 group-hover:scale-125 transition-transform" />
+                            <span className="font-medium text-blue-600 group-hover:text-blue-700 transition-colors">
+                                {upcomingCount}
+                            </span>
+                        </div>
+                        <span className="text-xs text-muted-foreground">Upcoming</span>
+                    </div>
+
+                    <div className="flex flex-col items-center">
+                        <div className="flex items-center gap-2 group">
+                            <Calendar className="h-4 w-4 text-purple-500 group-hover:scale-125 transition-transform" />
+                            <span className="font-medium text-purple-600 group-hover:text-purple-700 transition-colors">
+                                {pastCount}
+                            </span>
+                        </div>
+                        <span className="text-xs text-muted-foreground">Past</span>
+                    </div>
+
+                    <div className="flex flex-col items-center">
+                        <div className="flex items-center gap-2 group">
+                            <Users className="h-4 w-4 text-green-500 group-hover:scale-125 transition-transform" />
+                            <span className="font-medium text-green-600 group-hover:text-green-700 transition-colors">
+                                {averageAttendees}
+                            </span>
+                        </div>
+                        <span className="text-xs text-muted-foreground">Avg. Attendees</span>
+                    </div>
+
+                    <div className="h-12 w-px bg-border" />
+
+                    <div className="flex flex-col items-center">
+                        <div className="flex items-center gap-2 group">
+                            <span className="text-lg font-semibold text-foreground">
+                                {totalCount}
+                            </span>
+                        </div>
+                        <span className="text-xs text-muted-foreground">Total Meetings</span>
+                    </div>
+                </div>
+            </div>
+        </Card>
+    )
+} 
\ No newline at end of file
diff --git a/resources/js/components/tasks/create-task-dialog.tsx b/resources/js/components/tasks/create-task-dialog.tsx
index 2305f33..445ba97 100644
--- a/resources/js/components/tasks/create-task-dialog.tsx
+++ b/resources/js/components/tasks/create-task-dialog.tsx
@@ -11,12 +11,9 @@ 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 { Check, ChevronsUpDown } from "lucide-react"
-import { cn } from "@/lib/utils"
-import { useState, useEffect, useCallback } from "react"
 import { useForm } from "@inertiajs/react"
 import { TaskStatus, TaskPriority, User } from "@/types/task"
-import { Badge } from "@/components/ui/badge"
+import { MultiSelect } from "@/components/ui/multi-select"
 
 interface CreateTaskDialogProps {
     users: User[];
@@ -25,9 +22,6 @@ interface CreateTaskDialogProps {
 }
 
 export function CreateTaskDialog({ users, open, onOpenChange }: CreateTaskDialogProps) {
-    const [userPopoverOpen, setUserPopoverOpen] = useState(false);
-    const [filteredUsers, setFilteredUsers] = useState<User[]>(users);
-    
     const { data, setData, post, processing, errors, reset } = useForm({
         name: '',
         description: '',
@@ -37,31 +31,6 @@ export function CreateTaskDialog({ users, open, onOpenChange }: CreateTaskDialog
         users: [] as number[]
     });
 
-    // Update filtered users when users prop changes
-    useEffect(() => {
-        setFilteredUsers(users);
-    }, [users]);
-
-    const handleUserSearch = useCallback((searchTerm: string) => {
-        const filtered = users.filter(user => 
-            user.name.toLowerCase().includes(searchTerm.toLowerCase())
-        );
-        setFilteredUsers(filtered);
-    }, [users]);
-
-    const handleUserSelect = useCallback((userId: number) => {
-        const currentUsers = [...data.users];
-        const index = currentUsers.indexOf(userId);
-        
-        if (index === -1) {
-            currentUsers.push(userId);
-        } else {
-            currentUsers.splice(index, 1);
-        }
-        
-        setData('users', currentUsers);
-    }, [data.users, setData]);
-
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
         post('/tasks', {
@@ -72,16 +41,6 @@ export function CreateTaskDialog({ users, open, onOpenChange }: CreateTaskDialog
         });
     };
 
-    const handleDropdownToggle = (e: React.MouseEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setUserPopoverOpen(prev => !prev);
-    };
-
-    const handleDropdownClick = (e: React.MouseEvent) => {
-        e.stopPropagation();
-    };
-
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="sm:max-w-[800px] max-h-[90vh]">
@@ -115,40 +74,38 @@ export function CreateTaskDialog({ users, open, onOpenChange }: CreateTaskDialog
                                 />
                             </div>
 
-                            <div className="grid grid-cols-2 gap-4">
-                                <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="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="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">
@@ -164,84 +121,22 @@ export function CreateTaskDialog({ users, open, onOpenChange }: CreateTaskDialog
                         </div>
 
                         <div className="space-y-6">
-                            <div className="space-y-2">
-                                <Label>Assign Users</Label>
-                                <div className="relative">
-                                    <Button
-                                        type="button"
-                                        variant="outline"
-                                        role="combobox"
-                                        className="w-full justify-between"
-                                        onClick={handleDropdownToggle}
-                                    >
-                                        {data.users.length > 0
-                                            ? `${data.users.length} users selected`
-                                            : "Select users..."}
-                                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                                    </Button>
-                                    {userPopoverOpen && (
-                                        <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 users..." 
-                                                    className="border-0 focus-visible:ring-0"
-                                                    onClick={handleDropdownClick}
-                                                    onChange={(e) => handleUserSearch(e.target.value)}
-                                                />
-                                            </div>
-                                            <div className="max-h-[300px] overflow-auto">
-                                                {(filteredUsers.length > 0 ? filteredUsers : users).map((user) => (
-                                                    <div
-                                                        key={user.id}
-                                                        className="flex items-center px-4 py-2 hover:bg-accent cursor-pointer"
-                                                        onClick={(e) => {
-                                                            e.preventDefault();
-                                                            e.stopPropagation();
-                                                            handleUserSelect(user.id);
-                                                        }}
-                                                    >
-                                                        <Check
-                                                            className={cn(
-                                                                "mr-2 h-4 w-4",
-                                                                data.users.includes(user.id) ? "opacity-100" : "opacity-0"
-                                                            )}
-                                                        />
-                                                        {user.name}
-                                                    </div>
-                                                ))}
-                                                {filteredUsers.length === 0 && (
-                                                    <div className="px-4 py-2 text-sm text-muted-foreground">
-                                                        No users found.
-                                                    </div>
-                                                )}
-                                            </div>
-                                        </div>
-                                    )}
-                                </div>
-                                {data.users.length > 0 && (
-                                    <div className="flex flex-wrap gap-1">
-                                        {users
-                                            .filter(user => data.users.includes(user.id))
-                                            .map(user => (
-                                                <Badge key={user.id} variant="secondary">
-                                                    {user.name}
-                                                </Badge>
-                                            ))}
-                                    </div>
-                                )}
-                                {errors.users && (
-                                    <p className="text-sm text-red-500">{errors.users}</p>
-                                )}
-                            </div>
+                            <MultiSelect
+                                items={users}
+                                selectedIds={data.users}
+                                onSelectionChange={(ids) => setData('users', ids)}
+                                placeholder="Select users..."
+                                label="Assign Users"
+                                error={errors.users}
+                            />
                         </div>
                     </div>
 
                     <DialogFooter>
-                        <Button type="submit" disabled={processing}>
+                        <Button variant="outline" onClick={() => onOpenChange(false)} className="cursor-pointer">
+                            Cancel
+                        </Button>
+                        <Button type="submit" disabled={processing} className="cursor-pointer">
                             Create Task
                         </Button>
                     </DialogFooter>
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/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/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/toast.tsx b/resources/js/components/ui/toast.tsx
new file mode 100644
index 0000000..345197a
--- /dev/null
+++ b/resources/js/components/ui/toast.tsx
@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+
+export function Toast({ message }: { message: string }) {
+  const [show, setShow] = useState(true);
+
+  useEffect(() => {
+    if (show) {
+      const timer = setTimeout(() => setShow(false), 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [show]);
+
+  if (!show) return null;
+
+  return (
+    <div className="fixed top-6 right-6 z-50 bg-green-600 text-white px-4 py-2 rounded shadow">
+      {message}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/resources/js/components/users/create-user-dialog.tsx b/resources/js/components/users/create-user-dialog.tsx
index d40f96d..d0a081e 100644
--- a/resources/js/components/users/create-user-dialog.tsx
+++ b/resources/js/components/users/create-user-dialog.tsx
@@ -1,15 +1,16 @@
 import { useForm, usePage } from '@inertiajs/react';
 import { FormEventHandler } from 'react';
-import { Plus, LoaderCircle } from 'lucide-react';
+import { LoaderCircle } from 'lucide-react';
 import { PageProps } from '@/types';
 
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+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: {
@@ -23,7 +24,12 @@ type DialogProps = {
     }>;
 }
 
-export default function CreateUserDialog() {
+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;
 
@@ -41,7 +47,7 @@ export default function CreateUserDialog() {
         post(route('admin.users.store'), {
             onSuccess: () => {
                 reset();
-                window.location.href = route('admin.users.index');
+                onOpenChange(false);
             },
         });
     };
@@ -51,13 +57,7 @@ export default function CreateUserDialog() {
     };
 
     return (
-        <Dialog>
-            <DialogTrigger asChild>
-                <Button>
-                    <Plus className="mr-2 h-4 w-4" />
-                    New User
-                </Button>
-            </DialogTrigger>
+        <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
                     <DialogTitle>Create New User</DialogTitle>
@@ -121,30 +121,24 @@ export default function CreateUserDialog() {
                                 </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" className="w-full">
-                                            <SelectValue placeholder="Select a role" />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                            {roles.map((role) => (
-                                                <SelectItem key={role.id} value={role.id.toString()}>
-                                                    {formatRoleName(role.name)}
-                                                </SelectItem>
-                                            ))}
-                                        </SelectContent>
-                                    </Select>
-                                    <InputError message={errors.role_id} />
+                                    <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 type="submit" disabled={processing} className="w-full sm:w-auto">
+                        <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>
diff --git a/resources/js/components/users/user-summary.tsx b/resources/js/components/users/user-summary.tsx
new file mode 100644
index 0000000..9d56cf0
--- /dev/null
+++ b/resources/js/components/users/user-summary.tsx
@@ -0,0 +1,54 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { Users, UserCheck, UserX } from 'lucide-react';
+
+interface User {
+    id: number;
+    name: string;
+    email: string;
+    role: {
+        id: number;
+        name: string;
+    };
+}
+
+interface UserSummaryProps {
+    users: User[];
+}
+
+export function UserSummary({ users }: UserSummaryProps) {
+    const totalUsers = users.length;
+    const adminCount = users.filter(user => user.role.name === 'Client-Admin').length;
+    const regularUserCount = totalUsers - adminCount;
+
+    return (
+        <Card className="px-6 py-3">
+            <CardContent className="p-0">
+                <div className="flex items-center justify-center gap-8">
+                    <div className="flex items-center gap-6">
+                        <div className="flex flex-col items-center">
+                            <div className="flex items-center gap-2">
+                                <Users className="h-4 w-4 text-muted-foreground" />
+                                <span className="font-medium text-foreground text-base">{totalUsers}</span>
+                            </div>
+                            <span className="text-xs text-muted-foreground">Users</span>
+                        </div>
+                        <div className="flex flex-col items-center">
+                            <div className="flex items-center gap-2">
+                                <UserCheck className="h-4 w-4 text-purple-500" />
+                                <span className="font-medium text-purple-600 text-base">{adminCount}</span>
+                            </div>
+                            <span className="text-xs text-muted-foreground">Admins</span>
+                        </div>
+                        <div className="flex flex-col items-center">
+                            <div className="flex items-center gap-2">
+                                <UserX className="h-4 w-4 text-blue-500" />
+                                <span className="font-medium text-blue-600 text-base">{regularUserCount}</span>
+                            </div>
+                            <span className="text-xs text-muted-foreground">Regular</span>
+                        </div>
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    );
+} 
\ No newline at end of file
diff --git a/resources/js/layouts/app-layout.tsx b/resources/js/layouts/app-layout.tsx
index 1457c51..773e4bf 100644
--- a/resources/js/layouts/app-layout.tsx
+++ b/resources/js/layouts/app-layout.tsx
@@ -1,14 +1,23 @@
 import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
 import { type BreadcrumbItem } from '@/types';
 import { type ReactNode } from 'react';
+import { usePage } from '@inertiajs/react';
+import { Toast } from '@/components/ui/toast';
 
 interface AppLayoutProps {
     children: ReactNode;
     breadcrumbs?: BreadcrumbItem[];
 }
 
-export default ({ children, breadcrumbs, ...props }: AppLayoutProps) => (
-    <AppLayoutTemplate breadcrumbs={breadcrumbs} {...props}>
-        {children}
-    </AppLayoutTemplate>
-);
+export default ({ children, breadcrumbs, ...props }: AppLayoutProps) => {
+    const { flash } = usePage().props as { flash?: { success?: string } };
+
+    return (
+        <>
+            {flash?.success && <Toast message={flash.success} />}
+            <AppLayoutTemplate breadcrumbs={breadcrumbs} {...props}>
+                {children}
+            </AppLayoutTemplate>
+        </>
+    );
+};
diff --git a/resources/js/pages/admin/admin-meeting-details.tsx b/resources/js/pages/admin/admin-meeting-details.tsx
new file mode 100644
index 0000000..aabb08c
--- /dev/null
+++ b/resources/js/pages/admin/admin-meeting-details.tsx
@@ -0,0 +1,358 @@
+import { Head } from '@inertiajs/react';
+import AppLayout from '@/layouts/app-layout';
+import { type BreadcrumbItem } from '@/types';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Meeting } from '@/types/meeting';
+import { User, Task } from '@/types/task';
+import { useState } from 'react';
+import { router } from '@inertiajs/react';
+import { format } from 'date-fns';
+import { useForm } from '@inertiajs/react';
+import { Check, ChevronsUpDown, Trash2, Calendar, Users, ListTodo } from "lucide-react"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
+import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Meetings',
+        href: '/meetings',
+    },
+    {
+        title: 'Meeting Details',
+        href: '#',
+    },
+];
+
+interface PageProps {
+    meeting: Meeting;
+    users: User[];
+    tasks: Task[];
+}
+
+type MeetingType = 'internal' | 'client' | 'external';
+
+const typeColors: Record<MeetingType, string> = {
+    'internal': 'bg-blue-50/50 text-blue-600 border border-blue-100',
+    'client': 'bg-purple-50/50 text-purple-600 border border-purple-100',
+    'external': 'bg-green-50/50 text-green-600 border border-green-100'
+};
+
+export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
+    const [isEditing, setIsEditing] = useState(false);
+    const { data, setData, put, processing, errors } = useForm({
+        title: meeting.title,
+        date: meeting.date,
+        type: meeting.type,
+        agenda_text: meeting.agenda_text,
+        users: meeting.users.map(user => user.id),
+        tasks: meeting.tasks.map(task => task.id)
+    });
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        put(`/meetings/${meeting.id}`, {
+            onSuccess: () => {
+                setIsEditing(false);
+            }
+        });
+    };
+
+    const handleCancel = () => {
+        setIsEditing(false);
+    };
+
+    const handleDelete = () => {
+        if (confirm("Are you sure you want to delete this meeting?")) {
+            router.delete(`/meetings/${meeting.id}`);
+        }
+    };
+
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title={`Meeting: ${meeting.title}`} />
+            <div className="flex h-full flex-1 flex-col gap-6 p-6">
+                <div className="flex items-center justify-between">
+                    <div className="space-y-1">
+                        <h1 className="text-2xl font-semibold tracking-tight">{meeting.title}</h1>
+                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                            <Calendar className="h-4 w-4" />
+                            {meeting.date ? format(new Date(meeting.date), 'EEEE, MMMM d, yyyy • h:mm a') : 'No date set'}
+                        </div>
+                    </div>
+                    <div className="flex gap-2">
+                        {isEditing ? (
+                            <>
+                                <Button variant="outline" onClick={handleCancel} className="cursor-pointer">
+                                    Cancel
+                                </Button>
+                                <Button onClick={handleSubmit} disabled={processing} className="cursor-pointer">
+                                    Save Changes
+                                </Button>
+                            </>
+                        ) : (
+                            <>
+                                <Button onClick={() => setIsEditing(true)} className="cursor-pointer">
+                                    Edit Meeting
+                                </Button>
+                                
+                                <DeleteConfirmation
+                                    onConfirm={() => router.delete(`/meetings/${meeting.id}`)}
+                                    itemType="meeting"
+                                    itemName={meeting.title}
+                                >
+                                    <Button variant="destructive" className="cursor-pointer">
+                                        Delete Meeting
+                                    </Button>
+                                </DeleteConfirmation>
+                            </>
+                        )}
+                    </div>
+                </div>
+
+                <div className="grid grid-cols-3 gap-6">
+                    <Card className="col-span-2 shadow-sm">
+                        <CardHeader className="pb-4">
+                            <CardTitle className="text-lg font-medium">Meeting Details</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <form onSubmit={handleSubmit} className="space-y-8">
+                                <div className="grid grid-cols-2 gap-8">
+                                    <div className="space-y-2">
+                                        <Label htmlFor="title" className="text-sm font-medium">Meeting Title</Label>
+                                        {isEditing ? (
+                                            <Input
+                                                id="title"
+                                                value={data.title}
+                                                onChange={e => setData('title', e.target.value)}
+                                                error={errors.title}
+                                                className="h-10"
+                                            />
+                                        ) : (
+                                            <div className="text-lg font-medium mt-2 h-10 flex items-center text-foreground">{meeting.title}</div>
+                                        )}
+                                    </div>
+
+                                    <div className="space-y-2">
+                                        <Label htmlFor="type" className="text-sm font-medium">Meeting Type</Label>
+                                        {isEditing ? (
+                                            <Input
+                                                id="type"
+                                                value={data.type}
+                                                onChange={e => setData('type', e.target.value)}
+                                                error={errors.type}
+                                                className="h-10"
+                                                placeholder="Type (e.g. Internal, Client, etc.)"
+                                            />
+                                        ) : (
+                                            <div className="mt-2 h-10 flex items-center">
+                                                <Badge className={cn(typeColors[meeting.type as MeetingType], "text-sm font-medium px-3 py-1")}>
+                                                    {meeting.type}
+                                                </Badge>
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="date" className="text-sm font-medium">Date & Time</Label>
+                                    {isEditing ? (
+                                        <Input
+                                            type="datetime-local"
+                                            id="date"
+                                            value={data.date ? new Date(data.date).toISOString().slice(0, 16) : ''}
+                                            onChange={e => setData('date', e.target.value)}
+                                            error={errors.date}
+                                            className="h-10"
+                                        />
+                                    ) : (
+                                        <div className="flex items-center text-muted-foreground mt-2 h-10">
+                                            <Calendar className="h-4 w-4 mr-2" />
+                                            {meeting.date ? format(new Date(meeting.date), 'EEEE, MMMM d, yyyy • h:mm a') : 'No date set'}
+                                        </div>
+                                    )}
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="agenda_text" className="text-sm font-medium">Agenda</Label>
+                                    {isEditing ? (
+                                        <Textarea
+                                            id="agenda_text"
+                                            value={data.agenda_text}
+                                            onChange={e => setData('agenda_text', e.target.value)}
+                                            error={errors.agenda_text}
+                                            className="min-h-[200px]"
+                                        />
+                                    ) : (
+                                        <div className="text-muted-foreground bg-muted/30 p-4 rounded-md mt-2 min-h-[200px]">
+                                            {meeting.agenda_text || 'No agenda set'}
+                                        </div>
+                                    )}
+                                </div>
+                            </form>
+                        </CardContent>
+                    </Card>
+
+                    <div className="space-y-6">
+                        <Card className="shadow-sm">
+                            <CardHeader className="pb-4">
+                                <CardTitle className="text-lg font-medium">Attendees</CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                {isEditing ? (
+                                    <Popover>
+                                        <PopoverTrigger asChild>
+                                            <Button
+                                                variant="outline"
+                                                role="combobox"
+                                                className="w-full justify-between h-10"
+                                            >
+                                                {data.users.length > 0
+                                                    ? `${data.users.length} users selected`
+                                                    : "Select users..."}
+                                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                            </Button>
+                                        </PopoverTrigger>
+                                        <PopoverContent className="w-full p-0" align="start">
+                                            <Command className="max-h-[200px]">
+                                                <CommandInput placeholder="Search users..." />
+                                                <CommandEmpty>No users found.</CommandEmpty>
+                                                <CommandGroup className="overflow-y-auto">
+                                                    {users.map((user) => (
+                                                        <CommandItem
+                                                            key={user.id}
+                                                            onSelect={() => {
+                                                                const newUsers = data.users.includes(user.id)
+                                                                    ? data.users.filter(id => id !== user.id)
+                                                                    : [...data.users, user.id];
+                                                                setData('users', newUsers);
+                                                            }}
+                                                            className="flex items-center gap-2 px-2 py-1.5"
+                                                        >
+                                                            <Check
+                                                                className={cn(
+                                                                    "h-4 w-4",
+                                                                    data.users.includes(user.id) ? "opacity-100" : "opacity-0"
+                                                                )}
+                                                            />
+                                                            <span>{user.name}</span>
+                                                        </CommandItem>
+                                                    ))}
+                                                </CommandGroup>
+                                            </Command>
+                                        </PopoverContent>
+                                    </Popover>
+                                ) : (
+                                    <div className="space-y-4">
+                                        <div className="flex items-center text-muted-foreground">
+                                            <Users className="h-4 w-4 mr-2" />
+                                            {meeting.users.length > 0 
+                                                ? `${meeting.users.length} ${meeting.users.length === 1 ? 'Attendee' : 'Attendees'}`
+                                                : 'No Attendees'}
+                                        </div>
+                                        <div className="flex flex-wrap gap-1.5">
+                                            {meeting.users.length > 0 ? (
+                                                meeting.users.map((user) => (
+                                                    <Badge key={user.id} variant="secondary" className="text-sm bg-muted/50">
+                                                        {user.name}
+                                                    </Badge>
+                                                ))
+                                            ) : (
+                                                <span className="text-muted-foreground text-sm">None</span>
+                                            )}
+                                        </div>
+                                    </div>
+                                )}
+                            </CardContent>
+                        </Card>
+
+                        <Card className="shadow-sm">
+                            <CardHeader className="pb-4">
+                                <CardTitle className="text-lg font-medium">Related Tasks</CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                {isEditing ? (
+                                    <Popover>
+                                        <PopoverTrigger asChild>
+                                            <Button
+                                                variant="outline"
+                                                role="combobox"
+                                                className="w-full justify-between h-10"
+                                            >
+                                                {data.tasks.length > 0
+                                                    ? `${data.tasks.length} tasks selected`
+                                                    : "Select tasks..."}
+                                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                            </Button>
+                                        </PopoverTrigger>
+                                        <PopoverContent className="w-full p-0" align="start">
+                                            <Command className="max-h-[200px]">
+                                                <CommandInput placeholder="Search tasks..." />
+                                                <CommandEmpty>No tasks found.</CommandEmpty>
+                                                <CommandGroup className="overflow-y-auto">
+                                                    {tasks.map((task) => (
+                                                        <CommandItem
+                                                            key={task.id}
+                                                            onSelect={() => {
+                                                                const newTasks = data.tasks.includes(task.id)
+                                                                    ? data.tasks.filter(id => id !== task.id)
+                                                                    : [...data.tasks, task.id];
+                                                                setData('tasks', newTasks);
+                                                            }}
+                                                            className="flex items-center gap-2 px-2 py-1.5"
+                                                        >
+                                                            <Check
+                                                                className={cn(
+                                                                    "h-4 w-4",
+                                                                    data.tasks.includes(task.id) ? "opacity-100" : "opacity-0"
+                                                                )}
+                                                            />
+                                                            <span>{task.name}</span>
+                                                        </CommandItem>
+                                                    ))}
+                                                </CommandGroup>
+                                            </Command>
+                                        </PopoverContent>
+                                    </Popover>
+                                ) : (
+                                    <div className="space-y-4">
+                                        <div className="flex items-center text-muted-foreground">
+                                            <ListTodo className="h-4 w-4 mr-2" />
+                                            {meeting.tasks.length > 0 
+                                                ? `${meeting.tasks.length} ${meeting.tasks.length === 1 ? 'Task' : 'Tasks'}`
+                                                : 'No Tasks'}
+                                        </div>
+                                        <div className="flex flex-wrap gap-1.5">
+                                            {meeting.tasks.length > 0 ? (
+                                                meeting.tasks.map((task) => (
+                                                    <Badge key={task.id} variant="secondary" className="text-sm bg-muted/50">
+                                                        {task.name}
+                                                    </Badge>
+                                                ))
+                                            ) : (
+                                                <span className="text-muted-foreground text-sm">None</span>
+                                            )}
+                                        </div>
+                                    </div>
+                                )}
+                            </CardContent>
+                        </Card>
+                    </div>
+                </div>
+                <div className="mt-6">
+                    <Button variant="outline" onClick={() => router.visit('/meetings')} className="cursor-pointer">
+                        ← Back to Meetings List
+                    </Button>
+                </div>
+            </div>
+        </AppLayout>
+    );
+}
+
diff --git a/resources/js/pages/admin/admin-meeting-list.tsx b/resources/js/pages/admin/admin-meeting-list.tsx
new file mode 100644
index 0000000..c1ee69f
--- /dev/null
+++ b/resources/js/pages/admin/admin-meeting-list.tsx
@@ -0,0 +1,202 @@
+import { Head } from '@inertiajs/react';
+import AppLayout from '@/layouts/app-layout';
+import { type BreadcrumbItem } from '@/types';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Plus, ArrowUpDown } from 'lucide-react';
+import { DataTable } from '@/components/data-table';
+import { ColumnDef } from '@tanstack/react-table';
+import { useState } from 'react';
+import { router } from '@inertiajs/react';
+import { format } from 'date-fns';
+import { Meeting } from '@/types/meeting';
+import { Task, User } from '@/types/task';
+import { CreateMeetingDialog } from '@/components/meetings/create-meeting-dialog';
+import { MeetingSummary } from '@/components/meetings/meeting-summary';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Meetings',
+        href: '/meetings',
+    },
+];
+
+interface PageProps {
+    meetings: Meeting[];
+    users: User[];
+    tasks: Task[];
+}
+
+const columns: ColumnDef<Meeting>[] = [
+    {
+        accessorKey: "title",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Meeting
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const meeting = row.original
+            return (
+                <div>
+                    <div className="font-medium">{meeting.title}</div>
+                    <div className="text-sm text-muted-foreground">
+                        {meeting.type}
+                    </div>
+                </div>
+            )
+        },
+    },
+    {
+        accessorKey: "date",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Date
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const date = row.getValue("date")
+            if (!date) return '-'
+            try {
+                return format(new Date(date as string), 'MMM dd, yyyy - hh:mm a')
+            } catch (error) {
+                return '-'
+            }
+        },
+    },
+    {
+        accessorKey: "type",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Type
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            return (
+                <Badge variant="secondary">
+                    {row.getValue("type")}
+                </Badge>
+            )
+        },
+    },
+    {
+        accessorKey: "users",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Attendees
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const attendees = row.original.users || []
+            return (
+                <div className="flex flex-wrap gap-1">
+                    {attendees.map((user) => (
+                        <Badge key={user.id} variant="secondary">
+                            {user.name}
+                        </Badge>
+                    ))}
+                </div>
+            )
+        },
+    },
+    {
+        accessorKey: "tasks",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Related Tasks
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const tasks = row.original.tasks || []
+            return (
+                <div className="flex flex-wrap gap-1">
+                    {tasks.map((task) => (
+                        <Badge key={task.id} variant="outline">
+                            {task.name}
+                        </Badge>
+                    ))}
+                </div>
+            )
+        },
+    },
+];
+
+export default function Meetings({ meetings, users, tasks }: PageProps) {
+    const [isMeetingDialogOpen, setIsMeetingDialogOpen] = useState(false);
+
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title="Meetings" />
+            <div className="flex h-full flex-1 flex-col gap-4 p-4">
+                <div className="flex items-center justify-between">
+                    <h1 className="text-2xl font-semibold ml-5">Manage Your Meetings</h1>
+                    <div className="flex items-center gap-5">
+                        <MeetingSummary meetings={meetings} />
+                    </div>
+                </div>
+
+                <Card>
+                    <CardContent className="pt-6">
+                        <DataTable
+                            columns={columns}
+                            data={meetings}
+                            searchPlaceholder="Search meetings..."
+                            searchColumn="title"
+                            onRowClick={(meeting) => router.visit(`/meetings/${meeting.id}`)}
+                            addButton={
+                                <Button onClick={() => setIsMeetingDialogOpen(true)} className="cursor-pointer">
+                                    <Plus className="mr-2 h-4 w-4" />
+                                    Add Meeting
+                                </Button>
+                            }
+                        />
+                    </CardContent>
+                </Card>
+
+                <CreateMeetingDialog
+                    users={users}
+                    tasks={tasks}
+                    open={isMeetingDialogOpen}
+                    onOpenChange={setIsMeetingDialogOpen}
+                />
+            </div>
+        </AppLayout>
+    );
+}
+
diff --git a/resources/js/pages/admin/admin-task-details.tsx b/resources/js/pages/admin/admin-task-details.tsx
index 530584c..d3436b2 100644
--- a/resources/js/pages/admin/admin-task-details.tsx
+++ b/resources/js/pages/admin/admin-task-details.tsx
@@ -17,6 +17,7 @@ import { Check, ChevronsUpDown, Trash2, Calendar, Users, AlertCircle } from "luc
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 import { cn } from "@/lib/utils"
+import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -70,11 +71,7 @@ export default function TaskDetails({ task, all_users }: PageProps) {
         setIsEditing(false);
     };
 
-    const handleDelete = () => {
-        if (confirm("Are you sure you want to delete this task?")) {
-            router.delete(`/tasks/${task.id}`);
-        }
-    };
+
 
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
@@ -85,25 +82,27 @@ export default function TaskDetails({ task, all_users }: PageProps) {
                     <div className="flex gap-2">
                         {isEditing ? (
                             <>
-                                <Button variant="outline" onClick={handleCancel}>
+                                <Button variant="outline" onClick={handleCancel} className="cursor-pointer">
                                     Cancel
                                 </Button>
-                                <Button onClick={handleSubmit} disabled={processing}>
+                                <Button onClick={handleSubmit} disabled={processing} className="cursor-pointer">
                                     Save Changes
                                 </Button>
                             </>
                         ) : (
                             <>
-                                <Button onClick={() => setIsEditing(true)}>
+                                <Button onClick={() => setIsEditing(true)} className="cursor-pointer">
                                     Edit Task
                                 </Button>
-                                <Button
-                                    variant="destructive"
-                                    onClick={handleDelete}
+                                <DeleteConfirmation
+                                    onConfirm={() => router.delete(`/tasks/${task.id}`)}
+                                    itemType="task"
+                                    itemName={task.name}
                                 >
-                                    <Trash2 className="h-4 w-4 mr-2" />
-                                    Delete Task
-                                </Button>
+                                    <Button variant="destructive" className="cursor-pointer">
+                                        Delete Task
+                                    </Button>
+                                </DeleteConfirmation>
                             </>
                         )}
                     </div>
@@ -271,14 +270,20 @@ export default function TaskDetails({ task, all_users }: PageProps) {
                                         <div className="space-y-2 mt-2 min-h-[40px]">
                                             <div className="flex items-center text-muted-foreground">
                                                 <Users className="h-4 w-4 mr-2" />
-                                                {task.users.length} {task.users.length === 1 ? 'User' : 'Users'} Assigned
+                                                {task.users.length > 0 
+                                                    ? `${task.users.length} ${task.users.length === 1 ? 'User' : 'Users'} Assigned`
+                                                    : 'No Users Assigned'}
                                             </div>
                                             <div className="flex flex-wrap gap-1">
-                                                {task.users.map((user) => (
-                                                    <Badge key={user.id} variant="secondary" className="text-sm">
-                                                        {user.name}
-                                                    </Badge>
-                                                ))}
+                                                {task.users.length > 0 ? (
+                                                    task.users.map((user) => (
+                                                        <Badge key={user.id} variant="secondary" className="text-sm">
+                                                            {user.name}
+                                                        </Badge>
+                                                    ))
+                                                ) : (
+                                                    <span className="text-muted-foreground text-sm">None</span>
+                                                )}
                                             </div>
                                         </div>
                                     )}
@@ -287,6 +292,11 @@ export default function TaskDetails({ task, all_users }: PageProps) {
                         </form>
                     </CardContent>
                 </Card>
+                <div className="mt-6">
+                    <Button variant="outline" onClick={() => router.visit('/tasks')} className="cursor-pointer">
+                        ← Back to Tasks List
+                    </Button>
+                </div>
             </div>
         </AppLayout>
     );
diff --git a/resources/js/pages/admin/admin-user-details.tsx b/resources/js/pages/admin/admin-user-details.tsx
index 357c201..1e485e3 100644
--- a/resources/js/pages/admin/admin-user-details.tsx
+++ b/resources/js/pages/admin/admin-user-details.tsx
@@ -8,6 +8,8 @@ import { User, Trash2 } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { PageProps } from '@/types';
+import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
+
 
 interface User {
     id: number;
@@ -46,12 +48,7 @@ export default function UserDetails({ user }: PageProps<{ user: User }>) {
         setIsEditing(false);
     };
 
-    const handleDelete = () => {
-        if (confirm('Are you sure you want to delete this user?')) {
-            router.delete(`/users/${user.id}`, {
-            });
-        }
-    };
+
 
 
     return (
@@ -75,12 +72,14 @@ export default function UserDetails({ user }: PageProps<{ user: User }>) {
                                             variant="outline"
                                             onClick={handleCancel}
                                             disabled={processing}
+                                            className="cursor-pointer"
                                         >
                                             Cancel
                                         </Button>
                                         <Button
                                             onClick={handleSave}
                                             disabled={processing}
+                                            className="cursor-pointer"
                                         >
                                             {processing ? 'Saving...' : 'Save Changes'}
                                         </Button>
@@ -90,16 +89,19 @@ export default function UserDetails({ user }: PageProps<{ user: User }>) {
                                         <Button
                                             variant="outline"
                                             onClick={() => setIsEditing(true)}
+                                            className="cursor-pointer"
                                         >
                                             Edit Profile
                                         </Button>
-                                        <Button
-                                            variant="destructive"
-                                            onClick={handleDelete}
+                                        <DeleteConfirmation
+                                            onConfirm={() => router.delete(`/users/${user.id}`)}
+                                            itemType="user"
+                                            itemName={user.name}
                                         >
-                                            <Trash2 className="h-4 w-4 mr-2" />
-                                            Delete User
-                                        </Button>
+                                            <Button variant="destructive" className="cursor-pointer">
+                                                Delete User
+                                            </Button>
+                                        </DeleteConfirmation>
                                     </div>
                                 )}
                             </div>
diff --git a/resources/js/pages/admin/admin-user-list.tsx b/resources/js/pages/admin/admin-user-list.tsx
index d2f8ef6..7095dd8 100644
--- a/resources/js/pages/admin/admin-user-list.tsx
+++ b/resources/js/pages/admin/admin-user-list.tsx
@@ -2,19 +2,17 @@ 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 { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-
-import { Plus, ArrowUpDown } from 'lucide-react';
+import { Plus, ArrowUpDown, Mail, Shield } from 'lucide-react';
 import { DataTable } from '@/components/data-table';
 import { ColumnDef } from '@tanstack/react-table';
 import { PageProps } from '@/types';
 import CreateUserDialog from '@/components/users/create-user-dialog';
-
+import { UserSummary } from '@/components/users/user-summary';
+import { useState } from 'react';
 
 const breadcrumbs: BreadcrumbItem[] = [
-
     {
         title: 'Users',
         href: '/users',
@@ -31,15 +29,14 @@ interface User {
     };
 }
 
-
 const columns: ColumnDef<User>[] = [
-   
     {
         accessorKey: "name",
         header: ({ column }) => {
             return (
                 <Button
                     variant="ghost"
+                    className="cursor-pointer"
                     onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                 >
                     Name
@@ -47,6 +44,14 @@ const columns: ColumnDef<User>[] = [
                 </Button>
             )
         },
+        cell: ({ row }) => {
+            const user = row.original;
+            return (
+                <div>
+                    <div className="font-medium">{user.name}</div>
+                </div>
+            )
+        },
     },
     {
         accessorKey: "email",
@@ -54,6 +59,7 @@ const columns: ColumnDef<User>[] = [
             return (
                 <Button
                     variant="ghost"
+                    className="cursor-pointer"
                     onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                 >
                     Email
@@ -61,6 +67,15 @@ const columns: ColumnDef<User>[] = [
                 </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",
@@ -68,6 +83,7 @@ const columns: ColumnDef<User>[] = [
             return (
                 <Button
                     variant="ghost"
+                    className="cursor-pointer"
                     onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                 >
                     Role
@@ -77,41 +93,60 @@ const columns: ColumnDef<User>[] = [
         },
         cell: ({ row }) => {
             const roleName = row.original.role.name;
-            return roleName === "Client-Admin" ? "Admin" : roleName;
+            const displayName = roleName === "Client-Admin" ? "Admin" : roleName;
+            const roleColors = {
+                'Admin': 'bg-purple-100 text-purple-800',
+                'User': 'bg-blue-100 text-blue-800',
+                'default': 'bg-gray-100 text-gray-800'
+            };
+            return (
+                <div className="flex items-center gap-2">
+                    <Shield className="h-4 w-4 text-muted-foreground" />
+                    <Badge className={roleColors[displayName as keyof typeof roleColors] || roleColors.default}>
+                        {displayName}
+                    </Badge>
+                </div>
+            )
         }
     },
 ];
 
 export default function Users({ users }: PageProps<{ users: User[] }>) {
+    const [isUserDialogOpen, setIsUserDialogOpen] = useState(false);
+
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
             <Head title="Users" />
             <div className="flex h-full flex-1 flex-col gap-4 p-4">
-                <h1 className="text-2xl font-semibold ml-5">Manage Your Users</h1>
-                <div className="flex h-full flex-1 flex-col gap-5">
-                    <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 className="flex items-center justify-between mt-2 mb-2">
+                    <h1 className="text-2xl font-semibold">Manage Your Users</h1>
+                    <div className="flex items-center">
+                        <UserSummary users={users} />
                     </div>
                 </div>
+
+                <Card>
+                    <CardContent className="pt-6">
+                        <DataTable
+                            columns={columns}
+                            data={users}
+                            searchPlaceholder="Search users..."
+                            searchColumn="name"
+                            onRowClick={(user) => router.visit(`/users/${user.id}`)}
+                            addButton={
+                                <Button onClick={() => setIsUserDialogOpen(true)} className="cursor-pointer">
+                                    <Plus className="mr-2 h-4 w-4" />
+                                    Add User
+                                </Button>
+                            }
+                        />
+                    </CardContent>
+                </Card>
+
+                <CreateUserDialog
+                    open={isUserDialogOpen}
+                    onOpenChange={setIsUserDialogOpen}
+                />
             </div>
         </AppLayout>
     );
diff --git a/resources/js/types/meeting.ts b/resources/js/types/meeting.ts
new file mode 100644
index 0000000..c2fa952
--- /dev/null
+++ b/resources/js/types/meeting.ts
@@ -0,0 +1,16 @@
+import { Task, User } from "./task";
+
+export interface Meeting {
+    id: number;
+    title: string;
+    date: string;
+    type: string;
+    agenda_id: number;
+    agenda_text: string;
+    client_id: number;
+    users: User[];
+    tasks: Task[];
+    created_at?: string;
+    updated_at?: string;
+    deleted_at?: string | null;
+}
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index fd87089..31fdabf 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -4,6 +4,7 @@
 use Inertia\Inertia;
 use App\Http\Controllers\Crud\ClientAdmin\UserController as ClientAdminUserController;
 use App\Http\Controllers\Crud\ClientAdmin\TaskController as ClientAdminTaskController;
+use App\Http\Controllers\Crud\ClientAdmin\MeetingController as ClientAdminMeetingController;
 use App\Http\Middleware\CheckRole;
 
 Route::get('/', function () {
@@ -15,7 +16,7 @@
         return Inertia::render('dashboard');
     })->name('dashboard');
 
-    // Task routes
+    // Admin Task Routes
     Route::middleware(['role:Client-Admin'])->group(function () {
         Route::get('tasks', [ClientAdminTaskController::class, 'index'])->name('admin.tasks.index');
         Route::post('tasks', [ClientAdminTaskController::class, 'store'])->name('admin.tasks.store');
@@ -24,7 +25,7 @@
         Route::delete('tasks/{task}', [ClientAdminTaskController::class, 'destroy'])->name('admin.tasks.destroy');
     });
 
-    // Admin Routes
+    // Admin User Routes
     Route::middleware(['role:Client-Admin'])->group(function () {
         Route::get('users', [ClientAdminUserController::class, 'index'])->name('admin.users.index');
         Route::post('users', [ClientAdminUserController::class, 'store'])->name('admin.users.store');
@@ -32,6 +33,15 @@
         Route::put('users/{user}', [ClientAdminUserController::class, 'update'])->name('admin.users.update');
         Route::delete('users/{user}', [ClientAdminUserController::class, 'destroy'])->name('admin.users.destroy');
     });
+
+    // Admin Meeting Routes
+    Route::middleware(['role:Client-Admin'])->group(function () {
+        Route::get('meetings', [ClientAdminMeetingController::class, 'index'])->name('admin.meetings.index');
+        Route::post('meetings', [ClientAdminMeetingController::class, 'store'])->name('admin.meetings.store');
+        Route::get('meetings/{meeting}', [ClientAdminMeetingController::class, 'show'])->name('admin.meetings.show');
+        Route::put('meetings/{meeting}', [ClientAdminMeetingController::class, 'update'])->name('admin.meetings.update');
+        Route::delete('meetings/{meeting}', [ClientAdminMeetingController::class, 'destroy'])->name('admin.meetings.destroy');
+    });
 });
 
 require __DIR__.'/settings.php';

From 4879ddc533606361ee873450e12996f957ff7c94 Mon Sep 17 00:00:00 2001
From: ryanmueller24 <ryanpmueller24@gmail.com>
Date: Fri, 23 May 2025 18:51:43 -0500
Subject: [PATCH 07/21] general layout of the dashboard done

---
 .../ClientAdmin/AdminDashboardController.php  |  58 ++
 database/seeders/TaskSeeder.php               |  41 ++
 package-lock.json                             | 611 +++++++++++++++++-
 package.json                                  |   2 +
 .../components/dashboard/task-stats-pie.tsx   |  83 +++
 .../dashboard/user-workload-chart.tsx         |  80 +++
 resources/js/pages/admin/admin-dashboard.tsx  | 103 +++
 resources/js/pages/admin/admin-task-list.tsx  |  28 +-
 resources/js/pages/dashboard.tsx              |  35 -
 routes/web.php                                |   6 +-
 10 files changed, 1001 insertions(+), 46 deletions(-)
 create mode 100644 app/Http/Controllers/ClientAdmin/AdminDashboardController.php
 create mode 100644 resources/js/components/dashboard/task-stats-pie.tsx
 create mode 100644 resources/js/components/dashboard/user-workload-chart.tsx
 create mode 100644 resources/js/pages/admin/admin-dashboard.tsx
 delete mode 100644 resources/js/pages/dashboard.tsx

diff --git a/app/Http/Controllers/ClientAdmin/AdminDashboardController.php b/app/Http/Controllers/ClientAdmin/AdminDashboardController.php
new file mode 100644
index 0000000..fb0221f
--- /dev/null
+++ b/app/Http/Controllers/ClientAdmin/AdminDashboardController.php
@@ -0,0 +1,58 @@
+<?php
+
+namespace App\Http\Controllers\ClientAdmin;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Models\User;
+use App\Models\Role;
+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.name', '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(); // Add values() and toArray()
+
+        // Get all users for the timeline
+        $users = User::where('client_id', $clientId)
+            ->select('id', 'name', 'email')
+            ->get();
+
+        return Inertia::render('admin/admin-dashboard', [
+            'taskStats' => $taskStats,
+            'upcomingTasks' => $upcomingTasks,
+            'users' => $users,
+            'tasks' => $tasks
+        ]);
+    }
+}
diff --git a/database/seeders/TaskSeeder.php b/database/seeders/TaskSeeder.php
index 0b49895..ab73c46 100644
--- a/database/seeders/TaskSeeder.php
+++ b/database/seeders/TaskSeeder.php
@@ -58,6 +58,47 @@ public function run(): void
                 '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) {
diff --git a/package-lock.json b/package-lock.json
index 58dd788..08d7203 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
             "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",
@@ -37,6 +38,7 @@
                 "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",
@@ -285,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",
@@ -1090,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",
@@ -2902,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",
@@ -3504,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",
@@ -4354,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",
@@ -4435,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",
@@ -4527,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",
@@ -5011,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",
@@ -5018,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",
@@ -5532,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",
@@ -6351,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"
@@ -6486,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"
@@ -6878,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",
@@ -6963,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": {
@@ -7022,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",
@@ -7044,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",
@@ -7670,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",
@@ -7925,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",
@@ -7947,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 1656df4..8f0fb8f 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "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",
@@ -55,6 +56,7 @@
         "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/dashboard/task-stats-pie.tsx b/resources/js/components/dashboard/task-stats-pie.tsx
new file mode 100644
index 0000000..f98171e
--- /dev/null
+++ b/resources/js/components/dashboard/task-stats-pie.tsx
@@ -0,0 +1,83 @@
+import { ResponsivePie } from '@nivo/pie';
+import { router } from '@inertiajs/react';
+
+interface TaskStats {
+  completed: number;
+  in_progress: number;
+  pending: number;
+}
+
+export function TaskStatusPieChart({ taskStats }: { taskStats: TaskStats }) {
+  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(`/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..3cdf652
--- /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.name,
+            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-[300px] w-full">
+            <ResponsiveContainer width="100%" height="95%">
+                <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/pages/admin/admin-dashboard.tsx b/resources/js/pages/admin/admin-dashboard.tsx
new file mode 100644
index 0000000..08a4634
--- /dev/null
+++ b/resources/js/pages/admin/admin-dashboard.tsx
@@ -0,0 +1,103 @@
+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 { 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';
+
+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[];
+}
+
+export default function Dashboard({ taskStats, upcomingTasks, users, tasks }: DashboardProps) {
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title="Dashboard" />
+            <div className="flex h-full flex-1 flex-col gap-4 p-4">
+                <h1 className="text-2xl font-semibold mb-4">Dashboard</h1>
+                <div
+                    className="grid grid-cols-1 md:grid-cols-3 grid-rows-2 gap-4 h-full"
+                    style={{ minHeight: '70vh' }}
+                >
+                    {/* Recent Activity (left, spans 2 rows) */}
+                    <Card className="row-span-2 md:col-span-1">
+                        <CardHeader>
+                            <CardTitle>Recent Activity</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            {/* Add your recent activity component or content here */}
+                        </CardContent>
+                    </Card>
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Task Completion</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <TaskStatusPieChart taskStats={taskStats} />
+                        </CardContent>
+                    </Card>
+
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Team Workload</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <UserWorkloadChart tasks={tasks} users={users} />
+                        </CardContent>
+                    </Card>
+
+                    {/* Watch List (bottom right) */}
+                    <Card className="md:col-span-2">
+                        <CardHeader>
+                            <CardTitle>Watch List</CardTitle>
+                        </CardHeader>
+                        <CardContent className="h-64 overflow-y-auto">
+                            {/* Example: Upcoming Tasks */}
+                            <div className="space-y-4">
+                                {upcomingTasks.map((task) => (
+                                    <div key={task.id} className="flex items-center justify-between p-4 border rounded-lg">
+                                        <div>
+                                            <h3 className="font-medium">{task.name}</h3>
+                                            <p className="text-sm 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>
+            </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-task-list.tsx b/resources/js/pages/admin/admin-task-list.tsx
index ce052da..634d941 100644
--- a/resources/js/pages/admin/admin-task-list.tsx
+++ b/resources/js/pages/admin/admin-task-list.tsx
@@ -1,4 +1,4 @@
-import { Head } from '@inertiajs/react';
+import { Head, usePage, router } from '@inertiajs/react';
 import AppLayout from '@/layouts/app-layout';
 import { type BreadcrumbItem } from '@/types';
 import { Button } from '@/components/ui/button';
@@ -8,7 +8,6 @@ import { Plus, ArrowUpDown } from 'lucide-react';
 import { DataTable } from '@/components/data-table';
 import { ColumnDef } from '@tanstack/react-table';
 import { useState } from 'react';
-import { router } from '@inertiajs/react';
 import { format } from 'date-fns';
 import { Task, TaskStatus, User } from '@/types/task';
 import { CreateTaskDialog } from '@/components/tasks/create-task-dialog';
@@ -21,7 +20,6 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-
 interface PageProps {
     tasks: Task[];
     users: User[];
@@ -135,6 +133,13 @@ const columns: ColumnDef<Task>[] = [
 
 export default function Tasks({ tasks, users }: PageProps) {
     const [isTaskDialogOpen, setIsTaskDialogOpen] = useState(false);
+    const { url } = usePage();
+    const params = new URLSearchParams(url.split('?')[1]);
+    const statusFilter = params.get('status');
+
+    const filteredTasks = statusFilter
+        ? tasks.filter((task) => task.status === statusFilter)
+        : tasks;
 
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
@@ -147,11 +152,26 @@ export default function Tasks({ tasks, users }: PageProps) {
                     </div>
                 </div>
 
+                {statusFilter && (
+                    <div className="mb-4 flex items-center gap-2 px-6">
+                        <span className="text-sm text-muted-foreground">Showing tasks with status:</span>
+                        <Badge variant="outline" className="font-medium">{statusFilter.replace('_', ' ')}</Badge>
+                        <Button 
+                            size="sm" 
+                            variant="ghost" 
+                            onClick={() => router.visit('/tasks')} 
+                            className="h-7 px-2 text-sm text-muted-foreground hover:text-foreground cursor-pointer"
+                        >
+                            Clear filter
+                        </Button>
+                    </div>
+                )}
+
                 <Card>
                     <CardContent className="pt-6 ">
                         <DataTable
                             columns={columns}
-                            data={tasks}
+                            data={filteredTasks}
                             searchPlaceholder="Search tasks..."
                             searchColumn="name"
                             onRowClick={(task) => router.visit(`/tasks/${task.id}`)}
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/routes/web.php b/routes/web.php
index 31fdabf..a6dacab 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -6,15 +6,15 @@
 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;
 
 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('/dashboard', [AdminDashboardController::class, 'index'])
+        ->name('dashboard');
 
     // Admin Task Routes
     Route::middleware(['role:Client-Admin'])->group(function () {

From 9795b4ea5346b54e2660ba87e58417ef7dd07131 Mon Sep 17 00:00:00 2001
From: ryanmueller24 <ryanpmueller24@gmail.com>
Date: Mon, 26 May 2025 02:25:31 -0500
Subject: [PATCH 08/21] task details; user details; add task

---
 .../Crud/ClientAdmin/TaskController.php       | 12 +++++--
 app/Models/Agenda.php                         |  1 +
 app/Models/Client.php                         |  4 +--
 app/Models/Meeting.php                        |  4 +--
 app/Models/Task.php                           |  6 ++--
 app/Models/User.php                           |  4 +--
 .../components/tasks/create-task-dialog.tsx   |  6 ++--
 .../js/pages/admin/admin-meeting-details.tsx  | 34 ++++++++++++++++---
 .../js/pages/admin/admin-task-details.tsx     |  7 +++-
 9 files changed, 59 insertions(+), 19 deletions(-)

diff --git a/app/Http/Controllers/Crud/ClientAdmin/TaskController.php b/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
index 1302bed..7438420 100644
--- a/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
+++ b/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
@@ -40,7 +40,8 @@ public function store(Request $request)
             'priority' => 'required|in:low,medium,high',
             'due_date' => 'nullable|date',
             'users' => 'array',
-            'users.*' => 'exists:users,id'
+            'users.*' => 'exists:users,id',
+            'meeting_id' => 'nullable|exists:meetings,id'
         ]);
 
         $task = Task::create([
@@ -51,10 +52,15 @@ public function store(Request $request)
             'due_date' => $request->due_date,
             'client_id' => auth()->user()->client->id
         ]);
-
+        
         if ($request->has('users')) {
-            $task->users()->attach($request->users);
+            $task->users()->sync($request->users);
         }
+
+        if ($request->has('meeting_id')) {
+            $task->meetings()->sync([$request->meeting_id]);
+        }
+
         session()->flash('success', 'Task created successfully!');
         return back();
     }   
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/Task.php b/app/Models/Task.php
index bf07704..27ed398 100644
--- a/app/Models/Task.php
+++ b/app/Models/Task.php
@@ -27,11 +27,11 @@ public function client(): BelongsTo
 
     public function users(): BelongsToMany
     {
-        return $this->belongsToMany(User::class);
+        return $this->belongsToMany(User::class)->withTimestamps();
     }
 
-    public function meetings()
+    public function meetings(): BelongsToMany
     {
-        return $this->belongsToMany(Meeting::class);
+        return $this->belongsToMany(Meeting::class)->withTimestamps();
     }
 }
diff --git a/app/Models/User.php b/app/Models/User.php
index 67d495d..f556cf9 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -53,12 +53,12 @@ protected function casts(): array
 
     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
diff --git a/resources/js/components/tasks/create-task-dialog.tsx b/resources/js/components/tasks/create-task-dialog.tsx
index 445ba97..4d5352b 100644
--- a/resources/js/components/tasks/create-task-dialog.tsx
+++ b/resources/js/components/tasks/create-task-dialog.tsx
@@ -19,16 +19,18 @@ interface CreateTaskDialogProps {
     users: User[];
     open: boolean;
     onOpenChange: (open: boolean) => void;
+    meetingId?: number;
 }
 
-export function CreateTaskDialog({ users, open, onOpenChange }: CreateTaskDialogProps) {
+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[]
+        users: [] as number[],
+        meeting_id: meetingId
     });
 
     const handleSubmit = (e: React.FormEvent) => {
diff --git a/resources/js/pages/admin/admin-meeting-details.tsx b/resources/js/pages/admin/admin-meeting-details.tsx
index aabb08c..72f069a 100644
--- a/resources/js/pages/admin/admin-meeting-details.tsx
+++ b/resources/js/pages/admin/admin-meeting-details.tsx
@@ -14,11 +14,12 @@ import { useState } from 'react';
 import { router } from '@inertiajs/react';
 import { format } from 'date-fns';
 import { useForm } from '@inertiajs/react';
-import { Check, ChevronsUpDown, Trash2, Calendar, Users, ListTodo } from "lucide-react"
+import { 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';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -47,6 +48,7 @@ const typeColors: Record<MeetingType, string> = {
 
 export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
     const [isEditing, setIsEditing] = useState(false);
+    const [isCreateTaskOpen, setIsCreateTaskOpen] = useState(false);
     const { data, setData, put, processing, errors } = useForm({
         title: meeting.title,
         date: meeting.date,
@@ -260,7 +262,12 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                         <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">
+                                                    <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}`)}
+                                                    >
                                                         {user.name}
                                                     </Badge>
                                                 ))
@@ -275,7 +282,16 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
 
                         <Card className="shadow-sm">
                             <CardHeader className="pb-4">
-                                <CardTitle className="text-lg font-medium">Related Tasks</CardTitle>
+                                <div className="flex items-center justify-between">
+                                    <CardTitle className="text-lg font-medium">Related Tasks</CardTitle>
+                                    <Button 
+                                        onClick={() => setIsCreateTaskOpen(true)} 
+                                        className="cursor-pointer"
+                                    >
+                                        <Plus className="mr-2 h-4 w-4" />
+                                        Add Task
+                                    </Button>
+                                </div>
                             </CardHeader>
                             <CardContent>
                                 {isEditing ? (
@@ -332,7 +348,11 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                         <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">
+                                                    <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}`)}
+                                                    >
                                                         {task.name}
                                                     </Badge>
                                                 ))
@@ -352,6 +372,12 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                     </Button>
                 </div>
             </div>
+            <CreateTaskDialog 
+                open={isCreateTaskOpen}
+                onOpenChange={setIsCreateTaskOpen}
+                users={users}
+                meetingId={meeting.id}
+            />
         </AppLayout>
     );
 }
diff --git a/resources/js/pages/admin/admin-task-details.tsx b/resources/js/pages/admin/admin-task-details.tsx
index d3436b2..99e945b 100644
--- a/resources/js/pages/admin/admin-task-details.tsx
+++ b/resources/js/pages/admin/admin-task-details.tsx
@@ -277,7 +277,12 @@ export default function TaskDetails({ task, all_users }: PageProps) {
                                             <div className="flex flex-wrap gap-1">
                                                 {task.users.length > 0 ? (
                                                     task.users.map((user) => (
-                                                        <Badge key={user.id} variant="secondary" className="text-sm">
+                                                        <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}`)}
+                                                        >
                                                             {user.name}
                                                         </Badge>
                                                     ))

From f5ea7143be0bde3af539bea7cea949a8dc7d2113 Mon Sep 17 00:00:00 2001
From: ryanmueller24 <ryanpmueller24@gmail.com>
Date: Mon, 26 May 2025 10:51:10 -0500
Subject: [PATCH 09/21] changes to meeting details + task filters

---
 .../js/pages/admin/admin-meeting-details.tsx  | 81 +++++++++----------
 .../js/pages/admin/admin-meeting-list.tsx     | 27 ++++---
 resources/js/pages/admin/admin-task-list.tsx  | 50 +++++++-----
 3 files changed, 84 insertions(+), 74 deletions(-)

diff --git a/resources/js/pages/admin/admin-meeting-details.tsx b/resources/js/pages/admin/admin-meeting-details.tsx
index 72f069a..c15146d 100644
--- a/resources/js/pages/admin/admin-meeting-details.tsx
+++ b/resources/js/pages/admin/admin-meeting-details.tsx
@@ -127,7 +127,7 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                         <CardContent>
                             <form onSubmit={handleSubmit} className="space-y-8">
                                 <div className="grid grid-cols-2 gap-8">
-                                    <div className="space-y-2">
+                                    <div className="space-y-2 w-full">
                                         <Label htmlFor="title" className="text-sm font-medium">Meeting Title</Label>
                                         {isEditing ? (
                                             <Input
@@ -135,14 +135,13 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                                 value={data.title}
                                                 onChange={e => setData('title', e.target.value)}
                                                 error={errors.title}
-                                                className="h-10"
+                                                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="text-lg font-medium mt-2 h-10 flex items-center text-foreground">{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">
+                                    <div className="space-y-2 w-full">
                                         <Label htmlFor="type" className="text-sm font-medium">Meeting Type</Label>
                                         {isEditing ? (
                                             <Input
@@ -150,20 +149,17 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                                 value={data.type}
                                                 onChange={e => setData('type', e.target.value)}
                                                 error={errors.type}
-                                                className="h-10"
+                                                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="mt-2 h-10 flex items-center">
-                                                <Badge className={cn(typeColors[meeting.type as MeetingType], "text-sm font-medium px-3 py-1")}>
-                                                    {meeting.type}
-                                                </Badge>
+                                            <div 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>
-
-                                <div className="space-y-2">
+                                <div className="space-y-2 w-full">
                                     <Label htmlFor="date" className="text-sm font-medium">Date & Time</Label>
                                     {isEditing ? (
                                         <Input
@@ -172,17 +168,16 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                             value={data.date ? new Date(data.date).toISOString().slice(0, 16) : ''}
                                             onChange={e => setData('date', e.target.value)}
                                             error={errors.date}
-                                            className="h-10"
+                                            className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-muted-foreground border w-full"
                                         />
                                     ) : (
-                                        <div className="flex items-center text-muted-foreground mt-2 h-10">
+                                        <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">
+                                <div className="space-y-2 w-full">
                                     <Label htmlFor="agenda_text" className="text-sm font-medium">Agenda</Label>
                                     {isEditing ? (
                                         <Textarea
@@ -190,10 +185,10 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                             value={data.agenda_text}
                                             onChange={e => setData('agenda_text', e.target.value)}
                                             error={errors.agenda_text}
-                                            className="min-h-[200px]"
+                                            className="min-h-[200px] text-sm bg-muted/30 p-4 rounded-md border w-full"
                                         />
                                     ) : (
-                                        <div className="text-muted-foreground bg-muted/30 p-4 rounded-md mt-2 min-h-[200px]">
+                                        <div className="min-h-[200px] text-sm bg-muted/30 p-4 rounded-md border w-full">
                                             {meeting.agenda_text || 'No agenda set'}
                                         </div>
                                     )}
@@ -202,12 +197,19 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                         </CardContent>
                     </Card>
 
-                    <div className="space-y-6">
-                        <Card className="shadow-sm">
+                    <div className="space-y-6 col-span-1">
+                        <Card className="shadow-sm h-[calc(50%-12px)]">
                             <CardHeader className="pb-4">
-                                <CardTitle className="text-lg font-medium">Attendees</CardTitle>
+                                <div className="flex items-center justify-between">
+                                    <div className="flex items-center gap-2">
+                                        <CardTitle className="text-lg font-medium">Attendees</CardTitle>
+                                        <span className="text-sm text-muted-foreground">
+                                            ({meeting.users.length})
+                                        </span>
+                                    </div>
+                                </div>
                             </CardHeader>
-                            <CardContent>
+                            <CardContent className="h-[calc(100%-80px)] overflow-y-auto">
                                 {isEditing ? (
                                     <Popover>
                                         <PopoverTrigger asChild>
@@ -216,9 +218,7 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                                 role="combobox"
                                                 className="w-full justify-between h-10"
                                             >
-                                                {data.users.length > 0
-                                                    ? `${data.users.length} users selected`
-                                                    : "Select users..."}
+                                                Select users...
                                                 <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                                             </Button>
                                         </PopoverTrigger>
@@ -253,12 +253,6 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                     </Popover>
                                 ) : (
                                     <div className="space-y-4">
-                                        <div className="flex items-center text-muted-foreground">
-                                            <Users className="h-4 w-4 mr-2" />
-                                            {meeting.users.length > 0 
-                                                ? `${meeting.users.length} ${meeting.users.length === 1 ? 'Attendee' : 'Attendees'}`
-                                                : 'No Attendees'}
-                                        </div>
                                         <div className="flex flex-wrap gap-1.5">
                                             {meeting.users.length > 0 ? (
                                                 meeting.users.map((user) => (
@@ -272,7 +266,7 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                                     </Badge>
                                                 ))
                                             ) : (
-                                                <span className="text-muted-foreground text-sm">None</span>
+                                                <span className="text-muted-foreground text-sm">No attendees</span>
                                             )}
                                         </div>
                                     </div>
@@ -280,10 +274,15 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                             </CardContent>
                         </Card>
 
-                        <Card className="shadow-sm">
+                        <Card className="shadow-sm h-[calc(50%-12px)]">
                             <CardHeader className="pb-4">
                                 <div className="flex items-center justify-between">
-                                    <CardTitle className="text-lg font-medium">Related Tasks</CardTitle>
+                                    <div className="flex items-center gap-2">
+                                        <CardTitle className="text-lg font-medium">Related Tasks</CardTitle>
+                                        <span className="text-sm text-muted-foreground">
+                                            ({meeting.tasks.length})
+                                        </span>
+                                    </div>
                                     <Button 
                                         onClick={() => setIsCreateTaskOpen(true)} 
                                         className="cursor-pointer"
@@ -293,7 +292,7 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                     </Button>
                                 </div>
                             </CardHeader>
-                            <CardContent>
+                            <CardContent className="h-[calc(100%-80px)] overflow-y-auto">
                                 {isEditing ? (
                                     <Popover>
                                         <PopoverTrigger asChild>
@@ -302,9 +301,7 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                                 role="combobox"
                                                 className="w-full justify-between h-10"
                                             >
-                                                {data.tasks.length > 0
-                                                    ? `${data.tasks.length} tasks selected`
-                                                    : "Select tasks..."}
+                                                Select tasks...
                                                 <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                                             </Button>
                                         </PopoverTrigger>
@@ -339,12 +336,6 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                     </Popover>
                                 ) : (
                                     <div className="space-y-4">
-                                        <div className="flex items-center text-muted-foreground">
-                                            <ListTodo className="h-4 w-4 mr-2" />
-                                            {meeting.tasks.length > 0 
-                                                ? `${meeting.tasks.length} ${meeting.tasks.length === 1 ? 'Task' : 'Tasks'}`
-                                                : 'No Tasks'}
-                                        </div>
                                         <div className="flex flex-wrap gap-1.5">
                                             {meeting.tasks.length > 0 ? (
                                                 meeting.tasks.map((task) => (
@@ -357,7 +348,7 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                                     </Badge>
                                                 ))
                                             ) : (
-                                                <span className="text-muted-foreground text-sm">None</span>
+                                                <span className="text-muted-foreground text-sm">No tasks</span>
                                             )}
                                         </div>
                                     </div>
diff --git a/resources/js/pages/admin/admin-meeting-list.tsx b/resources/js/pages/admin/admin-meeting-list.tsx
index c1ee69f..15e0d3a 100644
--- a/resources/js/pages/admin/admin-meeting-list.tsx
+++ b/resources/js/pages/admin/admin-meeting-list.tsx
@@ -9,7 +9,7 @@ import { DataTable } from '@/components/data-table';
 import { ColumnDef } from '@tanstack/react-table';
 import { useState } from 'react';
 import { router } from '@inertiajs/react';
-import { format } from 'date-fns';
+import { format, isAfter } from 'date-fns';
 import { Meeting } from '@/types/meeting';
 import { Task, User } from '@/types/task';
 import { CreateMeetingDialog } from '@/components/meetings/create-meeting-dialog';
@@ -44,15 +44,26 @@ const columns: ColumnDef<Meeting>[] = [
             )
         },
         cell: ({ row }) => {
-            const meeting = row.original
+            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 className="text-sm text-muted-foreground">
-                        {meeting.type}
+                    <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>
-            )
+            );
         },
     },
     {
@@ -95,10 +106,8 @@ const columns: ColumnDef<Meeting>[] = [
         },
         cell: ({ row }) => {
             return (
-                <Badge variant="secondary">
-                    {row.getValue("type")}
-                </Badge>
-            )
+                <span className="text-sm text-muted-foreground">{row.getValue("type")}</span>
+            );
         },
     },
     {
diff --git a/resources/js/pages/admin/admin-task-list.tsx b/resources/js/pages/admin/admin-task-list.tsx
index 634d941..e206fb1 100644
--- a/resources/js/pages/admin/admin-task-list.tsx
+++ b/resources/js/pages/admin/admin-task-list.tsx
@@ -12,6 +12,7 @@ import { format } from 'date-fns';
 import { Task, TaskStatus, User } from '@/types/task';
 import { CreateTaskDialog } from '@/components/tasks/create-task-dialog';
 import { AdminTaskStats } from '@/components/tasks/admin-task-stats';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -133,13 +134,12 @@ const columns: ColumnDef<Task>[] = [
 
 export default function Tasks({ tasks, users }: PageProps) {
     const [isTaskDialogOpen, setIsTaskDialogOpen] = useState(false);
-    const { url } = usePage();
-    const params = new URLSearchParams(url.split('?')[1]);
-    const statusFilter = params.get('status');
+    const [selectedUser, setSelectedUser] = useState<string>('all');
+    const [selectedStatus, setSelectedStatus] = useState<string>('all');
 
-    const filteredTasks = statusFilter
-        ? tasks.filter((task) => task.status === statusFilter)
-        : tasks;
+    const filteredTasks = tasks
+        .filter(task => selectedStatus === 'all' || task.status === selectedStatus)
+        .filter(task => selectedUser === 'all' || task.users.some(u => String(u.id) === selectedUser));
 
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
@@ -152,20 +152,30 @@ export default function Tasks({ tasks, users }: PageProps) {
                     </div>
                 </div>
 
-                {statusFilter && (
-                    <div className="mb-4 flex items-center gap-2 px-6">
-                        <span className="text-sm text-muted-foreground">Showing tasks with status:</span>
-                        <Badge variant="outline" className="font-medium">{statusFilter.replace('_', ' ')}</Badge>
-                        <Button 
-                            size="sm" 
-                            variant="ghost" 
-                            onClick={() => router.visit('/tasks')} 
-                            className="h-7 px-2 text-sm text-muted-foreground hover:text-foreground cursor-pointer"
-                        >
-                            Clear filter
-                        </Button>
-                    </div>
-                )}
+                <div className="flex items-center gap-4 px-6 mb-4 ">
+                    <Select value={selectedStatus} onValueChange={setSelectedStatus} >
+                        <SelectTrigger className="w-[200px] cursor-pointer">
+                            <SelectValue placeholder="Filter by status" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="all" className="cursor-pointer">All Statuses</SelectItem>
+                            <SelectItem value="pending" className="cursor-pointer hover:bg-muted/50">Pending</SelectItem>
+                            <SelectItem value="in_progress" className="cursor-pointer hover:bg-muted/50">In Progress</SelectItem>
+                            <SelectItem value="completed" className="cursor-pointer hover:bg-muted/50">Completed</SelectItem>
+                        </SelectContent>
+                    </Select>
+                    <Select value={selectedUser} onValueChange={setSelectedUser}>
+                        <SelectTrigger className="w-[200px] cursor-pointer">
+                            <SelectValue placeholder="Filter by user" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="all" className="cursor-pointer">All Users</SelectItem>
+                            {users.map(user => (
+                                <SelectItem key={user.id} value={String(user.id)} className="cursor-pointer hover:bg-muted/50">{user.name}</SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
 
                 <Card>
                     <CardContent className="pt-6 ">

From d39a04562298b06660859e9aa683bbca5fb03089 Mon Sep 17 00:00:00 2001
From: Andrew McDowell <130783142+mcdowellbusiness@users.noreply.github.com>
Date: Mon, 26 May 2025 11:01:55 -0500
Subject: [PATCH 10/21] Update date & time input field on Meetings edit

---
 .../js/pages/admin/admin-meeting-details.tsx  | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/resources/js/pages/admin/admin-meeting-details.tsx b/resources/js/pages/admin/admin-meeting-details.tsx
index c15146d..0ad4f7a 100644
--- a/resources/js/pages/admin/admin-meeting-details.tsx
+++ b/resources/js/pages/admin/admin-meeting-details.tsx
@@ -12,7 +12,7 @@ import { Meeting } from '@/types/meeting';
 import { User, Task } from '@/types/task';
 import { useState } from 'react';
 import { router } from '@inertiajs/react';
-import { format } from 'date-fns';
+import { 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"
@@ -51,7 +51,7 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
     const [isCreateTaskOpen, setIsCreateTaskOpen] = useState(false);
     const { data, setData, put, processing, errors } = useForm({
         title: meeting.title,
-        date: meeting.date,
+        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),
@@ -162,14 +162,29 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                 <div className="space-y-2 w-full">
                                     <Label htmlFor="date" className="text-sm font-medium">Date & Time</Label>
                                     {isEditing ? (
-                                        <Input
-                                            type="datetime-local"
-                                            id="date"
-                                            value={data.date ? new Date(data.date).toISOString().slice(0, 16) : ''}
-                                            onChange={e => setData('date', e.target.value)}
-                                            error={errors.date}
-                                            className="h-10 text-sm bg-muted/30 p-4 rounded-md min-h-[40px] flex items-center text-muted-foreground border w-full"
-                                        />
+                                        <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" />

From 03840e90db1770b20ddd25bd94bbbce7051c57a7 Mon Sep 17 00:00:00 2001
From: Andrew McDowell <130783142+mcdowellbusiness@users.noreply.github.com>
Date: Mon, 26 May 2025 11:15:27 -0500
Subject: [PATCH 11/21] Breadcrumbs for Meeting Tasks/Attendees

---
 .../Crud/ClientAdmin/TaskController.php       |   5 +-
 .../Crud/ClientAdmin/UserController.php       |   5 +-
 .../js/pages/admin/admin-meeting-details.tsx  |  15 +-
 .../js/pages/admin/admin-task-details.tsx     |  54 ++++---
 .../js/pages/admin/admin-user-details.tsx     | 144 ++++++------------
 5 files changed, 98 insertions(+), 125 deletions(-)

diff --git a/app/Http/Controllers/Crud/ClientAdmin/TaskController.php b/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
index 7438420..7c23753 100644
--- a/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
+++ b/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
@@ -65,7 +65,7 @@ public function store(Request $request)
         return back();
     }   
 
-    public function show(Task $task)
+    public function show(Task $task, Request $request)
     {
         // Ensure the task belongs to the user's client
         if ($task->client_id !== auth()->user()->client->id) {
@@ -84,7 +84,8 @@ public function show(Task $task)
                 $query->where('users.client_id', $clientId)
                     ->select('users.id', 'users.name', 'users.email');
             }]),
-            'all_users' => $all_users
+            'all_users' => $all_users,
+            'from_meeting' => $request->query('from_meeting')
         ]);
     }
 
diff --git a/app/Http/Controllers/Crud/ClientAdmin/UserController.php b/app/Http/Controllers/Crud/ClientAdmin/UserController.php
index 46a13c1..2ae184c 100644
--- a/app/Http/Controllers/Crud/ClientAdmin/UserController.php
+++ b/app/Http/Controllers/Crud/ClientAdmin/UserController.php
@@ -72,14 +72,15 @@ public function update(Request $request, User $user)
         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('admin/admin-user-details', [
-            'user' => $user
+            'user' => $user,
+            'from_meeting' => $request->query('from_meeting')
         ]);
     }
 
diff --git a/resources/js/pages/admin/admin-meeting-details.tsx b/resources/js/pages/admin/admin-meeting-details.tsx
index 0ad4f7a..522de17 100644
--- a/resources/js/pages/admin/admin-meeting-details.tsx
+++ b/resources/js/pages/admin/admin-meeting-details.tsx
@@ -58,6 +58,17 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
         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(`/meetings/${meeting.id}`, {
@@ -275,7 +286,7 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                                         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}`)}
+                                                        onClick={() => router.visit(`/users/${user.id}?from_meeting=${meeting.id}`)}
                                                     >
                                                         {user.name}
                                                     </Badge>
@@ -357,7 +368,7 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                                     <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}`)}
+                                                        onClick={() => router.visit(`/tasks/${task.id}?from_meeting=${meeting.id}`)}
                                                     >
                                                         {task.name}
                                                     </Badge>
diff --git a/resources/js/pages/admin/admin-task-details.tsx b/resources/js/pages/admin/admin-task-details.tsx
index 99e945b..1beaa49 100644
--- a/resources/js/pages/admin/admin-task-details.tsx
+++ b/resources/js/pages/admin/admin-task-details.tsx
@@ -12,27 +12,17 @@ import { Task, TaskStatus, TaskPriority, User } from '@/types/task';
 import { useState } from 'react';
 import { router } from '@inertiajs/react';
 import { format } from 'date-fns';
-import { useForm } from '@inertiajs/react';
+import { useForm, usePage } from '@inertiajs/react';
 import { Check, ChevronsUpDown, Trash2, Calendar, Users, AlertCircle } from "lucide-react"
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 import { cn } from "@/lib/utils"
 import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
 
-const breadcrumbs: BreadcrumbItem[] = [
-    {
-        title: 'Tasks',
-        href: '/tasks',
-    },
-    {
-        title: 'Task Details',
-        href: '#',
-    },
-];
-
 interface PageProps {
     task: Task;
     all_users: User[];
+    from_meeting?: number;
 }
 
 const statusColors = {
@@ -57,6 +47,30 @@ export default function TaskDetails({ task, all_users }: PageProps) {
         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();
@@ -71,8 +85,6 @@ export default function TaskDetails({ task, all_users }: PageProps) {
         setIsEditing(false);
     };
 
-
-
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
             <Head title={`Task: ${task.name}`} />
@@ -281,7 +293,7 @@ export default function TaskDetails({ task, all_users }: PageProps) {
                                                             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}`)}
+                                                            onClick={() => router.visit(`/users/${user.id}?from_meeting=${fromMeetingId}`)}
                                                         >
                                                             {user.name}
                                                         </Badge>
@@ -298,9 +310,15 @@ export default function TaskDetails({ task, all_users }: PageProps) {
                     </CardContent>
                 </Card>
                 <div className="mt-6">
-                    <Button variant="outline" onClick={() => router.visit('/tasks')} className="cursor-pointer">
-                        ← Back to Tasks List
-                    </Button>
+                    {fromMeetingId ? (
+                        <Button variant="outline" onClick={() => router.visit(`/meetings/${fromMeetingId}`)} className="cursor-pointer">
+                            ← Back to Meeting
+                        </Button>
+                    ) : (
+                        <Button variant="outline" onClick={() => router.visit('/tasks')} className="cursor-pointer">
+                            ← Back to Tasks List
+                        </Button>
+                    )}
                 </div>
             </div>
         </AppLayout>
diff --git a/resources/js/pages/admin/admin-user-details.tsx b/resources/js/pages/admin/admin-user-details.tsx
index 1e485e3..f701a96 100644
--- a/resources/js/pages/admin/admin-user-details.tsx
+++ b/resources/js/pages/admin/admin-user-details.tsx
@@ -1,39 +1,54 @@
 import React, { useState } from 'react';
-import { Head, Link, useForm, router } from '@inertiajs/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, Trash2 } from 'lucide-react';
+import { User } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { PageProps } from '@/types';
-import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
 
-
-interface User {
+interface UserData {
     id: number;
     name: string;
     email: string;
 }
 
-const breadcrumbs: BreadcrumbItem[] = [
-    {
-        title: 'Users',
-        href: '/users',
-    },
-    {
-        title: 'User Details',
-        href: '/users/details',
-    },
-];
+interface PageProps {
+    user: UserData;
+    from_meeting?: number;
+}
 
-export default function UserDetails({ user }: PageProps<{ user: User }>) {
+export default function UserDetails({ user }: PageProps) {
     const [isEditing, setIsEditing] = useState(false);
     const { data, setData, put, processing, errors, reset } = useForm({
         name: user.name,
         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.name,
+            href: '#',
+        },
+    ];
 
     const handleSave = () => {
         put(`/users/${user.id}`, {
@@ -48,9 +63,6 @@ export default function UserDetails({ user }: PageProps<{ user: User }>) {
         setIsEditing(false);
     };
 
-
-
-
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
             <Head title={`User: ${data.name}`} />
@@ -64,99 +76,29 @@ export default function UserDetails({ user }: PageProps<{ user: User }>) {
                                 </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}
-                                            className="cursor-pointer"
-                                        >
-                                            Cancel
-                                        </Button>
-                                        <Button
-                                            onClick={handleSave}
-                                            disabled={processing}
-                                            className="cursor-pointer"
-                                        >
-                                            {processing ? 'Saving...' : 'Save Changes'}
-                                        </Button>
-                                    </div>
-                                ) : (
-                                    <div className="flex gap-2">
-                                        <Button
-                                            variant="outline"
-                                            onClick={() => setIsEditing(true)}
-                                            className="cursor-pointer"
-                                        >
-                                            Edit Profile
-                                        </Button>
-                                        <DeleteConfirmation
-                                            onConfirm={() => router.delete(`/users/${user.id}`)}
-                                            itemType="user"
-                                            itemName={user.name}
-                                        >
-                                            <Button variant="destructive" className="cursor-pointer">
-                                                Delete User
-                                            </Button>
-                                        </DeleteConfirmation>
-                                    </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>
-                                )}
+                                <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>
+                            <div className="mt-6">
+                                {fromMeetingId ? (
+                                    <Button variant="outline" onClick={() => router.visit(`/meetings/${fromMeetingId}`)} className="cursor-pointer">
+                                        ← Back to Meeting
+                                    </Button>
                                 ) : (
-                                    <p className="text-lg">{data.email}</p>
+                                    <Button variant="outline" onClick={() => router.visit('/users')} className="cursor-pointer">
+                                        ← Back to Users List
+                                    </Button>
                                 )}
                             </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>

From 0439083605eeeb7479023906aa00d6f741a0a806 Mon Sep 17 00:00:00 2001
From: Andrew McDowell <130783142+mcdowellbusiness@users.noreply.github.com>
Date: Mon, 26 May 2025 11:37:58 -0500
Subject: [PATCH 12/21] Agenda Setup

---
 ...2025_04_29_064129_create_agendas_table.php |   2 +-
 .../js/pages/admin/admin-meeting-details.tsx  | 451 +++++++++---------
 2 files changed, 226 insertions(+), 227 deletions(-)

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/resources/js/pages/admin/admin-meeting-details.tsx b/resources/js/pages/admin/admin-meeting-details.tsx
index 522de17..4f4b9ab 100644
--- a/resources/js/pages/admin/admin-meeting-details.tsx
+++ b/resources/js/pages/admin/admin-meeting-details.tsx
@@ -131,257 +131,256 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                 </div>
 
                 <div className="grid grid-cols-3 gap-6">
-                    <Card className="col-span-2 shadow-sm">
+                    <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-2 gap-8">
-                                    <div className="space-y-2 w-full">
-                                        <Label htmlFor="title" className="text-sm font-medium">Meeting Title</Label>
+                                <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 ? (
-                                            <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"
+                                            <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="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 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>
-                                <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 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="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 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>
-                                <div className="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-[200px] text-sm bg-muted/30 p-4 rounded-md border w-full"
-                                        />
-                                    ) : (
-                                        <div className="min-h-[200px] text-sm bg-muted/30 p-4 rounded-md border w-full">
-                                            {meeting.agenda_text || 'No agenda set'}
+
+                                        <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>
-                            </form>
-                        </CardContent>
-                    </Card>
 
-                    <div className="space-y-6 col-span-1">
-                        <Card className="shadow-sm h-[calc(50%-12px)]">
-                            <CardHeader className="pb-4">
-                                <div className="flex items-center justify-between">
-                                    <div className="flex items-center gap-2">
-                                        <CardTitle className="text-lg font-medium">Attendees</CardTitle>
-                                        <span className="text-sm text-muted-foreground">
-                                            ({meeting.users.length})
-                                        </span>
-                                    </div>
-                                </div>
-                            </CardHeader>
-                            <CardContent className="h-[calc(100%-80px)] overflow-y-auto">
-                                {isEditing ? (
-                                    <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"
+                                        <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 ? (
+                                                <Popover>
+                                                    <PopoverTrigger asChild>
+                                                        <Button
+                                                            variant="outline"
+                                                            role="combobox"
+                                                            className="w-full justify-between h-10"
                                                         >
-                                                            <Check
-                                                                className={cn(
-                                                                    "h-4 w-4",
-                                                                    data.users.includes(user.id) ? "opacity-100" : "opacity-0"
-                                                                )}
-                                                            />
-                                                            <span>{user.name}</span>
-                                                        </CommandItem>
-                                                    ))}
-                                                </CommandGroup>
-                                            </Command>
-                                        </PopoverContent>
-                                    </Popover>
-                                ) : (
-                                    <div className="space-y-4">
-                                        <div className="flex 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.name}
-                                                    </Badge>
-                                                ))
+                                                            Select users...
+                                                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                                        </Button>
+                                                    </PopoverTrigger>
+                                                    <PopoverContent className="w-full p-0" align="start">
+                                                        <Command className="max-h-[200px]">
+                                                            <CommandInput placeholder="Search users..." />
+                                                            <CommandEmpty>No users found.</CommandEmpty>
+                                                            <CommandGroup className="overflow-y-auto">
+                                                                {users.map((user) => (
+                                                                    <CommandItem
+                                                                        key={user.id}
+                                                                        onSelect={() => {
+                                                                            const newUsers = data.users.includes(user.id)
+                                                                                ? data.users.filter(id => id !== user.id)
+                                                                                : [...data.users, user.id];
+                                                                            setData('users', newUsers);
+                                                                        }}
+                                                                        className="flex items-center gap-2 px-2 py-1.5"
+                                                                    >
+                                                                        <Check
+                                                                            className={cn(
+                                                                                "h-4 w-4",
+                                                                                data.users.includes(user.id) ? "opacity-100" : "opacity-0"
+                                                                            )}
+                                                                        />
+                                                                        <span>{user.name}</span>
+                                                                    </CommandItem>
+                                                                ))}
+                                                            </CommandGroup>
+                                                        </Command>
+                                                    </PopoverContent>
+                                                </Popover>
                                             ) : (
-                                                <span className="text-muted-foreground text-sm">No attendees</span>
+                                                <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.name}
+                                                                </Badge>
+                                                            ))
+                                                        ) : (
+                                                            <span className="text-muted-foreground text-sm">No attendees</span>
+                                                        )}
+                                                    </div>
+                                                </div>
                                             )}
                                         </div>
-                                    </div>
-                                )}
-                            </CardContent>
-                        </Card>
 
-                        <Card className="shadow-sm h-[calc(50%-12px)]">
-                            <CardHeader className="pb-4">
-                                <div className="flex items-center justify-between">
-                                    <div className="flex items-center gap-2">
-                                        <CardTitle className="text-lg font-medium">Related Tasks</CardTitle>
-                                        <span className="text-sm text-muted-foreground">
-                                            ({meeting.tasks.length})
-                                        </span>
-                                    </div>
-                                    <Button 
-                                        onClick={() => setIsCreateTaskOpen(true)} 
-                                        className="cursor-pointer"
-                                    >
-                                        <Plus className="mr-2 h-4 w-4" />
-                                        Add Task
-                                    </Button>
-                                </div>
-                            </CardHeader>
-                            <CardContent className="h-[calc(100%-80px)] overflow-y-auto">
-                                {isEditing ? (
-                                    <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}`)}
+                                        <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"
                                                     >
-                                                        {task.name}
-                                                    </Badge>
-                                                ))
+                                                        <Plus className="h-4 w-4 mr-2" />
+                                                        Add Task
+                                                    </Button>
+                                                )}
+                                            </div>
+                                            {isEditing ? (
+                                                <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>
                                             ) : (
-                                                <span className="text-muted-foreground text-sm">No tasks</span>
+                                                <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>
-                                )}
-                            </CardContent>
-                        </Card>
-                    </div>
+                                </div>
+                            </form>
+                        </CardContent>
+                    </Card>
                 </div>
                 <div className="mt-6">
                     <Button variant="outline" onClick={() => router.visit('/meetings')} className="cursor-pointer">

From d51dc4d4f35c2f556f8e47fac1c87aa3f6081fd0 Mon Sep 17 00:00:00 2001
From: Andrew McDowell <130783142+mcdowellbusiness@users.noreply.github.com>
Date: Mon, 26 May 2025 11:41:52 -0500
Subject: [PATCH 13/21] Task/Attendee preview on meeting details

---
 .../js/pages/admin/admin-meeting-details.tsx  | 192 ++++++++++--------
 1 file changed, 112 insertions(+), 80 deletions(-)

diff --git a/resources/js/pages/admin/admin-meeting-details.tsx b/resources/js/pages/admin/admin-meeting-details.tsx
index 4f4b9ab..c2fcb77 100644
--- a/resources/js/pages/admin/admin-meeting-details.tsx
+++ b/resources/js/pages/admin/admin-meeting-details.tsx
@@ -233,46 +233,62 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                                 </div>
                                             </div>
                                             {isEditing ? (
-                                                <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.name}</span>
-                                                                    </CommandItem>
-                                                                ))}
-                                                            </CommandGroup>
-                                                        </Command>
-                                                    </PopoverContent>
-                                                </Popover>
+                                                <>
+                                                    <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.name}
+                                                                </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.name}</span>
+                                                                        </CommandItem>
+                                                                    ))}
+                                                                </CommandGroup>
+                                                            </Command>
+                                                        </PopoverContent>
+                                                    </Popover>
+                                                </>
                                             ) : (
                                                 <div className="space-y-4">
                                                     <div className="flex flex-wrap gap-1.5">
@@ -316,46 +332,62 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                                 )}
                                             </div>
                                             {isEditing ? (
-                                                <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="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">

From bcc8662f22205379ebede2185ed864678e499638 Mon Sep 17 00:00:00 2001
From: Andrew McDowell <130783142+mcdowellbusiness@users.noreply.github.com>
Date: Mon, 26 May 2025 11:47:44 -0500
Subject: [PATCH 14/21] Update admin-user-details.tsx

---
 .../js/pages/admin/admin-user-details.tsx     | 61 +++++++++++++++++--
 1 file changed, 56 insertions(+), 5 deletions(-)

diff --git a/resources/js/pages/admin/admin-user-details.tsx b/resources/js/pages/admin/admin-user-details.tsx
index f701a96..b32c77f 100644
--- a/resources/js/pages/admin/admin-user-details.tsx
+++ b/resources/js/pages/admin/admin-user-details.tsx
@@ -7,6 +7,8 @@ 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';
 
 interface UserData {
     id: number;
@@ -46,15 +48,16 @@ export default function UserDetails({ user }: PageProps) {
         ]),
         {
             title: user.name,
-            href: '#',
+            href: `/users/${user.id}`,
         },
     ];
 
-    const handleSave = () => {
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
         put(`/users/${user.id}`, {
             onSuccess: () => {
                 setIsEditing(false);
-            },
+            }
         });
     };
 
@@ -76,17 +79,65 @@ export default function UserDetails({ user }: PageProps) {
                                 </div>
                                 <CardTitle className="text-2xl font-semibold">{data.name}</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.name}
+                                        >
+                                            <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="name">Name</Label>
-                                <p className="text-lg">{data.name}</p>
+                                {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"
+                                    />
+                                ) : (
+                                    <p className="text-lg">{data.name}</p>
+                                )}
                             </div>
                             <div className="space-y-2">
                                 <Label htmlFor="email">Email</Label>
-                                <p className="text-lg">{data.email}</p>
+                                {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 ? (

From d1bfcdfc83f0106930a11d5831afb873bd349373 Mon Sep 17 00:00:00 2001
From: Andrew McDowell <130783142+mcdowellbusiness@users.noreply.github.com>
Date: Mon, 26 May 2025 12:00:09 -0500
Subject: [PATCH 15/21] Update filtering on Tasks table

---
 resources/js/pages/admin/admin-task-list.tsx | 240 +++++++++++++++----
 1 file changed, 200 insertions(+), 40 deletions(-)

diff --git a/resources/js/pages/admin/admin-task-list.tsx b/resources/js/pages/admin/admin-task-list.tsx
index e206fb1..a2cb728 100644
--- a/resources/js/pages/admin/admin-task-list.tsx
+++ b/resources/js/pages/admin/admin-task-list.tsx
@@ -4,15 +4,30 @@ import { type BreadcrumbItem } from '@/types';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Plus, ArrowUpDown } from 'lucide-react';
+import { 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 } from 'date-fns';
-import { Task, TaskStatus, User } from '@/types/task';
+import { format, addDays, isAfter, isBefore, startOfDay, endOfDay } from 'date-fns';
+import { Task, TaskStatus, User as TaskUser } from '@/types/task';
 import { CreateTaskDialog } from '@/components/tasks/create-task-dialog';
 import { AdminTaskStats } from '@/components/tasks/admin-task-stats';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+    DropdownMenuGroup,
+} from "@/components/ui/dropdown-menu";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -23,7 +38,7 @@ const breadcrumbs: BreadcrumbItem[] = [
 
 interface PageProps {
     tasks: Task[];
-    users: User[];
+    users: TaskUser[];
 }
 
 const columns: ColumnDef<Task>[] = [
@@ -134,12 +149,88 @@ const columns: ColumnDef<Task>[] = [
 
 export default function Tasks({ tasks, users }: PageProps) {
     const [isTaskDialogOpen, setIsTaskDialogOpen] = useState(false);
-    const [selectedUser, setSelectedUser] = useState<string>('all');
-    const [selectedStatus, setSelectedStatus] = useState<string>('all');
+    const [filteredTasks, setFilteredTasks] = useState(tasks);
+    const [selectedUser, setSelectedUser] = useState<string | null>(null);
+    const [selectedDateFilter, setSelectedDateFilter] = useState<string | null>(null);
 
-    const filteredTasks = tasks
-        .filter(task => selectedStatus === 'all' || task.status === selectedStatus)
-        .filter(task => selectedUser === 'all' || task.users.some(u => String(u.id) === selectedUser));
+    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}>
@@ -152,33 +243,8 @@ export default function Tasks({ tasks, users }: PageProps) {
                     </div>
                 </div>
 
-                <div className="flex items-center gap-4 px-6 mb-4 ">
-                    <Select value={selectedStatus} onValueChange={setSelectedStatus} >
-                        <SelectTrigger className="w-[200px] cursor-pointer">
-                            <SelectValue placeholder="Filter by status" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem value="all" className="cursor-pointer">All Statuses</SelectItem>
-                            <SelectItem value="pending" className="cursor-pointer hover:bg-muted/50">Pending</SelectItem>
-                            <SelectItem value="in_progress" className="cursor-pointer hover:bg-muted/50">In Progress</SelectItem>
-                            <SelectItem value="completed" className="cursor-pointer hover:bg-muted/50">Completed</SelectItem>
-                        </SelectContent>
-                    </Select>
-                    <Select value={selectedUser} onValueChange={setSelectedUser}>
-                        <SelectTrigger className="w-[200px] cursor-pointer">
-                            <SelectValue placeholder="Filter by user" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem value="all" className="cursor-pointer">All Users</SelectItem>
-                            {users.map(user => (
-                                <SelectItem key={user.id} value={String(user.id)} className="cursor-pointer hover:bg-muted/50">{user.name}</SelectItem>
-                            ))}
-                        </SelectContent>
-                    </Select>
-                </div>
-
                 <Card>
-                    <CardContent className="pt-6 ">
+                    <CardContent className="pt-6">
                         <DataTable
                             columns={columns}
                             data={filteredTasks}
@@ -186,10 +252,104 @@ export default function Tasks({ tasks, users }: PageProps) {
                             searchColumn="name"
                             onRowClick={(task) => router.visit(`/tasks/${task.id}`)}
                             addButton={
-                                <Button onClick={() => setIsTaskDialogOpen(true)} className="cursor-pointer">
-                                    <Plus className="mr-2 h-4 w-4" />
-                                    Add Task
-                                </Button>
+                                <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.name}
+                                                                </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>

From 529bf34a25df699391d0e2306afd747c58c05183 Mon Sep 17 00:00:00 2001
From: Andrew McDowell <130783142+mcdowellbusiness@users.noreply.github.com>
Date: Mon, 26 May 2025 12:38:26 -0500
Subject: [PATCH 16/21] Task details

---
 .../js/pages/admin/admin-task-details.tsx     | 358 +++++++++---------
 1 file changed, 171 insertions(+), 187 deletions(-)

diff --git a/resources/js/pages/admin/admin-task-details.tsx b/resources/js/pages/admin/admin-task-details.tsx
index 1beaa49..1f178bc 100644
--- a/resources/js/pages/admin/admin-task-details.tsx
+++ b/resources/js/pages/admin/admin-task-details.tsx
@@ -14,10 +14,9 @@ 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 { 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 { MultiSelect } from "@/components/ui/multi-select"
 
 interface PageProps {
     task: Task;
@@ -77,28 +76,47 @@ export default function TaskDetails({ task, all_users }: PageProps) {
         put(`/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-4 p-4">
+            <div className="flex h-full flex-1 flex-col gap-6 p-6">
                 <div className="flex items-center justify-between">
-                    <h1 className="text-2xl font-semibold">Task Details</h1>
+                    <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">
-                                    Save Changes
+                                <Button 
+                                    onClick={handleSubmit} 
+                                    disabled={processing} 
+                                    className="cursor-pointer"
+                                >
+                                    {processing ? 'Saving...' : 'Save Changes'}
                                 </Button>
                             </>
                         ) : (
@@ -120,195 +138,161 @@ export default function TaskDetails({ task, all_users }: PageProps) {
                     </div>
                 </div>
 
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Task Information</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <form onSubmit={handleSubmit} className="space-y-6">
-                            <div className="space-y-2">
-                                <Label htmlFor="name">Task Name</Label>
-                                {isEditing ? (
-                                    <Input
-                                        id="name"
-                                        value={data.name}
-                                        onChange={e => setData('name', e.target.value)}
-                                        error={errors.name}
-                                        className="h-10"
-                                    />
-                                ) : (
-                                    <div className="text-lg font-medium mt-2 h-10 flex items-center">{task.name}</div>
-                                )}
-                            </div>
-
-                            <div className="space-y-2">
-                                <Label htmlFor="description">Description</Label>
-                                {isEditing ? (
-                                    <Textarea
-                                        id="description"
-                                        value={data.description}
-                                        onChange={e => setData('description', e.target.value)}
-                                        error={errors.description}
-                                        className="min-h-[100px]"
-                                    />
-                                ) : (
-                                    <div className="text-muted-foreground bg-muted/50 p-3 rounded-md mt-2 min-h-[100px]">
-                                        {task.description}
-                                    </div>
-                                )}
-                            </div>
+                <div className="grid grid-cols-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="grid grid-cols-2 gap-6">
-                                <div className="space-y-2">
-                                    <Label htmlFor="status">Status</Label>
-                                    {isEditing ? (
-                                        <Select
-                                            value={data.status}
-                                            onValueChange={(value) => {
-                                                setData('status', value as TaskStatus);
-                                            }}
-                                        >
-                                            <SelectTrigger className="h-10">
-                                                <SelectValue />
-                                            </SelectTrigger>
-                                            <SelectContent>
-                                                <SelectItem value="pending">Pending</SelectItem>
-                                                <SelectItem value="in_progress">In Progress</SelectItem>
-                                                <SelectItem value="completed">Completed</SelectItem>
-                                            </SelectContent>
-                                        </Select>
-                                    ) : (
-                                        <div className="mt-2 h-10 flex items-center">
-                                            <Badge className={cn(statusColors[task.status], "text-sm font-medium px-3 py-1")}>
-                                                {task.status.replace('_', ' ')}
-                                            </Badge>
+                                        <div 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>
 
-                                <div className="space-y-2">
-                                    <Label htmlFor="priority">Priority</Label>
-                                    {isEditing ? (
-                                        <Select
-                                            value={data.priority}
-                                            onValueChange={(value) => {
-                                                setData('priority', value as TaskPriority);
-                                            }}
-                                        >
-                                            <SelectTrigger className="h-10">
-                                                <SelectValue />
-                                            </SelectTrigger>
-                                            <SelectContent>
-                                                <SelectItem value="low">Low</SelectItem>
-                                                <SelectItem value="medium">Medium</SelectItem>
-                                                <SelectItem value="high">High</SelectItem>
-                                            </SelectContent>
-                                        </Select>
-                                    ) : (
-                                        <div className="mt-2 h-10 flex items-center">
-                                            <Badge className={cn(priorityColors[task.priority], "text-sm font-medium px-3 py-1")}>
-                                                {task.priority}
-                                            </Badge>
+                                        <div className="space-y-2 w-full">
+                                            {isEditing ? (
+                                                <MultiSelect
+                                                    items={all_users}
+                                                    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.name}
+                                                                </Badge>
+                                                            ))
+                                                        ) : (
+                                                            <span className="text-muted-foreground text-sm">No users assigned</span>
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            )}
                                         </div>
-                                    )}
-                                </div>
-                            </div>
+                                    </div>
 
-                            <div className="grid grid-cols-2 gap-6">
-                                <div className="space-y-2">
-                                    <Label>Due Date</Label>
-                                    {isEditing ? (
-                                        <Input
-                                            type="date"
-                                            value={data.due_date ? new Date(data.due_date).toISOString().split('T')[0] : ''}
-                                            onChange={e => setData('due_date', e.target.value)}
-                                            error={errors.due_date}
-                                            className="h-10"
-                                        />
-                                    ) : (
-                                        <div className="flex items-center text-muted-foreground mt-2 h-10">
-                                            <Calendar className="h-4 w-4 mr-2" />
-                                            {task.due_date ? format(new Date(task.due_date), 'MMM dd, yyyy') : 'No due date'}
+                                    <div 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>
 
-                                <div className="space-y-2">
-                                    <Label>Assigned Users</Label>
-                                    {isEditing ? (
-                                        <Popover>
-                                            <PopoverTrigger asChild>
-                                                <Button
-                                                    variant="outline"
-                                                    role="combobox"
-                                                    className="w-full justify-between h-10"
+                                        <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);
+                                                    }}
                                                 >
-                                                    {data.users.length > 0
-                                                        ? `${data.users.length} users selected`
-                                                        : "Select users..."}
-                                                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                                                </Button>
-                                            </PopoverTrigger>
-                                            <PopoverContent className="w-full p-0" align="start">
-                                                <Command className="max-h-[200px]">
-                                                    <CommandInput placeholder="Search users..." />
-                                                    <CommandEmpty>No users found.</CommandEmpty>
-                                                    <CommandGroup className="overflow-y-auto">
-                                                        {all_users.map((user) => (
-                                                            <CommandItem
-                                                                key={user.id}
-                                                                onSelect={() => {
-                                                                    const newUsers = data.users.includes(user.id)
-                                                                        ? data.users.filter(id => id !== user.id)
-                                                                        : [...data.users, user.id];
-                                                                    setData('users', newUsers);
-                                                                }}
-                                                                className="flex items-center gap-2 px-2 py-1.5"
-                                                            >
-                                                                <Check
-                                                                    className={cn(
-                                                                        "h-4 w-4",
-                                                                        data.users.includes(user.id) ? "opacity-100" : "opacity-0"
-                                                                    )}
-                                                                />
-                                                                <span>{user.name}</span>
-                                                            </CommandItem>
-                                                        ))}
-                                                    </CommandGroup>
-                                                </Command>
-                                            </PopoverContent>
-                                        </Popover>
-                                    ) : (
-                                        <div className="space-y-2 mt-2 min-h-[40px]">
-                                            <div className="flex items-center text-muted-foreground">
-                                                <Users className="h-4 w-4 mr-2" />
-                                                {task.users.length > 0 
-                                                    ? `${task.users.length} ${task.users.length === 1 ? 'User' : 'Users'} Assigned`
-                                                    : 'No Users Assigned'}
-                                            </div>
-                                            <div className="flex flex-wrap gap-1">
-                                                {task.users.length > 0 ? (
-                                                    task.users.map((user) => (
-                                                        <Badge 
-                                                            key={user.id} 
-                                                            variant="secondary" 
-                                                            className="text-sm bg-muted/50 cursor-pointer hover:bg-muted/70 transition-colors"
-                                                            onClick={() => router.visit(`/users/${user.id}?from_meeting=${fromMeetingId}`)}
-                                                        >
-                                                            {user.name}
-                                                        </Badge>
-                                                    ))
-                                                ) : (
-                                                    <span className="text-muted-foreground text-sm">None</span>
-                                                )}
-                                            </div>
+                                                    <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>
-                            </div>
-                        </form>
-                    </CardContent>
-                </Card>
+                            </form>
+                        </CardContent>
+                    </Card>
+                </div>
+
                 <div className="mt-6">
                     {fromMeetingId ? (
                         <Button variant="outline" onClick={() => router.visit(`/meetings/${fromMeetingId}`)} className="cursor-pointer">
@@ -323,4 +307,4 @@ export default function TaskDetails({ task, all_users }: PageProps) {
             </div>
         </AppLayout>
     );
-}
\ No newline at end of file
+}

From 70339033c0fa4e55649934c572902bb95f68898f Mon Sep 17 00:00:00 2001
From: ryanmueller24 <ryanpmueller24@gmail.com>
Date: Fri, 30 May 2025 11:28:22 -0500
Subject: [PATCH 17/21] Member user dashboard

Added the functionality in the routing to make sure the user is directed to the correct dashboard.
---
 .../Member/MemberDashboardController.php      |  66 ++++++++
 .../js/pages/member/member-dashboard.tsx      | 150 ++++++++++++++++++
 routes/web.php                                |  58 ++++---
 3 files changed, 249 insertions(+), 25 deletions(-)
 create mode 100644 app/Http/Controllers/Member/MemberDashboardController.php
 create mode 100644 resources/js/pages/member/member-dashboard.tsx

diff --git a/app/Http/Controllers/Member/MemberDashboardController.php b/app/Http/Controllers/Member/MemberDashboardController.php
new file mode 100644
index 0000000..4420049
--- /dev/null
+++ b/app/Http/Controllers/Member/MemberDashboardController.php
@@ -0,0 +1,66 @@
+<?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;
+
+class MemberDashboardController extends Controller
+{
+    public function index()
+    {
+        $user = auth()->user();
+        $clientId = $user->client->id;
+
+        // Get tasks assigned to this member
+        $tasks = Task::where('client_id', $clientId)
+            ->whereHas('users', function ($query) use ($user) {
+                $query->where('users.id', $user->id);
+            })
+            ->with(['users' => function ($query) use ($clientId) {
+                $query->where('users.client_id', $clientId)
+                    ->select('users.id', 'users.name', 'users.email');
+            }])
+            ->get();
+
+        // Get task statistics for this member
+        $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 ($user) {
+                $query->where('users.id', $user->id);
+            })
+            ->with(['users' => function ($query) use ($clientId) {
+                $query->where('users.client_id', $clientId)
+                    ->select('users.id', 'users.name', 'users.email');
+            }])
+            ->get();
+
+        return Inertia::render('member/member-dashboard', [
+            'taskStats' => $taskStats,
+            'upcomingTasks' => $upcomingTasks,
+            'meetings' => $meetings,
+            'tasks' => $tasks
+        ]);
+    }
+} 
\ No newline at end of file
diff --git a/resources/js/pages/member/member-dashboard.tsx b/resources/js/pages/member/member-dashboard.tsx
new file mode 100644
index 0000000..3fc47c5
--- /dev/null
+++ b/resources/js/pages/member/member-dashboard.tsx
@@ -0,0 +1,150 @@
+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 { Progress } from '@/components/ui/progress';
+import { AlertCircle, CheckCircle2, Clock, Eye } from 'lucide-react';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Dashboard',
+        href: '/dashboard',
+    },
+];
+
+// Mock data for demonstration
+const taskStats = {
+    total: 12,
+    completed: 7,
+    in_progress: 3,
+    pending: 2,
+};
+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" /> },
+];
+const recentActivity = [
+    { id: 1, action: 'Completed task "Design Review"', time: '2 hours ago' },
+    { id: 2, action: 'Commented on "Client Feedback"', time: '5 hours ago' },
+    { id: 3, action: 'Joined meeting "Sprint Planning"', time: '1 day ago' },
+];
+const watchList = [
+    { id: 1, name: 'Finalize Budget', status: 'in_progress' },
+    { id: 2, name: 'Update Roadmap', status: 'pending' },
+];
+
+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';
+}
+
+export default function MemberDashboard() {
+    const completion = taskStats.total > 0 ? Math.round((taskStats.completed / taskStats.total) * 100) : 0;
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title="Dashboard" />
+            <div className="p-6">
+                <h1 className="text-2xl font-semibold mb-6 text-gray-100">Dashboard</h1>
+                <div className="grid grid-cols-1 md:grid-cols-2 grid-rows-2 gap-6 h-[70vh]">
+                    {/* Performance Metric */}
+                    <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>
+                    {/* Alerts */}
+                    <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">Alerts</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            {alerts.length === 0 ? (
+                                <div className="text-gray-400 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-gray-200 text-sm">{alert.message}</span>
+                                        </li>
+                                    ))}
+                                </ul>
+                            )}
+                        </CardContent>
+                    </Card>
+                    {/* Recent Activity */}
+                    <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">Recent Activity</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            {recentActivity.length === 0 ? (
+                                <div className="text-gray-400 text-sm">No recent activity</div>
+                            ) : (
+                                <ul className="space-y-2">
+                                    {recentActivity.map(act => (
+                                        <li key={act.id} className="flex items-center gap-2">
+                                            <Clock className="h-4 w-4 text-blue-400" />
+                                            <span className="text-gray-200 text-sm">{act.action}</span>
+                                            <span className="text-xs text-gray-400 ml-auto">{act.time}</span>
+                                        </li>
+                                    ))}
+                                </ul>
+                            )}
+                        </CardContent>
+                    </Card>
+                    {/* Watch List */}
+                    <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">Watch List</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            {watchList.length === 0 ? (
+                                <div className="text-gray-400 text-sm">No items in watch list</div>
+                            ) : (
+                                <ul className="space-y-2">
+                                    {watchList.map(item => (
+                                        <li key={item.id} className="flex items-center gap-2">
+                                            <Eye className="h-4 w-4 text-yellow-400" />
+                                            <span className="text-gray-200 text-sm">{item.name}</span>
+                                            <span className={`ml-auto px-2 py-0.5 rounded text-xs font-medium ${getStatusBadge(item.status)}`}>{item.status.replace('_', ' ')}</span>
+                                        </li>
+                                    ))}
+                                </ul>
+                            )}
+                        </CardContent>
+                    </Card>
+                </div>
+            </div>
+        </AppLayout>
+    );
+} 
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index a6dacab..f03da2e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -7,41 +7,49 @@
 use App\Http\Controllers\Crud\ClientAdmin\MeetingController as ClientAdminMeetingController;
 use App\Http\Middleware\CheckRole;
 use App\Http\Controllers\ClientAdmin\AdminDashboardController;
+use App\Http\Controllers\Member\MemberDashboardController;
 
 Route::get('/', function () {
     return Inertia::render('welcome');
 })->name('home');
 
 Route::middleware(['auth', 'verified'])->group(function () {
-    Route::get('/dashboard', [AdminDashboardController::class, 'index'])
-        ->name('dashboard');
-
-    // Admin Task Routes
-    Route::middleware(['role:Client-Admin'])->group(function () {
-        Route::get('tasks', [ClientAdminTaskController::class, 'index'])->name('admin.tasks.index');
-        Route::post('tasks', [ClientAdminTaskController::class, 'store'])->name('admin.tasks.store');
-        Route::get('tasks/{task}', [ClientAdminTaskController::class, 'show'])->name('admin.tasks.show');
-        Route::put('tasks/{task}', [ClientAdminTaskController::class, 'update'])->name('admin.tasks.update');
-        Route::delete('tasks/{task}', [ClientAdminTaskController::class, 'destroy'])->name('admin.tasks.destroy');
-    });
+    // 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');
+
+        // 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 User Routes
-    Route::middleware(['role:Client-Admin'])->group(function () {
-        Route::get('users', [ClientAdminUserController::class, 'index'])->name('admin.users.index');
-        Route::post('users', [ClientAdminUserController::class, 'store'])->name('admin.users.store');
-        Route::get('users/{user}', [ClientAdminUserController::class, 'show'])->name('admin.users.show');
-        Route::put('users/{user}', [ClientAdminUserController::class, 'update'])->name('admin.users.update');
-        Route::delete('users/{user}', [ClientAdminUserController::class, 'destroy'])->name('admin.users.destroy');
+        // Admin Meeting Routes
+        Route::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');
     });
 
-    // Admin Meeting Routes
-    Route::middleware(['role:Client-Admin'])->group(function () {
-        Route::get('meetings', [ClientAdminMeetingController::class, 'index'])->name('admin.meetings.index');
-        Route::post('meetings', [ClientAdminMeetingController::class, 'store'])->name('admin.meetings.store');
-        Route::get('meetings/{meeting}', [ClientAdminMeetingController::class, 'show'])->name('admin.meetings.show');
-        Route::put('meetings/{meeting}', [ClientAdminMeetingController::class, 'update'])->name('admin.meetings.update');
-        Route::delete('meetings/{meeting}', [ClientAdminMeetingController::class, 'destroy'])->name('admin.meetings.destroy');
+    // Member Routes
+    Route::middleware(['role:Member'])->prefix('member')->name('member.')->group(function () {
+        Route::get('/dashboard', [MemberDashboardController::class, 'index'])->name('dashboard');
+        // Add member-specific routes here
     });
+
+    // 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';

From 3f34b6e5f48ad332ea6d1059cf75e244484fe8a3 Mon Sep 17 00:00:00 2001
From: ryanmueller24 <ryanpmueller24@gmail.com>
Date: Fri, 30 May 2025 14:46:03 -0500
Subject: [PATCH 18/21] basic timeline implemented

---
 app/Events/TimelineMessage.php                | 24 +++++++
 .../ClientAdmin/AdminDashboardController.php  | 13 +++-
 .../Crud/ClientAdmin/TaskController.php       | 13 +++-
 app/Http/Middleware/CheckRole.php             | 18 ++---
 app/Listeners/UpdateTimelineTable.php         | 36 ++++++++++
 app/Models/Task.php                           |  6 ++
 app/Models/Timeline.php                       | 30 +++++++++
 app/Models/User.php                           |  2 +
 app/Policies/RolePolicy.php                   | 35 ++++++++++
 app/Services/TimelineMessageService.php       | 67 +++++++++++++++++++
 ...25_05_30_163314_create_timelines_table.php | 41 ++++++++++++
 resources/js/components/app-sidebar.tsx       | 39 +++--------
 .../dashboard/admin-recent-activity.tsx       | 66 ++++++++++++++++++
 .../components/dashboard/recent-activity.tsx  | 48 +++++++++++++
 .../components/dashboard/task-stats-pie.tsx   |  4 +-
 .../meetings/create-meeting-dialog.tsx        |  5 +-
 .../components/tasks/create-task-dialog.tsx   |  9 ++-
 resources/js/config/navigation.ts             | 59 ++++++++++++++++
 resources/js/hooks/use-role-prefix.ts         | 14 ++++
 resources/js/pages/admin/admin-dashboard.tsx  | 15 +++--
 .../js/pages/admin/admin-meeting-details.tsx  | 10 +--
 .../js/pages/admin/admin-meeting-list.tsx     |  5 +-
 .../js/pages/admin/admin-task-details.tsx     |  8 ++-
 resources/js/pages/admin/admin-task-list.tsx  | 15 +++--
 .../js/pages/admin/admin-user-details.tsx     |  8 ++-
 resources/js/pages/admin/admin-user-list.tsx  |  4 +-
 resources/js/types/index.d.ts                 | 10 ++-
 resources/js/types/timeline.ts                | 15 +++++
 28 files changed, 548 insertions(+), 71 deletions(-)
 create mode 100644 app/Events/TimelineMessage.php
 create mode 100644 app/Listeners/UpdateTimelineTable.php
 create mode 100644 app/Models/Timeline.php
 create mode 100644 app/Policies/RolePolicy.php
 create mode 100644 app/Services/TimelineMessageService.php
 create mode 100644 database/migrations/2025_05_30_163314_create_timelines_table.php
 create mode 100644 resources/js/components/dashboard/admin-recent-activity.tsx
 create mode 100644 resources/js/components/dashboard/recent-activity.tsx
 create mode 100644 resources/js/config/navigation.ts
 create mode 100644 resources/js/hooks/use-role-prefix.ts
 create mode 100644 resources/js/types/timeline.ts

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/ClientAdmin/AdminDashboardController.php b/app/Http/Controllers/ClientAdmin/AdminDashboardController.php
index fb0221f..d659b9b 100644
--- a/app/Http/Controllers/ClientAdmin/AdminDashboardController.php
+++ b/app/Http/Controllers/ClientAdmin/AdminDashboardController.php
@@ -6,6 +6,7 @@
 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;
@@ -41,18 +42,26 @@ public function index()
                        now(), 
                        now()->addDays(7)
                    );
-        })->values()->toArray(); // Add values() and toArray()
+        })->values()->toArray();
 
         // Get all users for the timeline
         $users = User::where('client_id', $clientId)
             ->select('id', 'name', 'email')
             ->get();
 
+        // Get recent timeline activities
+        $recentActivities = Timeline::where('origin_client_id', $clientId)
+            ->with(['user:id,name'])
+            ->latest()
+            ->take(10)
+            ->get();
+
         return Inertia::render('admin/admin-dashboard', [
             'taskStats' => $taskStats,
             'upcomingTasks' => $upcomingTasks,
             'users' => $users,
-            'tasks' => $tasks
+            'tasks' => $tasks,
+            'recentActivities' => $recentActivities
         ]);
     }
 }
diff --git a/app/Http/Controllers/Crud/ClientAdmin/TaskController.php b/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
index 7c23753..aa68716 100644
--- a/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
+++ b/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
@@ -7,7 +7,7 @@
 use App\Models\User;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
-
+use App\Services\TimelineMessageService;
 class TaskController extends Controller
 {
     public function index()
@@ -61,6 +61,9 @@ public function store(Request $request)
             $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();
     }   
@@ -96,7 +99,7 @@ public function update(Request $request, Task $task)
             abort(403, 'Unauthorized');
         }
 
-        $request->validate([
+        $validatedData = $request->validate([
             'name' => 'required|string|max:255',
             'description' => 'required|string|max:255',
             'status' => 'required|in:pending,in_progress,completed',
@@ -106,12 +109,18 @@ public function update(Request $request, Task $task)
             '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();
     }
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/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/Task.php b/app/Models/Task.php
index 27ed398..ed18f3f 100644
--- a/app/Models/Task.php
+++ b/app/Models/Task.php
@@ -6,6 +6,7 @@
 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
 {
@@ -34,4 +35,9 @@ public function meetings(): BelongsToMany
     {
         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 f556cf9..23807ad 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -15,6 +15,8 @@ class User extends Authenticatable
     /** @use HasFactory<\Database\Factories\UserFactory> */
     use HasFactory, Notifiable, SoftDeletes;
 
+    protected $with = ['role'];
+
     /**
      * The attributes that are mass assignable.
      *
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/Services/TimelineMessageService.php b/app/Services/TimelineMessageService.php
new file mode 100644
index 0000000..a609c27
--- /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->name;
+        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->name;
+        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/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/resources/js/components/app-sidebar.tsx b/resources/js/components/app-sidebar.tsx
index 298b41a..380a33a 100644
--- a/resources/js/components/app-sidebar.tsx
+++ b/resources/js/components/app-sidebar.tsx
@@ -1,43 +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, Calendar } 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,
-    },
-
-    {
-        title: 'Meetings',
-        href: '/meetings',
-        icon: Calendar,
-    },
-];
+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>
@@ -46,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..6c43295
--- /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.name}
+                                </span>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+} 
\ 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..e9502a2
--- /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.name}
+                                </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
index f98171e..3d77f86 100644
--- a/resources/js/components/dashboard/task-stats-pie.tsx
+++ b/resources/js/components/dashboard/task-stats-pie.tsx
@@ -1,5 +1,6 @@
 import { ResponsivePie } from '@nivo/pie';
 import { router } from '@inertiajs/react';
+import { useRolePrefix } from '@/hooks/use-role-prefix';
 
 interface TaskStats {
   completed: number;
@@ -8,6 +9,7 @@ interface TaskStats {
 }
 
 export function TaskStatusPieChart({ taskStats }: { taskStats: TaskStats }) {
+  const { getRoute } = useRolePrefix();
   const pieData = [
     {
       id: 'Completed',
@@ -36,7 +38,7 @@ export function TaskStatusPieChart({ taskStats }: { taskStats: TaskStats }) {
       else if (data.id === 'In Progress') status = 'in_progress';
       else if (data.id === 'Pending') status = 'pending';
       if (status) {
-        router.visit(`/tasks?status=${status}`);
+        router.visit(getRoute(`/tasks?status=${status}`));
       }
     }
   };
diff --git a/resources/js/components/meetings/create-meeting-dialog.tsx b/resources/js/components/meetings/create-meeting-dialog.tsx
index 32eb988..cd30996 100644
--- a/resources/js/components/meetings/create-meeting-dialog.tsx
+++ b/resources/js/components/meetings/create-meeting-dialog.tsx
@@ -6,7 +6,7 @@ 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
@@ -15,6 +15,7 @@ interface CreateMeetingDialogProps {
 }
 
 export function CreateMeetingDialog({ open, onOpenChange, users, tasks }: CreateMeetingDialogProps) {
+    const { getRoute } = useRolePrefix();
     const { data, setData, post, processing, errors, reset } = useForm({
         title: '',
         date: '',
@@ -26,7 +27,7 @@ export function CreateMeetingDialog({ open, onOpenChange, users, tasks }: Create
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault()
-        post('/meetings', {
+        post(getRoute('/meetings'), {
             onSuccess: () => {
                 reset()
                 onOpenChange(false)
diff --git a/resources/js/components/tasks/create-task-dialog.tsx b/resources/js/components/tasks/create-task-dialog.tsx
index 4d5352b..1a41ecb 100644
--- a/resources/js/components/tasks/create-task-dialog.tsx
+++ b/resources/js/components/tasks/create-task-dialog.tsx
@@ -11,9 +11,10 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Textarea } from "@/components/ui/textarea"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { useForm } from "@inertiajs/react"
+import { 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[];
@@ -33,9 +34,13 @@ export function CreateTaskDialog({ users, open, onOpenChange, meetingId }: Creat
         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('/tasks', {
+        post(`${prefix}/tasks`, {
             onSuccess: () => {
                 reset();
                 onOpenChange(false);
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/pages/admin/admin-dashboard.tsx b/resources/js/pages/admin/admin-dashboard.tsx
index 08a4634..a8d2ba4 100644
--- a/resources/js/pages/admin/admin-dashboard.tsx
+++ b/resources/js/pages/admin/admin-dashboard.tsx
@@ -5,10 +5,12 @@ 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[] = [
     {
@@ -27,17 +29,17 @@ interface DashboardProps {
     upcomingTasks: Task[];
     users: User[];
     tasks: Task[];
+    recentActivities: Timeline[];
 }
 
-export default function Dashboard({ taskStats, upcomingTasks, users, tasks }: DashboardProps) {
+export default function Dashboard({ taskStats, upcomingTasks, users, tasks, recentActivities }: DashboardProps) {
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
             <Head title="Dashboard" />
-            <div className="flex h-full flex-1 flex-col gap-4 p-4">
-                <h1 className="text-2xl font-semibold mb-4">Dashboard</h1>
+            <div className="flex h-[calc(100vh)] flex-1 flex-col gap-2 pt-2 px-4 pb-4">
+                <h1 className="text-2xl font-semibold">Dashboard</h1>
                 <div
-                    className="grid grid-cols-1 md:grid-cols-3 grid-rows-2 gap-4 h-full"
-                    style={{ minHeight: '70vh' }}
+                    className="grid grid-cols-1 md:grid-cols-3 grid-rows-2 gap-4 h-[calc(100%)]"
                 >
                     {/* Recent Activity (left, spans 2 rows) */}
                     <Card className="row-span-2 md:col-span-1">
@@ -45,9 +47,10 @@ export default function Dashboard({ taskStats, upcomingTasks, users, tasks }: Da
                             <CardTitle>Recent Activity</CardTitle>
                         </CardHeader>
                         <CardContent>
-                            {/* Add your recent activity component or content here */}
+                            <RecentActivity activities={recentActivities} />
                         </CardContent>
                     </Card>
+
                     <Card>
                         <CardHeader>
                             <CardTitle>Task Completion</CardTitle>
diff --git a/resources/js/pages/admin/admin-meeting-details.tsx b/resources/js/pages/admin/admin-meeting-details.tsx
index c2fcb77..bd409bb 100644
--- a/resources/js/pages/admin/admin-meeting-details.tsx
+++ b/resources/js/pages/admin/admin-meeting-details.tsx
@@ -20,6 +20,7 @@ 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[] = [
     {
@@ -47,6 +48,7 @@ const typeColors: Record<MeetingType, string> = {
 };
 
 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({
@@ -71,7 +73,7 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
-        put(`/meetings/${meeting.id}`, {
+        put(getRoute(`/meetings/${meeting.id}`), {
             onSuccess: () => {
                 setIsEditing(false);
             }
@@ -84,7 +86,7 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
 
     const handleDelete = () => {
         if (confirm("Are you sure you want to delete this meeting?")) {
-            router.delete(`/meetings/${meeting.id}`);
+            router.delete(getRoute(`/meetings/${meeting.id}`));
         }
     };
 
@@ -117,7 +119,7 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                 </Button>
                                 
                                 <DeleteConfirmation
-                                    onConfirm={() => router.delete(`/meetings/${meeting.id}`)}
+                                    onConfirm={() => router.delete(getRoute(`/meetings/${meeting.id}`))}
                                     itemType="meeting"
                                     itemName={meeting.title}
                                 >
@@ -415,7 +417,7 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                     </Card>
                 </div>
                 <div className="mt-6">
-                    <Button variant="outline" onClick={() => router.visit('/meetings')} className="cursor-pointer">
+                    <Button variant="outline" onClick={() => router.visit(getRoute('/meetings'))} className="cursor-pointer">
                         ← Back to Meetings List
                     </Button>
                 </div>
diff --git a/resources/js/pages/admin/admin-meeting-list.tsx b/resources/js/pages/admin/admin-meeting-list.tsx
index 15e0d3a..8c8a547 100644
--- a/resources/js/pages/admin/admin-meeting-list.tsx
+++ b/resources/js/pages/admin/admin-meeting-list.tsx
@@ -14,7 +14,7 @@ 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',
@@ -168,6 +168,7 @@ const columns: ColumnDef<Meeting>[] = [
 
 export default function Meetings({ meetings, users, tasks }: PageProps) {
     const [isMeetingDialogOpen, setIsMeetingDialogOpen] = useState(false);
+    const { getRoute } = useRolePrefix();
 
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
@@ -187,7 +188,7 @@ export default function Meetings({ meetings, users, tasks }: PageProps) {
                             data={meetings}
                             searchPlaceholder="Search meetings..."
                             searchColumn="title"
-                            onRowClick={(meeting) => router.visit(`/meetings/${meeting.id}`)}
+                            onRowClick={(meeting) => router.visit(getRoute(`/meetings/${meeting.id}`))} 
                             addButton={
                                 <Button onClick={() => setIsMeetingDialogOpen(true)} className="cursor-pointer">
                                     <Plus className="mr-2 h-4 w-4" />
diff --git a/resources/js/pages/admin/admin-task-details.tsx b/resources/js/pages/admin/admin-task-details.tsx
index 1f178bc..ef2adc2 100644
--- a/resources/js/pages/admin/admin-task-details.tsx
+++ b/resources/js/pages/admin/admin-task-details.tsx
@@ -17,6 +17,7 @@ import { Check, ChevronsUpDown, Trash2, Calendar, Users, AlertCircle } from "luc
 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;
@@ -37,6 +38,7 @@ const priorityColors = {
 };
 
 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,
@@ -73,7 +75,7 @@ export default function TaskDetails({ task, all_users }: PageProps) {
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
-        put(`/tasks/${task.id}`, {
+        put(getRoute(`/tasks/${task.id}`), {
             onSuccess: () => {
                 setIsEditing(false);
             },
@@ -295,11 +297,11 @@ export default function TaskDetails({ task, all_users }: PageProps) {
 
                 <div className="mt-6">
                     {fromMeetingId ? (
-                        <Button variant="outline" onClick={() => router.visit(`/meetings/${fromMeetingId}`)} className="cursor-pointer">
+                        <Button variant="outline" onClick={() => router.visit(getRoute(`/meetings/${fromMeetingId}`))} className="cursor-pointer">
                             ← Back to Meeting
                         </Button>
                     ) : (
-                        <Button variant="outline" onClick={() => router.visit('/tasks')} className="cursor-pointer">
+                        <Button variant="outline" onClick={() => router.visit(getRoute('/tasks'))} className="cursor-pointer">
                             ← Back to Tasks List
                         </Button>
                     )}
diff --git a/resources/js/pages/admin/admin-task-list.tsx b/resources/js/pages/admin/admin-task-list.tsx
index a2cb728..fcd094b 100644
--- a/resources/js/pages/admin/admin-task-list.tsx
+++ b/resources/js/pages/admin/admin-task-list.tsx
@@ -1,6 +1,6 @@
 import { Head, usePage, router } from '@inertiajs/react';
 import AppLayout from '@/layouts/app-layout';
-import { type BreadcrumbItem } from '@/types';
+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';
@@ -9,7 +9,7 @@ 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 { Task, TaskStatus, User as TaskUser } from '@/types/task';
+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 {
@@ -28,6 +28,7 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select";
+import { useRolePrefix } from '@/hooks/use-role-prefix';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -36,7 +37,7 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-interface PageProps {
+interface AdminTaskListProps extends PageProps {
     tasks: Task[];
     users: TaskUser[];
 }
@@ -147,7 +148,11 @@ const columns: ColumnDef<Task>[] = [
     },
 ];
 
-export default function Tasks({ tasks, users }: PageProps) {
+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);
@@ -250,7 +255,7 @@ export default function Tasks({ tasks, users }: PageProps) {
                             data={filteredTasks}
                             searchPlaceholder="Search tasks..."
                             searchColumn="name"
-                            onRowClick={(task) => router.visit(`/tasks/${task.id}`)}
+                            onRowClick={(task: Task) => router.visit(getRoute(`/tasks/${task.id}`))}
                             addButton={
                                 <div className="flex items-center gap-2">
                                     <DropdownMenu>
diff --git a/resources/js/pages/admin/admin-user-details.tsx b/resources/js/pages/admin/admin-user-details.tsx
index b32c77f..7dcbc24 100644
--- a/resources/js/pages/admin/admin-user-details.tsx
+++ b/resources/js/pages/admin/admin-user-details.tsx
@@ -9,6 +9,7 @@ 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;
@@ -23,6 +24,7 @@ interface PageProps {
 
 export default function UserDetails({ user }: PageProps) {
     const [isEditing, setIsEditing] = useState(false);
+    const { getRoute } = useRolePrefix();
     const { data, setData, put, processing, errors, reset } = useForm({
         name: user.name,
         email: user.email,
@@ -54,7 +56,7 @@ export default function UserDetails({ user }: PageProps) {
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
-        put(`/users/${user.id}`, {
+        put(getRoute(`/users/${user.id}`), {
             onSuccess: () => {
                 setIsEditing(false);
             }
@@ -141,11 +143,11 @@ export default function UserDetails({ user }: PageProps) {
                             </div>
                             <div className="mt-6">
                                 {fromMeetingId ? (
-                                    <Button variant="outline" onClick={() => router.visit(`/meetings/${fromMeetingId}`)} className="cursor-pointer">
+                                    <Button variant="outline" onClick={() => router.visit(getRoute(`/meetings/${fromMeetingId}`))} className="cursor-pointer">
                                         ← Back to Meeting
                                     </Button>
                                 ) : (
-                                    <Button variant="outline" onClick={() => router.visit('/users')} className="cursor-pointer">
+                                    <Button variant="outline" onClick={() => router.visit(getRoute('/users'))} className="cursor-pointer">
                                         ← Back to Users List
                                     </Button>
                                 )}
diff --git a/resources/js/pages/admin/admin-user-list.tsx b/resources/js/pages/admin/admin-user-list.tsx
index 7095dd8..da36667 100644
--- a/resources/js/pages/admin/admin-user-list.tsx
+++ b/resources/js/pages/admin/admin-user-list.tsx
@@ -11,6 +11,7 @@ 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[] = [
     {
@@ -113,6 +114,7 @@ const columns: ColumnDef<User>[] = [
 
 export default function Users({ users }: PageProps<{ users: User[] }>) {
     const [isUserDialogOpen, setIsUserDialogOpen] = useState(false);
+    const { getRoute } = useRolePrefix();
 
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
@@ -132,7 +134,7 @@ export default function Users({ users }: PageProps<{ users: User[] }>) {
                             data={users}
                             searchPlaceholder="Search users..."
                             searchColumn="name"
-                            onRowClick={(user) => router.visit(`/users/${user.id}`)}
+                            onRowClick={(user) => router.visit(getRoute(`/users/${user.id}`))}
                             addButton={
                                 <Button onClick={() => setIsUserDialogOpen(true)} className="cursor-pointer">
                                     <Plus className="mr-2 h-4 w-4" />
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index 790ec89..b4de334 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,6 +32,12 @@ export interface SharedData {
     [key: string]: unknown;
 }
 
+export type UserRole = 'Client-Admin' | 'Member';
+
+export interface Role {
+    name: UserRole;
+}
+
 export interface User {
     id: number;
     name: string;
@@ -39,7 +46,8 @@ export interface User {
     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/timeline.ts b/resources/js/types/timeline.ts
new file mode 100644
index 0000000..3658bb8
--- /dev/null
+++ b/resources/js/types/timeline.ts
@@ -0,0 +1,15 @@
+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;
+        name: string;
+    };
+} 
\ No newline at end of file

From ad0d93e59920adf8b452b14a5ebec2087be3a021 Mon Sep 17 00:00:00 2001
From: ryanmueller24 <ryanpmueller24@gmail.com>
Date: Fri, 13 Jun 2025 14:47:37 -0500
Subject: [PATCH 19/21] Member Dashboard and Member Tasks

---
 .../Crud/Member/MemberMeetingController.php   |  39 ++
 .../Crud/Member/MemberTaskController.php      | 125 +++++
 .../Member/MemberDashboardController.php      |  27 +-
 .../dashboard/member-performance-metrics.tsx  |  58 +++
 .../dashboard/member-recent-activity.tsx      |  64 +++
 .../dashboard/member-watch-list.tsx           |  84 ++++
 .../dashboard/performance-metrics.tsx         |  50 ++
 .../dashboard/user-workload-chart.tsx         |   4 +-
 .../components/tasks/create-task-dialog.tsx   |   1 +
 .../js/components/tasks/member-task-stats.tsx |  12 +
 resources/js/pages/admin/admin-dashboard.tsx  | 107 ++---
 .../js/pages/member/member-dashboard.tsx      | 214 ++++-----
 .../pages/member/member-meeting-details.tsx   | 166 +++++++
 .../js/pages/member/member-meeting-list.tsx   | 350 ++++++++++++++
 .../js/pages/member/member-task-details.tsx   | 262 +++++++++++
 .../js/pages/member/member-task-list.tsx      | 435 ++++++++++++++++++
 resources/js/types/meeting.ts                 |  24 +-
 resources/js/types/user.ts                    |  10 +
 routes/web.php                                |  13 +-
 19 files changed, 1850 insertions(+), 195 deletions(-)
 create mode 100644 app/Http/Controllers/Crud/Member/MemberMeetingController.php
 create mode 100644 app/Http/Controllers/Crud/Member/MemberTaskController.php
 create mode 100644 resources/js/components/dashboard/member-performance-metrics.tsx
 create mode 100644 resources/js/components/dashboard/member-recent-activity.tsx
 create mode 100644 resources/js/components/dashboard/member-watch-list.tsx
 create mode 100644 resources/js/components/dashboard/performance-metrics.tsx
 create mode 100644 resources/js/components/tasks/member-task-stats.tsx
 create mode 100644 resources/js/pages/member/member-meeting-details.tsx
 create mode 100644 resources/js/pages/member/member-meeting-list.tsx
 create mode 100644 resources/js/pages/member/member-task-details.tsx
 create mode 100644 resources/js/pages/member/member-task-list.tsx
 create mode 100644 resources/js/types/user.ts

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..7768cf9
--- /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.name', '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', 'name', '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.name', '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
index 4420049..098c930 100644
--- a/app/Http/Controllers/Member/MemberDashboardController.php
+++ b/app/Http/Controllers/Member/MemberDashboardController.php
@@ -9,18 +9,19 @@
 use App\Models\Meeting;
 use Carbon\Carbon;
 use Inertia\Inertia;
+use App\Models\Timeline;
 
 class MemberDashboardController extends Controller
 {
     public function index()
     {
-        $user = auth()->user();
-        $clientId = $user->client->id;
+        $userId = auth()->id();
+        $clientId = auth()->user()->client->id;
 
-        // Get tasks assigned to this member
+        // Get tasks assigned to the user
         $tasks = Task::where('client_id', $clientId)
-            ->whereHas('users', function ($query) use ($user) {
-                $query->where('users.id', $user->id);
+            ->whereHas('users', function ($query) use ($userId) {
+                $query->where('users.id', $userId);
             })
             ->with(['users' => function ($query) use ($clientId) {
                 $query->where('users.client_id', $clientId)
@@ -28,7 +29,7 @@ public function index()
             }])
             ->get();
 
-        // Get task statistics for this member
+        // Get task completion statistics
         $taskStats = [
             'total' => $tasks->count(),
             'completed' => $tasks->where('status', 'completed')->count(),
@@ -47,8 +48,8 @@ public function index()
 
         // Get meetings this member is invited to
         $meetings = Meeting::where('client_id', $clientId)
-            ->whereHas('users', function ($query) use ($user) {
-                $query->where('users.id', $user->id);
+            ->whereHas('users', function ($query) use ($userId) {
+                $query->where('users.id', $userId);
             })
             ->with(['users' => function ($query) use ($clientId) {
                 $query->where('users.client_id', $clientId)
@@ -56,11 +57,19 @@ public function index()
             }])
             ->get();
 
+        // Get user's recent timeline activities
+        $recentActivities = Timeline::where('user_id', $userId)
+            ->with(['user:id,name'])
+            ->latest()
+            ->take(10)
+            ->get();
+
         return Inertia::render('member/member-dashboard', [
             'taskStats' => $taskStats,
             'upcomingTasks' => $upcomingTasks,
             'meetings' => $meetings,
-            'tasks' => $tasks
+            'tasks' => $tasks,
+            'recentActivities' => $recentActivities,
         ]);
     }
 } 
\ 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..1627201
--- /dev/null
+++ b/resources/js/components/dashboard/member-performance-metrics.tsx
@@ -0,0 +1,58 @@
+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 (
+        <Card className="h-fit">
+            <CardHeader className="py-2 px-3">
+                <div className="flex items-center justify-between">
+                    <CardTitle className="text-sm">Task Overview</CardTitle>
+                    <BarChart3 className="h-3.5 w-3.5 text-primary" />
+                </div>
+            </CardHeader>
+            <CardContent className="pt-0 px-3 pb-2">
+                <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>
+            </CardContent>
+        </Card>
+    );
+} 
\ 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..c795550
--- /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?.name}
+                            </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..2ff6594
--- /dev/null
+++ b/resources/js/components/dashboard/member-watch-list.tsx
@@ -0,0 +1,84 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Eye, Calendar, Clock } from 'lucide-react';
+import { format } 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';
+}
+
+export function MemberWatchList({ tasks }: MemberWatchListProps) {
+    if (tasks.length === 0) {
+        return (
+            <Card>
+                <CardHeader>
+                    <CardTitle>Upcoming Tasks</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <div className="text-muted-foreground text-sm">No upcoming tasks</div>
+                </CardContent>
+            </Card>
+        );
+    }
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Watch List</CardTitle>
+            </CardHeader>
+            <CardContent>
+                <ul className="space-y-3">
+                    {tasks.map(task => (
+                        <li key={task.id} className="flex flex-col gap-1">
+                            <div className="flex items-center gap-2">
+                                <Eye className="h-4 w-4 text-primary" />
+                                <span className="text-sm font-medium">{task.name}</span>
+                                <span className={`ml-auto px-2 py-0.5 rounded text-xs font-medium ${getStatusBadge(task.status)}`}>
+                                    {task.status.replace('_', ' ')}
+                                </span>
+                            </div>
+                            <div className="flex items-center gap-3 text-xs text-muted-foreground pl-6">
+                                <div className="flex items-center gap-1">
+                                    <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">
+                                    <Clock className="h-3 w-3" />
+                                    <span>{format(new Date(task.due_date), 'h:mm a')}</span>
+                                </div>
+                                <span className={`px-2 py-0.5 rounded text-xs font-medium ${getPriorityBadge(task.priority)}`}>
+                                    {task.priority}
+                                </span>
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+            </CardContent>
+        </Card>
+    );
+} 
\ 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/user-workload-chart.tsx b/resources/js/components/dashboard/user-workload-chart.tsx
index 3cdf652..3bf65c4 100644
--- a/resources/js/components/dashboard/user-workload-chart.tsx
+++ b/resources/js/components/dashboard/user-workload-chart.tsx
@@ -28,8 +28,8 @@ export function UserWorkloadChart({ tasks, users }: UserWorkloadChartProps) {
     const visibleData = sortedData.slice(startIndex, startIndex + usersPerPage);
 
     return (
-        <div className="h-[300px] w-full">
-            <ResponsiveContainer width="100%" height="95%">
+        <div className="h-[250px] w-full">
+            <ResponsiveContainer width="100%" height="85%">
                 <BarChart
                     data={visibleData}
                     margin={{
diff --git a/resources/js/components/tasks/create-task-dialog.tsx b/resources/js/components/tasks/create-task-dialog.tsx
index 1a41ecb..083a255 100644
--- a/resources/js/components/tasks/create-task-dialog.tsx
+++ b/resources/js/components/tasks/create-task-dialog.tsx
@@ -44,6 +44,7 @@ export function CreateTaskDialog({ users, open, onOpenChange, meetingId }: Creat
             onSuccess: () => {
                 reset();
                 onOpenChange(false);
+                window.location.reload();
             }
         });
     };
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/pages/admin/admin-dashboard.tsx b/resources/js/pages/admin/admin-dashboard.tsx
index a8d2ba4..a33eee7 100644
--- a/resources/js/pages/admin/admin-dashboard.tsx
+++ b/resources/js/pages/admin/admin-dashboard.tsx
@@ -36,63 +36,66 @@ export default function Dashboard({ taskStats, upcomingTasks, users, tasks, rece
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
             <Head title="Dashboard" />
-            <div className="flex h-[calc(100vh)] flex-1 flex-col gap-2 pt-2 px-4 pb-4">
-                <h1 className="text-2xl font-semibold">Dashboard</h1>
+            <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-3 grid-rows-2 gap-4 h-[calc(100%)]"
+                    className="grid grid-cols-1 md:grid-cols-6 gap-4 h-[calc(100%-3rem)]"
                 >
-                    {/* Recent Activity (left, spans 2 rows) */}
-                    <Card className="row-span-2 md:col-span-1">
-                        <CardHeader>
-                            <CardTitle>Recent Activity</CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                            <RecentActivity activities={recentActivities} />
-                        </CardContent>
-                    </Card>
+                    {/* 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>
-                        <CardHeader>
-                            <CardTitle>Task Completion</CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                            <TaskStatusPieChart taskStats={taskStats} />
-                        </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>
 
-                    <Card>
-                        <CardHeader>
-                            <CardTitle>Team Workload</CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                            <UserWorkloadChart tasks={tasks} users={users} />
-                        </CardContent>
-                    </Card>
+                    {/* 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>
 
-                    {/* Watch List (bottom right) */}
-                    <Card className="md:col-span-2">
-                        <CardHeader>
-                            <CardTitle>Watch List</CardTitle>
-                        </CardHeader>
-                        <CardContent className="h-64 overflow-y-auto">
-                            {/* Example: Upcoming Tasks */}
-                            <div className="space-y-4">
-                                {upcomingTasks.map((task) => (
-                                    <div key={task.id} className="flex items-center justify-between p-4 border rounded-lg">
-                                        <div>
-                                            <h3 className="font-medium">{task.name}</h3>
-                                            <p className="text-sm 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>
+                        <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>
diff --git a/resources/js/pages/member/member-dashboard.tsx b/resources/js/pages/member/member-dashboard.tsx
index 3fc47c5..369ee51 100644
--- a/resources/js/pages/member/member-dashboard.tsx
+++ b/resources/js/pages/member/member-dashboard.tsx
@@ -2,8 +2,11 @@ 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 { Progress } from '@/components/ui/progress';
-import { AlertCircle, CheckCircle2, Clock, Eye } from 'lucide-react';
+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[] = [
     {
@@ -12,137 +15,106 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-// Mock data for demonstration
-const taskStats = {
-    total: 12,
-    completed: 7,
-    in_progress: 3,
-    pending: 2,
-};
 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" /> },
 ];
-const recentActivity = [
-    { id: 1, action: 'Completed task "Design Review"', time: '2 hours ago' },
-    { id: 2, action: 'Commented on "Client Feedback"', time: '5 hours ago' },
-    { id: 3, action: 'Joined meeting "Sprint Planning"', time: '1 day ago' },
-];
-const watchList = [
-    { id: 1, name: 'Finalize Budget', status: 'in_progress' },
-    { id: 2, name: 'Update Roadmap', status: 'pending' },
+
+interface Task {
+    id: number;
+    name: string;
+    status: 'pending' | 'in_progress' | 'completed';
+    due_date: string;
+    priority: 'low' | 'medium' | 'high';
+}
+
+const upcomingTasks: Task[] = [
+    {
+        id: 1,
+        name: 'Finalize Budget',
+        status: 'in_progress',
+        due_date: '2024-03-20T14:00:00',
+        priority: 'high'
+    },
+    {
+        id: 2,
+        name: 'Update Roadmap',
+        status: 'pending',
+        due_date: '2024-03-22T10:00:00',
+        priority: 'medium'
+    },
+    {
+        id: 3,
+        name: 'Client Presentation',
+        status: 'pending',
+        due_date: '2024-03-25T15:30:00',
+        priority: 'high'
+    }
 ];
 
-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',
+interface DashboardProps {
+    taskStats: {
+        total: number;
+        completed: number;
+        in_progress: number;
+        pending: number;
     };
-    return map[status] || 'bg-gray-100 text-gray-800';
+    recentActivities: Timeline[];
 }
 
-export default function MemberDashboard() {
-    const completion = taskStats.total > 0 ? Math.round((taskStats.completed / taskStats.total) * 100) : 0;
+export default function MemberDashboard({ taskStats, recentActivities }: DashboardProps) {
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
             <Head title="Dashboard" />
-            <div className="p-6">
-                <h1 className="text-2xl font-semibold mb-6 text-gray-100">Dashboard</h1>
-                <div className="grid grid-cols-1 md:grid-cols-2 grid-rows-2 gap-6 h-[70vh]">
-                    {/* Performance Metric */}
-                    <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>
-                    {/* Alerts */}
-                    <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">Alerts</CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                            {alerts.length === 0 ? (
-                                <div className="text-gray-400 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-gray-200 text-sm">{alert.message}</span>
-                                        </li>
-                                    ))}
-                                </ul>
-                            )}
-                        </CardContent>
-                    </Card>
-                    {/* Recent Activity */}
-                    <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">Recent Activity</CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                            {recentActivity.length === 0 ? (
-                                <div className="text-gray-400 text-sm">No recent activity</div>
-                            ) : (
-                                <ul className="space-y-2">
-                                    {recentActivity.map(act => (
-                                        <li key={act.id} className="flex items-center gap-2">
-                                            <Clock className="h-4 w-4 text-blue-400" />
-                                            <span className="text-gray-200 text-sm">{act.action}</span>
-                                            <span className="text-xs text-gray-400 ml-auto">{act.time}</span>
-                                        </li>
-                                    ))}
-                                </ul>
-                            )}
-                        </CardContent>
-                    </Card>
-                    {/* Watch List */}
-                    <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">Watch List</CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                            {watchList.length === 0 ? (
-                                <div className="text-gray-400 text-sm">No items in watch list</div>
-                            ) : (
-                                <ul className="space-y-2">
-                                    {watchList.map(item => (
-                                        <li key={item.id} className="flex items-center gap-2">
-                                            <Eye className="h-4 w-4 text-yellow-400" />
-                                            <span className="text-gray-200 text-sm">{item.name}</span>
-                                            <span className={`ml-auto px-2 py-0.5 rounded text-xs font-medium ${getStatusBadge(item.status)}`}>{item.status.replace('_', ' ')}</span>
-                                        </li>
-                                    ))}
-                                </ul>
-                            )}
-                        </CardContent>
-                    </Card>
+            <div className="flex h-[calc(100vh-4rem)] flex-1 flex-col gap-2 pt-2 px-4 pb-4 overflow-y-auto">
+                <h1 className="text-2xl font-semibold">Dashboard</h1>
+                <div className="grid grid-cols-1 md:grid-cols-[1.5fr_1.5fr] gap-4">
+                    {/* Left Column */}
+                    <div className="flex flex-col gap-4">
+                        {/* Recent Activity */}
+                        <Card>
+                            <CardHeader>
+                                <CardTitle>Recent Activity</CardTitle>
+                            </CardHeader>
+                            <CardContent className="h-[300px] overflow-y-auto">
+                                <MemberRecentActivity activities={recentActivities} />
+                            </CardContent>
+                        </Card>
+
+                        {/* Watch List */}
+                        <MemberWatchList tasks={upcomingTasks} />
+                    </div>
+
+                    {/* Right Column */}
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-min">
+                        {/* Performance Metric */}
+                        <div className="md:col-span-2">
+                            <PerformanceMetrics taskStats={taskStats} />
+                        </div>
+                        
+                        {/* Alerts */}
+                        <div className="md:col-span-2">
+                            <Card>
+                                <CardHeader>
+                                    <CardTitle>Alerts</CardTitle>
+                                </CardHeader>
+                                <CardContent>
+                                    {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>
             </div>
         </AppLayout>
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..148448a
--- /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.name}
+                                                    </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..622ec5c
--- /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.name}
+                        </Badge>
+                    ))}
+                </div>
+            )
+        },
+    },
+    {
+        accessorKey: "tasks",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Related Tasks
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const tasks = row.original.tasks || []
+            return (
+                <div className="flex flex-wrap gap-1">
+                    {tasks.map((task) => (
+                        <Badge key={task.id} variant="outline">
+                            {task.name}
+                        </Badge>
+                    ))}
+                </div>
+            )
+        },
+    },
+];
+
+export default function 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..9c82117
--- /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.name}
+                                                        </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..f3055bb
--- /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.name}
+                        </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/types/meeting.ts b/resources/js/types/meeting.ts
index c2fa952..b4f4ecb 100644
--- a/resources/js/types/meeting.ts
+++ b/resources/js/types/meeting.ts
@@ -1,16 +1,20 @@
-import { Task, User } from "./task";
+import { type User } from './user';
+
+export type MeetingStatus = 'scheduled' | 'in_progress' | 'completed' | 'cancelled';
 
 export interface Meeting {
     id: number;
-    title: string;
-    date: string;
-    type: string;
-    agenda_id: number;
-    agenda_text: string;
+    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[];
-    tasks: Task[];
-    created_at?: string;
-    updated_at?: string;
-    deleted_at?: string | null;
+    created_by_user: User;
 }
\ 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..a906052
--- /dev/null
+++ b/resources/js/types/user.ts
@@ -0,0 +1,10 @@
+export interface User {
+    id: number;
+    name: string;
+    email: string;
+    role?: {
+        id: number;
+        name: string;
+    };
+    client_id?: number;
+} 
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index f03da2e..6698c38 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -7,6 +7,8 @@
 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 () {
@@ -43,7 +45,16 @@
     // Member Routes
     Route::middleware(['role:Member'])->prefix('member')->name('member.')->group(function () {
         Route::get('/dashboard', [MemberDashboardController::class, 'index'])->name('dashboard');
-        // Add member-specific routes here
+        
+        // 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

From 1605dbcfc9bd8739bce5ee2b25f4324f402fdc06 Mon Sep 17 00:00:00 2001
From: ryanmueller24 <ryanpmueller24@gmail.com>
Date: Fri, 13 Jun 2025 15:42:32 -0500
Subject: [PATCH 20/21] Dashboard layout cahnges

---
 .../dashboard/member-performance-metrics.tsx  |  66 +++++------
 .../dashboard/member-watch-list.tsx           |  91 +++++++--------
 .../js/pages/member/member-dashboard.tsx      | 104 ++++++++----------
 3 files changed, 121 insertions(+), 140 deletions(-)

diff --git a/resources/js/components/dashboard/member-performance-metrics.tsx b/resources/js/components/dashboard/member-performance-metrics.tsx
index 1627201..02b2af8 100644
--- a/resources/js/components/dashboard/member-performance-metrics.tsx
+++ b/resources/js/components/dashboard/member-performance-metrics.tsx
@@ -14,45 +14,35 @@ interface PerformanceMetricsProps {
 
 export function PerformanceMetrics({ taskStats }: PerformanceMetricsProps) {
     return (
-        <Card className="h-fit">
-            <CardHeader className="py-2 px-3">
-                <div className="flex items-center justify-between">
-                    <CardTitle className="text-sm">Task Overview</CardTitle>
-                    <BarChart3 className="h-3.5 w-3.5 text-primary" />
+        <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>
-            </CardHeader>
-            <CardContent className="pt-0 px-3 pb-2">
-                <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>
+            <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>
-            </CardContent>
-        </Card>
+            </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-watch-list.tsx b/resources/js/components/dashboard/member-watch-list.tsx
index 2ff6594..5875d8b 100644
--- a/resources/js/components/dashboard/member-watch-list.tsx
+++ b/resources/js/components/dashboard/member-watch-list.tsx
@@ -1,6 +1,5 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Eye, Calendar, Clock } from 'lucide-react';
-import { format } from 'date-fns';
+import { Eye, Calendar, Clock, AlertCircle } from 'lucide-react';
+import { format, isPast, addHours, isBefore } from 'date-fns';
 
 interface Task {
     id: number;
@@ -32,53 +31,59 @@ function getPriorityBadge(priority: string) {
     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) {
-    if (tasks.length === 0) {
+    // 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 (
-            <Card>
-                <CardHeader>
-                    <CardTitle>Upcoming Tasks</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <div className="text-muted-foreground text-sm">No upcoming tasks</div>
-                </CardContent>
-            </Card>
+            <div className="text-muted-foreground text-sm">No upcoming tasks</div>
         );
     }
 
     return (
-        <Card>
-            <CardHeader>
-                <CardTitle>Watch List</CardTitle>
-            </CardHeader>
-            <CardContent>
-                <ul className="space-y-3">
-                    {tasks.map(task => (
-                        <li key={task.id} className="flex flex-col gap-1">
-                            <div className="flex items-center gap-2">
-                                <Eye className="h-4 w-4 text-primary" />
-                                <span className="text-sm font-medium">{task.name}</span>
-                                <span className={`ml-auto px-2 py-0.5 rounded text-xs font-medium ${getStatusBadge(task.status)}`}>
-                                    {task.status.replace('_', ' ')}
-                                </span>
+        <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-3 text-xs text-muted-foreground pl-6">
-                                <div className="flex items-center gap-1">
-                                    <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">
-                                    <Clock className="h-3 w-3" />
-                                    <span>{format(new Date(task.due_date), 'h:mm a')}</span>
-                                </div>
-                                <span className={`px-2 py-0.5 rounded text-xs font-medium ${getPriorityBadge(task.priority)}`}>
-                                    {task.priority}
-                                </span>
+                            <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>
-                        </li>
-                    ))}
-                </ul>
-            </CardContent>
-        </Card>
+                        </div>
+                    </li>
+                );
+            })}
+        </ul>
     );
 } 
\ No newline at end of file
diff --git a/resources/js/pages/member/member-dashboard.tsx b/resources/js/pages/member/member-dashboard.tsx
index 369ee51..9eddd39 100644
--- a/resources/js/pages/member/member-dashboard.tsx
+++ b/resources/js/pages/member/member-dashboard.tsx
@@ -28,30 +28,6 @@ interface Task {
     priority: 'low' | 'medium' | 'high';
 }
 
-const upcomingTasks: Task[] = [
-    {
-        id: 1,
-        name: 'Finalize Budget',
-        status: 'in_progress',
-        due_date: '2024-03-20T14:00:00',
-        priority: 'high'
-    },
-    {
-        id: 2,
-        name: 'Update Roadmap',
-        status: 'pending',
-        due_date: '2024-03-22T10:00:00',
-        priority: 'medium'
-    },
-    {
-        id: 3,
-        name: 'Client Presentation',
-        status: 'pending',
-        due_date: '2024-03-25T15:30:00',
-        priority: 'high'
-    }
-];
-
 interface DashboardProps {
     taskStats: {
         total: number;
@@ -60,60 +36,70 @@ interface DashboardProps {
         pending: number;
     };
     recentActivities: Timeline[];
+    tasks: Task[];
 }
 
-export default function MemberDashboard({ taskStats, recentActivities }: DashboardProps) {
+export default function MemberDashboard({ taskStats, recentActivities, tasks }: DashboardProps) {
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
             <Head title="Dashboard" />
-            <div className="flex h-[calc(100vh-4rem)] flex-1 flex-col gap-2 pt-2 px-4 pb-4 overflow-y-auto">
-                <h1 className="text-2xl font-semibold">Dashboard</h1>
-                <div className="grid grid-cols-1 md:grid-cols-[1.5fr_1.5fr] gap-4">
+            <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">
+                    <div className="flex flex-col gap-4 h-full min-h-0">
                         {/* Recent Activity */}
-                        <Card>
-                            <CardHeader>
-                                <CardTitle>Recent Activity</CardTitle>
+                        <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="h-[300px] overflow-y-auto">
+                            <CardContent className="overflow-y-auto px-0 h-full min-h-0">
                                 <MemberRecentActivity activities={recentActivities} />
                             </CardContent>
                         </Card>
 
                         {/* Watch List */}
-                        <MemberWatchList tasks={upcomingTasks} />
+                        <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="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-min">
+                    <div className="flex flex-col gap-4 h-full">
                         {/* Performance Metric */}
-                        <div className="md:col-span-2">
-                            <PerformanceMetrics taskStats={taskStats} />
-                        </div>
+                        <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 */}
-                        <div className="md:col-span-2">
-                            <Card>
-                                <CardHeader>
-                                    <CardTitle>Alerts</CardTitle>
-                                </CardHeader>
-                                <CardContent>
-                                    {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>
+                        <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>

From db619278342013a55fc4beaa04f72bf4efcbbfad Mon Sep 17 00:00:00 2001
From: ryanmueller24 <ryanpmueller24@gmail.com>
Date: Mon, 16 Jun 2025 23:01:53 -0500
Subject: [PATCH 21/21] Everything is working with new name format

fname
mname
lname
---
 .../Auth/RegisteredUserController.php         |  12 +-
 .../ClientAdmin/AdminDashboardController.php  |   6 +-
 .../Crud/ClientAdmin/MeetingController.php    |   8 +-
 .../Crud/ClientAdmin/TaskController.php       |   8 +-
 .../Crud/ClientAdmin/UserController.php       |  13 +-
 .../Controllers/Crud/ClientController.php     |  66 -----
 .../Crud/Member/MemberTaskController.php      |   6 +-
 .../Member/MemberDashboardController.php      |   6 +-
 .../Settings/ProfileController.php            |  23 +-
 app/Http/Middleware/HandleInertiaRequests.php |  11 +-
 .../Settings/ProfileUpdateRequest.php         |  13 +-
 app/Models/User.php                           |  12 +-
 app/Services/TimelineMessageService.php       |   4 +-
 ...6_13_204535_split_user_name_into_parts.php |  74 ++++++
 database/seeders/SystemAdminSeeder.php        |   6 +-
 database/seeders/UserSeeder.php               |  66 +++--
 resources/js/components/app-header.tsx        |   4 +-
 .../dashboard/admin-recent-activity.tsx       |   2 +-
 .../dashboard/member-recent-activity.tsx      |   2 +-
 .../components/dashboard/recent-activity.tsx  |   2 +-
 .../dashboard/user-workload-chart.tsx         |   2 +-
 resources/js/components/user-info.tsx         |  10 +-
 .../components/users/create-user-dialog.tsx   |  40 ++-
 .../js/components/users/user-summary.tsx      |   4 +-
 resources/js/lib/utils.ts                     |  11 +
 .../js/pages/admin/admin-meeting-details.tsx  |   6 +-
 .../js/pages/admin/admin-meeting-list.tsx     |   2 +-
 .../js/pages/admin/admin-task-details.tsx     |   7 +-
 resources/js/pages/admin/admin-task-list.tsx  |   4 +-
 .../js/pages/admin/admin-user-details.tsx     |  56 ++++-
 resources/js/pages/admin/admin-user-list.tsx  |   2 +-
 resources/js/pages/auth/register.tsx          | 223 +++++++++--------
 .../pages/member/member-meeting-details.tsx   |   2 +-
 .../js/pages/member/member-meeting-list.tsx   |   2 +-
 .../js/pages/member/member-task-details.tsx   |   2 +-
 .../js/pages/member/member-task-list.tsx      |   2 +-
 resources/js/pages/settings/profile.tsx       | 232 +++++++++++-------
 resources/js/types/index.d.ts                 |   4 +-
 resources/js/types/task.ts                    |   3 +-
 resources/js/types/timeline.ts                |   3 +-
 resources/js/types/user.ts                    |   5 +-
 41 files changed, 611 insertions(+), 355 deletions(-)
 delete mode 100644 app/Http/Controllers/Crud/ClientController.php
 create mode 100644 database/migrations/2025_06_13_204535_split_user_name_into_parts.php

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
index d659b9b..4718ea7 100644
--- a/app/Http/Controllers/ClientAdmin/AdminDashboardController.php
+++ b/app/Http/Controllers/ClientAdmin/AdminDashboardController.php
@@ -23,7 +23,7 @@ public function index()
         $tasks = Task::where('client_id', $clientId)
             ->with(['users' => function ($query) use ($clientId) {
                 $query->where('users.client_id', $clientId)
-                    ->select('users.id', 'users.name', 'users.email');
+                    ->select('users.id', 'users.fname', 'users.mname', 'users.lname', 'users.email');
             }])
             ->get();
 
@@ -46,12 +46,12 @@ public function index()
 
         // Get all users for the timeline
         $users = User::where('client_id', $clientId)
-            ->select('id', 'name', 'email')
+            ->select('id', 'fname', 'mname', 'lname', 'email')
             ->get();
 
         // Get recent timeline activities
         $recentActivities = Timeline::where('origin_client_id', $clientId)
-            ->with(['user:id,name'])
+            ->with(['user:id,fname,mname,lname,email'])
             ->latest()
             ->take(10)
             ->get();
diff --git a/app/Http/Controllers/Crud/ClientAdmin/MeetingController.php b/app/Http/Controllers/Crud/ClientAdmin/MeetingController.php
index a626a07..10d4b5c 100644
--- a/app/Http/Controllers/Crud/ClientAdmin/MeetingController.php
+++ b/app/Http/Controllers/Crud/ClientAdmin/MeetingController.php
@@ -19,7 +19,7 @@ public function index()
         $meetings = Meeting::where('client_id', $clientId)
             ->with(['users' => function ($query) use ($clientId) {
                 $query->where('users.client_id', $clientId)
-                    ->select('users.id', 'users.name', 'users.email');
+                    ->select('users.id', 'users.fname', 'users.mname', 'users.lname', 'users.email');
             }])
             ->with(['tasks' => function ($query) use ($clientId) {
                 $query->where('tasks.client_id', $clientId)
@@ -29,7 +29,7 @@ public function index()
             ->get();
 
         $availableUsers = User::where('client_id', $clientId)
-            ->select('id', 'name', 'email')
+            ->select('id', 'fname', 'mname', 'lname', 'email')
             ->get();
 
         $availableTasks = Task::where('client_id', $clientId)
@@ -96,7 +96,7 @@ public function show(Meeting $meeting)
         // Load the meeting with its relationships and agenda
         $meeting->load(['users' => function ($query) use ($clientId) {
             $query->where('users.client_id', $clientId)
-                ->select('users.id', 'users.name', 'users.email');
+                ->select('users.id', 'users.fname', 'users.mname', 'users.lname', 'users.email');
         }])
         ->load(['tasks' => function ($query) use ($clientId) {
             $query->where('tasks.client_id', $clientId)
@@ -109,7 +109,7 @@ public function show(Meeting $meeting)
 
         // Get all available users and tasks for the form
         $availableUsers = User::where('client_id', $clientId)
-            ->select('id', 'name', 'email')
+            ->select('id', 'fname', 'mname', 'lname', 'email')
             ->get();
 
         $availableTasks = Task::where('client_id', $clientId)
diff --git a/app/Http/Controllers/Crud/ClientAdmin/TaskController.php b/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
index aa68716..05b22be 100644
--- a/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
+++ b/app/Http/Controllers/Crud/ClientAdmin/TaskController.php
@@ -17,12 +17,12 @@ public function index()
         $tasks = Task::where('client_id', $clientId)
             ->with(['users' => function ($query) use ($clientId) {
                 $query->where('users.client_id', $clientId)
-                    ->select('users.id', 'users.name', 'users.email');
+                    ->select('users.id', 'users.fname', 'users.mname', 'users.lname', 'users.email');
             }])
             ->get();
 
         $users = User::where('client_id', $clientId)
-            ->select('id', 'name', 'email')
+            ->select('id', 'fname', 'mname', 'lname', 'email')
             ->get();
 
         return Inertia::render('admin/admin-task-list', [
@@ -79,13 +79,13 @@ public function show(Task $task, Request $request)
 
         // Get all users for the client, for the task details page (to assign users to the task)
         $all_users = User::where('client_id', $clientId)
-            ->select('id', 'name', 'email')
+            ->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.name', 'users.email');
+                    ->select('users.id', 'users.fname', 'users.mname', 'users.lname', 'users.email');
             }]),
             'all_users' => $all_users,
             'from_meeting' => $request->query('from_meeting')
diff --git a/app/Http/Controllers/Crud/ClientAdmin/UserController.php b/app/Http/Controllers/Crud/ClientAdmin/UserController.php
index 2ae184c..81a7e53 100644
--- a/app/Http/Controllers/Crud/ClientAdmin/UserController.php
+++ b/app/Http/Controllers/Crud/ClientAdmin/UserController.php
@@ -27,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',
@@ -39,7 +41,9 @@ 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,
@@ -56,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',
@@ -66,7 +72,6 @@ public function update(Request $request, User $user)
             ],
         ]);
 
-
         $user->update($validated);
         session()->flash('success', 'User updated successfully!');
         return back();
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/MemberTaskController.php b/app/Http/Controllers/Crud/Member/MemberTaskController.php
index 7768cf9..d678d30 100644
--- a/app/Http/Controllers/Crud/Member/MemberTaskController.php
+++ b/app/Http/Controllers/Crud/Member/MemberTaskController.php
@@ -20,7 +20,7 @@ public function index(Request $request)
         $query = Task::where('client_id', $clientId)
             ->with(['users' => function ($query) use ($clientId) {
                 $query->where('users.client_id', $clientId)
-                    ->select('users.id', 'users.name', 'users.email');
+                    ->select('users.id', 'users.fname', 'users.mname', 'users.lname', 'users.email');
             }]);
 
         // If view is 'assigned', only show tasks assigned to the user
@@ -33,7 +33,7 @@ public function index(Request $request)
         $tasks = $query->get();
 
         $users = User::where('client_id', $clientId)
-            ->select('id', 'name', 'email')
+            ->select('id', 'fname', 'mname', 'lname', 'email')
             ->get();
 
         return Inertia::render('member/member-task-list', [
@@ -90,7 +90,7 @@ public function show(Task $task)
         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.name', 'users.email');
+                    ->select('users.id', 'users.fname', 'users.mname', 'users.lname', 'users.email');
             }])
         ]);
     }
diff --git a/app/Http/Controllers/Member/MemberDashboardController.php b/app/Http/Controllers/Member/MemberDashboardController.php
index 098c930..efbb598 100644
--- a/app/Http/Controllers/Member/MemberDashboardController.php
+++ b/app/Http/Controllers/Member/MemberDashboardController.php
@@ -25,7 +25,7 @@ public function index()
             })
             ->with(['users' => function ($query) use ($clientId) {
                 $query->where('users.client_id', $clientId)
-                    ->select('users.id', 'users.name', 'users.email');
+                    ->select('users.id', 'users.fname', 'users.mname', 'users.lname', 'users.email');
             }])
             ->get();
 
@@ -53,13 +53,13 @@ public function index()
             })
             ->with(['users' => function ($query) use ($clientId) {
                 $query->where('users.client_id', $clientId)
-                    ->select('users.id', 'users.name', 'users.email');
+                    ->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,name'])
+            ->with(['user:id,fname,mname,lname'])
             ->latest()
             ->take(10)
             ->get();
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/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/Models/User.php b/app/Models/User.php
index 23807ad..b8cc5eb 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -23,7 +23,9 @@ class User extends Authenticatable
      * @var list<string>
      */
     protected $fillable = [
-        'name',
+        'fname',
+        'mname',
+        'lname',
         'email',
         'password',
         'client_id',
@@ -53,6 +55,14 @@ 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)->withTimestamps();
diff --git a/app/Services/TimelineMessageService.php b/app/Services/TimelineMessageService.php
index a609c27..788ce9c 100644
--- a/app/Services/TimelineMessageService.php
+++ b/app/Services/TimelineMessageService.php
@@ -9,7 +9,7 @@ class TimelineMessageService
 {
     public function taskCreated($user, string $message, string $subjectType, int $subjectId): void
     {   
-        $message = "Task created by " . $user->name;
+        $message = "Task created by " . $user->fname . " " . $user->lname;
         Log::info('through service');
         event(new TimelineMessage($user, $message, $subjectType, $subjectId));
     }
@@ -24,7 +24,7 @@ public function taskUpdated($user, string $message, string $subjectType, int $su
             }
         }
 
-        $message = "Task updated by " . $user->name;
+        $message = "Task updated by " . $user->fname . " " . $user->lname;
         if (!empty($changedFields)) {
             $fieldMessages = [];
             foreach ($changedFields as $field => $value) {
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/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/UserSeeder.php b/database/seeders/UserSeeder.php
index 65ed2ab..626630e 100644
--- a/database/seeders/UserSeeder.php
+++ b/database/seeders/UserSeeder.php
@@ -14,102 +14,124 @@ public function run()
     {
         $users = [
             [
-                'name' => 'Ryan Mueller',
+                'fname' => 'Ryan',
+                'mname' => 'Philip',
+                'lname' => 'Mueller',
                 'email' => 'ryan@equippers.com',
                 'role_id' => 2, // Client-Admin
             ],
             [
-                'name' => 'Andrew McDowell',
+                'fname' => 'Andrew',
+                'lname' => 'McDowell',
                 'email' => 'andrew@equippers.com',
                 'role_id' => 3, // Member
             ],
             [
-                'name' => 'Allison Port',
+                'fname' => 'Allison',
+                'mname' => 'Joyce',
+                'lname' => 'Port',
                 'email' => 'allison@equippers.com',
                 'role_id' => 3,
             ],
             [
-                'name' => 'George Kalafatis',
+                'fname' => 'George',
+                'lname' => 'Kalafatis',
                 'email' => 'george@equippers.com',
                 'role_id' => 3,
             ],
             [
-                'name' => 'John Doe',
+                'fname' => 'John',
+                'lname' => 'Doe',
                 'email' => 'john@equippers.com',
                 'role_id' => 3,
             ],
             [
-                'name' => 'Sarah Johnson',
+                'fname' => 'Sarah',
+                'lname' => 'Johnson',
                 'email' => 'sarah@equippers.com',
                 'role_id' => 3,
             ],
             [
-                'name' => 'Michael Chen',
+                'fname' => 'Michael',
+                'lname' => 'Chen',
                 'email' => 'michael@equippers.com',
                 'role_id' => 3,
             ],
             [
-                'name' => 'Emma Wilson',
+                'fname' => 'Emma',
+                'lname' => 'Wilson',
                 'email' => 'emma@equippers.com',
                 'role_id' => 3,
             ],
             [
-                'name' => 'David Brown',
+                'fname' => 'David',
+                'lname' => 'Brown',
                 'email' => 'david@equippers.com',
                 'role_id' => 3,
             ],
             [
-                'name' => 'Lisa Anderson',
+                'fname' => 'Lisa',
+                'lname' => 'Anderson',
                 'email' => 'lisa@equippers.com',
                 'role_id' => 3,
             ],
             [
-                'name' => 'James Taylor',
+                'fname' => 'James',
+                'lname' => 'Taylor',
                 'email' => 'james@equippers.com',
                 'role_id' => 3,
             ],
             [
-                'name' => 'Rachel Martinez',
+                'fname' => 'Rachel',
+                'lname' => 'Martinez',
                 'email' => 'rachel@equippers.com',
                 'role_id' => 3,
             ],
             [
-                'name' => 'Thomas White',
+                'fname' => 'Thomas',
+                'lname' => 'White',
                 'email' => 'thomas@equippers.com',
                 'role_id' => 3,
             ],
             [
-                'name' => 'Olivia Lee',
+                'fname' => 'Olivia',
+                'lname' => 'Lee',
                 'email' => 'olivia@equippers.com',
                 'role_id' => 3,
             ],
             [
-                'name' => 'Daniel Kim',
+                'fname' => 'Daniel',
+                'lname' => 'Kim',
                 'email' => 'daniel@equippers.com',
                 'role_id' => 3,
             ],
             [
-                'name' => 'Sophia Garcia',
+                'fname' => 'Sophia',
+                'lname' => 'Garcia',
                 'email' => 'sophia@equippers.com',
                 'role_id' => 3,
             ],
             [
-                'name' => 'William Clark',
+                'fname' => 'William',
+                'lname' => 'Clark',
                 'email' => 'william@equippers.com',
                 'role_id' => 3,
             ],
             [
-                'name' => 'Ava Rodriguez',
+                'fname' => 'Ava',
+                'lname' => 'Rodriguez',
                 'email' => 'ava@equippers.com',
                 'role_id' => 3,
             ],
             [
-                'name' => 'Ethan Moore',
+                'fname' => 'Ethan',
+                'lname' => 'Moore',
                 'email' => 'ethan@equippers.com',
                 'role_id' => 3,
             ],
             [
-                'name' => 'Isabella Thompson',
+                'fname' => 'Isabella',
+                'lname' => 'Thompson',
                 'email' => 'isabella@equippers.com',
                 'role_id' => 3,
             ],
@@ -117,7 +139,9 @@ public function run()
 
         foreach ($users as $userData) {
             User::create([
-                'name' => $userData['name'],
+                'fname' => $userData['fname'],
+                'mname' => $userData['mname'] ?? null,
+                'lname' => $userData['lname'],
                 'email' => $userData['email'],
                 'password' => Hash::make('password'),
                 'password_set' => true,
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/dashboard/admin-recent-activity.tsx b/resources/js/components/dashboard/admin-recent-activity.tsx
index 6c43295..8e640c2 100644
--- a/resources/js/components/dashboard/admin-recent-activity.tsx
+++ b/resources/js/components/dashboard/admin-recent-activity.tsx
@@ -54,7 +54,7 @@ export function RecentActivity({ activities }: RecentActivityProps) {
                             </p>
                             {activity.user && (
                                 <span className="text-xs text-muted-foreground/60">
-                                    • by {activity.user.name}
+                                    • by {activity.user.fname} {activity.user.lname}
                                 </span>
                             )}
                         </div>
diff --git a/resources/js/components/dashboard/member-recent-activity.tsx b/resources/js/components/dashboard/member-recent-activity.tsx
index c795550..728bdeb 100644
--- a/resources/js/components/dashboard/member-recent-activity.tsx
+++ b/resources/js/components/dashboard/member-recent-activity.tsx
@@ -49,7 +49,7 @@ export function MemberRecentActivity({ activities }: RecentActivityProps) {
                         <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?.name}
+                                {activity.user?.fname} {activity.user?.lname}
                             </span>
                             <span className="text-xs text-muted-foreground">•</span>
                             <span className="text-xs text-muted-foreground">
diff --git a/resources/js/components/dashboard/recent-activity.tsx b/resources/js/components/dashboard/recent-activity.tsx
index e9502a2..e43bfc1 100644
--- a/resources/js/components/dashboard/recent-activity.tsx
+++ b/resources/js/components/dashboard/recent-activity.tsx
@@ -36,7 +36,7 @@ export function RecentActivity({ activities }: RecentActivityProps) {
                             </p>
                             {activity.user && (
                                 <span className="text-xs text-muted-foreground/60">
-                                    • by {activity.user.name}
+                                    • by {activity.user.fname} {activity.user.lname}
                                 </span>
                             )}
                         </div>
diff --git a/resources/js/components/dashboard/user-workload-chart.tsx b/resources/js/components/dashboard/user-workload-chart.tsx
index 3bf65c4..a792474 100644
--- a/resources/js/components/dashboard/user-workload-chart.tsx
+++ b/resources/js/components/dashboard/user-workload-chart.tsx
@@ -15,7 +15,7 @@ export function UserWorkloadChart({ tasks, users }: UserWorkloadChartProps) {
         );
         
         return {
-            name: user.name,
+            name: user.fname + ' ' + user.lname,
             total: userTasks.length,
         };
     });
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
index d0a081e..997f8d0 100644
--- a/resources/js/components/users/create-user-dialog.tsx
+++ b/resources/js/components/users/create-user-dialog.tsx
@@ -34,7 +34,9 @@ export default function CreateUserDialog({ open, onOpenChange }: CreateUserDialo
     const clientId = auth.user.client_id;
 
     const { data, setData, post, processing, errors, reset } = useForm({
-        name: '',
+        fname: '',
+        mname: '',
+        lname: '',
         email: '',
         password: '',
         password_confirmation: '',
@@ -70,15 +72,39 @@ export default function CreateUserDialog({ open, onOpenChange }: CreateUserDialo
                         <CardContent className="pt-6">
                             <div className="grid gap-4">
                                 <div className="grid gap-2">
-                                    <Label htmlFor="name">Name</Label>
+                                    <Label htmlFor="fname">First Name</Label>
                                     <Input
-                                        id="name"
-                                        value={data.name}
-                                        onChange={e => setData('name', e.target.value)}
-                                        placeholder="Full name"
+                                        id="fname"
+                                        value={data.fname}
+                                        onChange={e => setData('fname', e.target.value)}
+                                        placeholder="First name"
                                         className="w-full"
                                     />
-                                    <InputError message={errors.name} />
+                                    <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">
diff --git a/resources/js/components/users/user-summary.tsx b/resources/js/components/users/user-summary.tsx
index 9d56cf0..39b09c5 100644
--- a/resources/js/components/users/user-summary.tsx
+++ b/resources/js/components/users/user-summary.tsx
@@ -3,7 +3,9 @@ import { Users, UserCheck, UserX } from 'lucide-react';
 
 interface User {
     id: number;
-    name: string;
+    fname: string;
+    mname?: string;
+    lname: string;
     email: string;
     role: {
         id: number;
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/admin/admin-meeting-details.tsx b/resources/js/pages/admin/admin-meeting-details.tsx
index bd409bb..ae0c760 100644
--- a/resources/js/pages/admin/admin-meeting-details.tsx
+++ b/resources/js/pages/admin/admin-meeting-details.tsx
@@ -245,7 +245,7 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                                                     variant="secondary" 
                                                                     className="text-sm bg-muted/50"
                                                                 >
-                                                                    {user.name}
+                                                                    {user.fname} {user.lname}
                                                                 </Badge>
                                                             ))
                                                         }
@@ -283,7 +283,7 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                                                                     data.users.includes(user.id) ? "opacity-100" : "opacity-0"
                                                                                 )}
                                                                             />
-                                                                            <span>{user.name}</span>
+                                                                            <span>{user.fname} {user.lname}</span>
                                                                         </CommandItem>
                                                                     ))}
                                                                 </CommandGroup>
@@ -302,7 +302,7 @@ export default function MeetingDetails({ meeting, users, tasks }: PageProps) {
                                                                     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.name}
+                                                                    {user.fname} {user.lname}
                                                                 </Badge>
                                                             ))
                                                         ) : (
diff --git a/resources/js/pages/admin/admin-meeting-list.tsx b/resources/js/pages/admin/admin-meeting-list.tsx
index 8c8a547..53be588 100644
--- a/resources/js/pages/admin/admin-meeting-list.tsx
+++ b/resources/js/pages/admin/admin-meeting-list.tsx
@@ -130,7 +130,7 @@ const columns: ColumnDef<Meeting>[] = [
                 <div className="flex flex-wrap gap-1">
                     {attendees.map((user) => (
                         <Badge key={user.id} variant="secondary">
-                            {user.name}
+                            {user.fname} {user.lname}
                         </Badge>
                     ))}
                 </div>
diff --git a/resources/js/pages/admin/admin-task-details.tsx b/resources/js/pages/admin/admin-task-details.tsx
index ef2adc2..9815b1c 100644
--- a/resources/js/pages/admin/admin-task-details.tsx
+++ b/resources/js/pages/admin/admin-task-details.tsx
@@ -186,7 +186,10 @@ export default function TaskDetails({ task, all_users }: PageProps) {
                                         <div className="space-y-2 w-full">
                                             {isEditing ? (
                                                 <MultiSelect
-                                                    items={all_users}
+                                                    items={all_users.map(user => ({
+                                                        id: user.id,
+                                                        name: `${user.fname} ${user.lname}`
+                                                    }))}
                                                     selectedIds={data.users}
                                                     onSelectionChange={(ids) => setData('users', ids)}
                                                     placeholder="Select users..."
@@ -204,7 +207,7 @@ export default function TaskDetails({ task, all_users }: PageProps) {
                                                                     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.name}
+                                                                    {user.fname} {user.lname}
                                                                 </Badge>
                                                             ))
                                                         ) : (
diff --git a/resources/js/pages/admin/admin-task-list.tsx b/resources/js/pages/admin/admin-task-list.tsx
index fcd094b..baaa5cd 100644
--- a/resources/js/pages/admin/admin-task-list.tsx
+++ b/resources/js/pages/admin/admin-task-list.tsx
@@ -139,7 +139,7 @@ const columns: ColumnDef<Task>[] = [
                 <div className="flex flex-wrap gap-1">
                     {assignedUsers.map((user) => (
                         <Badge key={user.id} variant="secondary">
-                            {user.name}
+                            {user.fname} {user.lname}
                         </Badge>
                     ))}
                 </div>
@@ -341,7 +341,7 @@ export default function AdminTaskList({ tasks, users }: AdminTaskListProps) {
                                                             <SelectItem value="all">All Users</SelectItem>
                                                             {users.map((user) => (
                                                                 <SelectItem key={user.id} value={String(user.id)}>
-                                                                    {user.name}
+                                                                    {user.fname} {user.lname}
                                                                 </SelectItem>
                                                             ))}
                                                         </SelectContent>
diff --git a/resources/js/pages/admin/admin-user-details.tsx b/resources/js/pages/admin/admin-user-details.tsx
index 7dcbc24..0740390 100644
--- a/resources/js/pages/admin/admin-user-details.tsx
+++ b/resources/js/pages/admin/admin-user-details.tsx
@@ -13,7 +13,9 @@ import { useRolePrefix } from '@/hooks/use-role-prefix';
 
 interface UserData {
     id: number;
-    name: string;
+    fname: string;
+    mname?: string;
+    lname: string;
     email: string;
 }
 
@@ -26,7 +28,9 @@ export default function UserDetails({ user }: PageProps) {
     const [isEditing, setIsEditing] = useState(false);
     const { getRoute } = useRolePrefix();
     const { data, setData, put, processing, errors, reset } = useForm({
-        name: user.name,
+        fname: user.fname,
+        mname: user.mname || '',
+        lname: user.lname,
         email: user.email,
     });
     const { props } = usePage();
@@ -49,7 +53,7 @@ export default function UserDetails({ user }: PageProps) {
             }
         ]),
         {
-            title: user.name,
+            title: `${user.fname} ${user.lname}`,
             href: `/users/${user.id}`,
         },
     ];
@@ -70,7 +74,7 @@ export default function UserDetails({ user }: PageProps) {
 
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
-            <Head title={`User: ${data.name}`} />
+            <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">
@@ -79,7 +83,7 @@ export default function UserDetails({ user }: PageProps) {
                                 <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>
+                                <CardTitle className="text-2xl font-semibold">{`${user.fname} ${user.lname}`}</CardTitle>
                             </div>
                             <div className="flex gap-2">
                                 {isEditing ? (
@@ -99,7 +103,7 @@ export default function UserDetails({ user }: PageProps) {
                                         <DeleteConfirmation
                                             onConfirm={() => router.delete(`/users/${user.id}`)}
                                             itemType="user"
-                                            itemName={user.name}
+                                            itemName={`${user.fname} ${user.lname}`}
                                         >
                                             <Button variant="destructive" className="cursor-pointer">
                                                 Delete User
@@ -113,17 +117,45 @@ export default function UserDetails({ user }: PageProps) {
                     <CardContent className="pt-6">
                         <div className="space-y-6">
                             <div className="space-y-2">
-                                <Label htmlFor="name">Name</Label>
+                                <Label htmlFor="fname">First Name</Label>
                                 {isEditing ? (
                                     <Input
-                                        id="name"
-                                        value={data.name}
-                                        onChange={e => setData('name', e.target.value)}
-                                        error={errors.name}
+                                        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.name}</p>
+                                    <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">
diff --git a/resources/js/pages/admin/admin-user-list.tsx b/resources/js/pages/admin/admin-user-list.tsx
index da36667..3da81b3 100644
--- a/resources/js/pages/admin/admin-user-list.tsx
+++ b/resources/js/pages/admin/admin-user-list.tsx
@@ -49,7 +49,7 @@ const columns: ColumnDef<User>[] = [
             const user = row.original;
             return (
                 <div>
-                    <div className="font-medium">{user.name}</div>
+                    <div className="font-medium">{user.fname} {user.lname}</div>
                 </div>
             )
         },
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/member/member-meeting-details.tsx b/resources/js/pages/member/member-meeting-details.tsx
index 148448a..7d820da 100644
--- a/resources/js/pages/member/member-meeting-details.tsx
+++ b/resources/js/pages/member/member-meeting-details.tsx
@@ -118,7 +118,7 @@ export default function MemberMeetingDetails({ meeting, users, tasks }: MemberMe
                                                         variant="secondary" 
                                                         className="text-sm bg-muted/50"
                                                     >
-                                                        {user.name}
+                                                        {user.fname} {user.lname}
                                                     </Badge>
                                                 ))}
                                             </div>
diff --git a/resources/js/pages/member/member-meeting-list.tsx b/resources/js/pages/member/member-meeting-list.tsx
index 622ec5c..d5f5b69 100644
--- a/resources/js/pages/member/member-meeting-list.tsx
+++ b/resources/js/pages/member/member-meeting-list.tsx
@@ -145,7 +145,7 @@ const columns: ColumnDef<Meeting>[] = [
                 <div className="flex flex-wrap gap-1">
                     {attendees.map((user) => (
                         <Badge key={user.id} variant="secondary">
-                            {user.name}
+                            {user.fname} {user.lname}
                         </Badge>
                     ))}
                 </div>
diff --git a/resources/js/pages/member/member-task-details.tsx b/resources/js/pages/member/member-task-details.tsx
index 9c82117..ad467d0 100644
--- a/resources/js/pages/member/member-task-details.tsx
+++ b/resources/js/pages/member/member-task-details.tsx
@@ -162,7 +162,7 @@ export default function TaskDetails({ task }: PageProps) {
                                                             variant="secondary" 
                                                             className="text-sm bg-muted/50"
                                                         >
-                                                            {user.name}
+                                                            {user.fname} {user.lname}
                                                         </Badge>
                                                     ))
                                                 ) : (
diff --git a/resources/js/pages/member/member-task-list.tsx b/resources/js/pages/member/member-task-list.tsx
index f3055bb..7bb60dd 100644
--- a/resources/js/pages/member/member-task-list.tsx
+++ b/resources/js/pages/member/member-task-list.tsx
@@ -220,7 +220,7 @@ const columns: ColumnDef<Task>[] = [
                 <div className="flex flex-wrap gap-1">
                     {assignedUsers.map((user) => (
                         <Badge key={user.id} variant="secondary">
-                            {user.name}
+                            {user.fname} {user.lname}
                         </Badge>
                     ))}
                 </div>
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/types/index.d.ts b/resources/js/types/index.d.ts
index b4de334..0cf8f8f 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -40,7 +40,9 @@ export interface Role {
 
 export interface User {
     id: number;
-    name: string;
+    fname: string;
+    mname?: string;
+    lname: string;
     email: string;
     avatar?: string;
     email_verified_at: string | null;
diff --git a/resources/js/types/task.ts b/resources/js/types/task.ts
index 20fb363..8798675 100644
--- a/resources/js/types/task.ts
+++ b/resources/js/types/task.ts
@@ -3,7 +3,8 @@ export type TaskPriority = 'low' | 'medium' | 'high';
 
 export interface User {
     id: number;
-    name: string;
+    fname: string;
+    lname: string;
     email: string;
 }
 
diff --git a/resources/js/types/timeline.ts b/resources/js/types/timeline.ts
index 3658bb8..9c9f2f6 100644
--- a/resources/js/types/timeline.ts
+++ b/resources/js/types/timeline.ts
@@ -10,6 +10,7 @@ export interface Timeline {
     deleted_at: string | null;
     user?: {
         id: number;
-        name: string;
+        fname: string;
+        lname: string;
     };
 } 
\ No newline at end of file
diff --git a/resources/js/types/user.ts b/resources/js/types/user.ts
index a906052..2cb0222 100644
--- a/resources/js/types/user.ts
+++ b/resources/js/types/user.ts
@@ -1,10 +1,13 @@
 export interface User {
     id: number;
-    name: string;
+    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