From 0a2374629824941591a231ebbea71c4ffcbd6a44 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 21:44:15 +0600
Subject: [PATCH 01/15] refactor: remove unused chatSettings from
 DashboardController

---
 app/Http/Controllers/Admin/DashboardController.php | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/app/Http/Controllers/Admin/DashboardController.php b/app/Http/Controllers/Admin/DashboardController.php
index a941f73..0d19664 100644
--- a/app/Http/Controllers/Admin/DashboardController.php
+++ b/app/Http/Controllers/Admin/DashboardController.php
@@ -3,7 +3,6 @@
 namespace App\Http\Controllers\Admin;
 
 use App\Http\Controllers\Controller;
-use App\Models\AppSetting;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Cache;
 use Illuminate\Support\Facades\Http;
@@ -14,12 +13,7 @@ class DashboardController extends Controller
 {
     public function index()
     {
-        return Inertia::render('admin/Dashboard', [
-            'chatSettings' => [
-                'enabled' => AppSetting::get('global_chat_enabled', true),
-                'audience' => AppSetting::get('global_chat_audience', 'verified_members'),
-            ],
-        ]);
+        return Inertia::render('admin/Dashboard');
     }
 
     public function analytics(Request $request)

From 3eea086b728ee5930c99d82aea156f15481b74a5 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 22:09:10 +0600
Subject: [PATCH 02/15] feat(chat): add chat ban support with moderation
 shortcuts and timestamps

---
 app/Http/Controllers/ChatController.php       |  12 ++
 app/Http/Requests/User/UpdateUserRequest.php  |   1 +
 app/Models/User.php                           |   7 +
 ...7_add_chat_banned_until_to_users_table.php |  28 ++++
 resources/js/components/admin/UserRow.vue     |  18 ++-
 resources/js/pages/Chat/Index.vue             |  16 ++-
 .../js/pages/admin/users/CreateOrEdit.vue     | 123 +++++++++++++++++-
 7 files changed, 200 insertions(+), 5 deletions(-)
 create mode 100644 database/migrations/2026_08_27_160307_add_chat_banned_until_to_users_table.php

diff --git a/app/Http/Controllers/ChatController.php b/app/Http/Controllers/ChatController.php
index 58f8829..e85262e 100644
--- a/app/Http/Controllers/ChatController.php
+++ b/app/Http/Controllers/ChatController.php
@@ -29,6 +29,9 @@ public function index(Request $request)
             $reason = 'Global chat is currently disabled for maintenance.';
         } elseif (! $user) {
             $reason = 'Please sign in to join the conversation.';
+        } elseif ($user->isChatBanned()) {
+            $bannedUntilFormatted = $user->chat_banned_until->diffForHumans();
+            $reason = "You are temporarily banned from chat until {$user->chat_banned_until->toDateTimeString()} ({$bannedUntilFormatted}).";
         } elseif ($audience === 'verified_members') {
             if ($user->is_verified || $user->can('view admin')) {
                 $canPost = true;
@@ -104,6 +107,15 @@ public function store(Request $request)
             return response()->json(['message' => 'Global chat is currently disabled.'], 403);
         }
 
+        // Check if user is chat banned
+        if ($user->isChatBanned()) {
+            $bannedUntilFormatted = $user->chat_banned_until->diffForHumans();
+
+            return response()->json([
+                'message' => "You are banned from sending messages until {$user->chat_banned_until->toDateTimeString()} ({$bannedUntilFormatted}).",
+            ], 403);
+        }
+
         // Check audience permission
         if ($audience === 'verified_members' && ! $user->is_verified && ! $user->can('view admin')) {
             return response()->json(['message' => 'Global chat is currently restricted to verified members.'], 403);
diff --git a/app/Http/Requests/User/UpdateUserRequest.php b/app/Http/Requests/User/UpdateUserRequest.php
index 84638ae..71ff13d 100644
--- a/app/Http/Requests/User/UpdateUserRequest.php
+++ b/app/Http/Requests/User/UpdateUserRequest.php
@@ -37,6 +37,7 @@ public function rules(): array
             'role' => ['sometimes', 'string'],
             'permissions' => ['sometimes', 'array'],
             'permissions.*' => ['string', 'exists:permissions,name'],
+            'chat_banned_until' => ['sometimes', 'nullable', 'date'],
         ];
 
         return $rules;
diff --git a/app/Models/User.php b/app/Models/User.php
index c86e494..03f0191 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -43,6 +43,7 @@ class User extends Authenticatable
         'receive_emails',
         'google_id',
         'email_verified_at',
+        'chat_banned_until',
         'image_path',
         'about',
         'title',
@@ -74,6 +75,11 @@ public function getIsVerifiedAttribute(): bool
             : $this->roles()->exists();
     }
 
+    public function isChatBanned(): bool
+    {
+        return $this->chat_banned_until !== null && $this->chat_banned_until->isFuture();
+    }
+
     public function getImageUrlAttribute()
     {
         if (! $this->image_path) {
@@ -87,6 +93,7 @@ protected function casts(): array
     {
         return [
             'email_verified_at' => 'datetime',
+            'chat_banned_until' => 'datetime',
             'password' => 'hashed',
             'receive_emails' => 'boolean',
         ];
diff --git a/database/migrations/2026_08_27_160307_add_chat_banned_until_to_users_table.php b/database/migrations/2026_08_27_160307_add_chat_banned_until_to_users_table.php
new file mode 100644
index 0000000..90df143
--- /dev/null
+++ b/database/migrations/2026_08_27_160307_add_chat_banned_until_to_users_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->timestamp('chat_banned_until')->nullable()->after('receive_emails');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('chat_banned_until');
+        });
+    }
+};
diff --git a/resources/js/components/admin/UserRow.vue b/resources/js/components/admin/UserRow.vue
index 26175ca..8ac1d8c 100644
--- a/resources/js/components/admin/UserRow.vue
+++ b/resources/js/components/admin/UserRow.vue
@@ -1,17 +1,22 @@
 <script setup lang="ts">
 import { Link, router, usePage } from '@inertiajs/vue3';
-import { LogIn, Pencil, Trash2 } from 'lucide-vue-next';
+import { LogIn, Pencil, Trash2, Ban } from 'lucide-vue-next';
 import { usePermissions } from '@/lib/usePermissions';
 
 const { can } = usePermissions();
 
-defineProps({
+const props = defineProps({
     user: Object,
 });
 
 const page = usePage();
 const userId = page.props.auth.user.id;
 
+const isChatBanned = (user: any) => {
+    if (!user?.chat_banned_until) return false;
+    return new Date(user.chat_banned_until).getTime() > Date.now();
+};
+
 const getRoleBadgeStyles = (role: string) => {
     switch (role) {
         case 'admin':
@@ -81,6 +86,15 @@ const deleteUser = (id: number) => {
                     >
                         {{ user.roles?.[0]?.name ?? 'no role' }}
                     </span>
+
+                    <span
+                        v-if="isChatBanned(user)"
+                        class="inline-flex items-center gap-1 rounded bg-rose-50 px-1.5 py-0.5 text-[10px] font-bold text-rose-700 uppercase ring-1 ring-rose-600/20 ring-inset dark:bg-rose-500/10 dark:text-rose-400 dark:ring-rose-500/30"
+                        title="Chat banned"
+                    >
+                        <Ban class="h-2.5 w-2.5" />
+                        Chat Banned
+                    </span>
                 </div>
 
                 <p
diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index ea9e8f7..88bec86 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { Head, Link, usePage } from '@inertiajs/vue3';
-import { Send, Trash2, Lock, Loader2, LogIn, ArrowDown } from 'lucide-vue-next';
+import { Send, Trash2, Lock, Loader2, LogIn, ArrowDown, ShieldAlert, Pencil } from 'lucide-vue-next';
 import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
 import VerifiedBadge from '@/components/VerifiedBadge.vue';
 import { getEcho } from '@/lib/echo';
+import { usePermissions } from '@/lib/usePermissions';
 
 interface ChatUser {
     id: number;
@@ -37,6 +38,7 @@ const props = defineProps<{
 }>();
 
 const page = usePage();
+const { can } = usePermissions();
 const currentUser = computed(() => page.props.auth?.user);
 
 const messages = ref<ChatMessageItem[]>(props.chatState.messages || []);
@@ -438,13 +440,23 @@ onUnmounted(() => {
                                     </span>
                                 </div>
 
-                                <div class="flex shrink-0 items-center gap-2">
+                                <div class="flex shrink-0 items-center gap-1.5">
                                     <span
                                         class="text-[10px] text-slate-400 sm:text-[11px] dark:text-gray-500"
                                     >
                                         {{ formatTime(msg.created_at) }}
                                     </span>
 
+                                    <!-- Quick Admin Edit / Ban User Button -->
+                                    <Link
+                                        v-if="can('edit users')"
+                                        :href="`/admin/users/edit/${msg.user.id}`"
+                                        class="cursor-pointer rounded-md p-1 text-slate-400 opacity-100 transition hover:bg-indigo-50 hover:text-indigo-600 sm:opacity-0 sm:group-hover:opacity-100 dark:text-gray-500 dark:hover:bg-indigo-950/40 dark:hover:text-indigo-400"
+                                        :title="`Manage / Ban ${msg.user.name}`"
+                                    >
+                                        <Pencil class="h-3 w-3" />
+                                    </Link>
+
                                     <!-- Delete Button -->
                                     <button
                                         v-if="
diff --git a/resources/js/pages/admin/users/CreateOrEdit.vue b/resources/js/pages/admin/users/CreateOrEdit.vue
index f04604b..a4933b6 100644
--- a/resources/js/pages/admin/users/CreateOrEdit.vue
+++ b/resources/js/pages/admin/users/CreateOrEdit.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Head, Link, useForm } from '@inertiajs/vue3';
-import { UserPlus, Loader2, Save } from 'lucide-vue-next';
+import { UserPlus, Loader2, Save, Ban, Clock, CheckCircle } from 'lucide-vue-next';
 import { watch } from 'vue';
 
 const props = defineProps({
@@ -16,12 +16,22 @@ const roles = [
 
 const availablePermissions = props.permissions;
 
+const formatForDatetimeLocal = (dateString?: string | null) => {
+    if (!dateString) return '';
+    const d = new Date(dateString);
+    if (isNaN(d.getTime())) return '';
+    const offset = d.getTimezoneOffset() * 60000;
+    const localISOTime = new Date(d.getTime() - offset).toISOString().slice(0, 16);
+    return localISOTime;
+};
+
 const form = useForm({
     _method: props.user ? 'PATCH' : 'POST',
     name: props.user?.name || '',
     email: props.user?.email || '',
     role: props.user?.roles?.[0]?.name || 'manager',
     permissions: props.user?.permissions?.map((p) => p.name) || ['view admin'],
+    chat_banned_until: formatForDatetimeLocal(props.user?.chat_banned_until),
 
     file: null,
     about: props.user?.about || '',
@@ -32,6 +42,23 @@ const form = useForm({
     instagram: props.user?.instagram || '',
 });
 
+const banPresets = [
+    { label: '1 Hour', hours: 1 },
+    { label: '24 Hours', hours: 24 },
+    { label: '3 Days', hours: 72 },
+    { label: '7 Days', hours: 168 },
+    { label: '30 Days', hours: 720 },
+];
+
+const applyBanPreset = (hours: number) => {
+    const futureDate = new Date(Date.now() + hours * 60 * 60 * 1000);
+    form.chat_banned_until = formatForDatetimeLocal(futureDate.toISOString());
+};
+
+const clearBan = () => {
+    form.chat_banned_until = '';
+};
+
 watch(
     () => form.role,
     (newRole) => {
@@ -239,6 +266,100 @@ const submitForm = () => {
                 </p>
             </div>
 
+            <!-- GLOBAL CHAT MODERATION / BAN SECTION -->
+            <div
+                class="space-y-4 rounded-xl border border-rose-200 bg-rose-50/30 p-5 dark:border-rose-900/40 dark:bg-rose-950/10"
+            >
+                <div class="flex items-start justify-between">
+                    <div>
+                        <h3
+                            class="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-gray-100"
+                        >
+                            <Ban class="h-4 w-4 text-rose-500" />
+                            Global Chat Moderation
+                        </h3>
+                        <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
+                            Restrict this user from sending messages in the Global Student Chat until a specified date & time.
+                        </p>
+                    </div>
+
+                    <span
+                        v-if="form.chat_banned_until"
+                        class="inline-flex items-center gap-1 rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-bold text-rose-700 dark:bg-rose-900/50 dark:text-rose-300"
+                    >
+                        <Clock class="h-3 w-3" />
+                        Chat Banned
+                    </span>
+                    <span
+                        v-else
+                        class="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-bold text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300"
+                    >
+                        <CheckCircle class="h-3 w-3" />
+                        Active
+                    </span>
+                </div>
+
+                <!-- Quick Presets -->
+                <div>
+                    <label class="mb-1.5 block text-xs font-semibold text-slate-600 dark:text-gray-400">
+                        Quick Ban Presets:
+                    </label>
+                    <div class="flex flex-wrap gap-2">
+                        <button
+                            v-for="preset in banPresets"
+                            :key="preset.label"
+                            type="button"
+                            @click="applyBanPreset(preset.hours)"
+                            :disabled="form.processing"
+                            class="cursor-pointer rounded-lg border border-rose-200 bg-white px-2.5 py-1 text-xs font-medium text-rose-700 transition hover:bg-rose-50 active:scale-95 disabled:opacity-50 dark:border-rose-800/60 dark:bg-gray-800 dark:text-rose-300 dark:hover:bg-rose-900/30"
+                        >
+                            +{{ preset.label }}
+                        </button>
+
+                        <button
+                            v-if="form.chat_banned_until"
+                            type="button"
+                            @click="clearBan"
+                            :disabled="form.processing"
+                            class="cursor-pointer rounded-lg border border-slate-200 bg-white px-2.5 py-1 text-xs font-medium text-slate-600 transition hover:bg-slate-100 active:scale-95 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                        >
+                            Unban (Clear)
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Custom Datetime Input -->
+                <div class="max-w-md">
+                    <label
+                        for="chat_banned_until"
+                        class="mb-1.5 block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                    >
+                        Ban Until Date & Time:
+                    </label>
+                    <input
+                        v-model="form.chat_banned_until"
+                        type="datetime-local"
+                        id="chat_banned_until"
+                        :disabled="form.processing"
+                        class="w-full rounded-lg border bg-white px-4 py-2 text-xs font-medium transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
+                        :class="
+                            form.errors.chat_banned_until
+                                ? 'border-rose-500 focus:ring-rose-500/20'
+                                : 'border-gray-300 focus:border-rose-500 focus:ring-rose-500/20 dark:border-gray-600'
+                        "
+                    />
+                    <p
+                        v-if="form.errors.chat_banned_until"
+                        class="mt-1 text-xs text-rose-600"
+                    >
+                        {{ form.errors.chat_banned_until }}
+                    </p>
+                    <p class="mt-1 text-[11px] text-slate-500 dark:text-gray-400">
+                        Leave blank if the user should not be banned.
+                    </p>
+                </div>
+            </div>
+
             <!-- Profile Meta details section -->
             <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                 <div>

From f52760d167e2b349579186bced17f8f3d547e20b Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 22:26:06 +0600
Subject: [PATCH 03/15] feat(chat): add chat message reporting with snapshots,
 duplicate prevention, and admin moderation

---
 .../Admin/ChatSettingsController.php          |  59 +++
 app/Http/Controllers/ChatController.php       |  43 ++
 app/Models/ChatReport.php                     |  40 ++
 ...08_27_161100_create_chat_reports_table.php |  38 ++
 resources/js/pages/Chat/Index.vue             | 203 ++++++++-
 resources/js/pages/admin/ChatSettings.vue     |  31 +-
 resources/js/pages/admin/chat/Reports.vue     | 407 ++++++++++++++++++
 routes/admin.php                              |   3 +
 routes/web.php                                |   1 +
 9 files changed, 822 insertions(+), 3 deletions(-)
 create mode 100644 app/Models/ChatReport.php
 create mode 100644 database/migrations/2026_08_27_161100_create_chat_reports_table.php
 create mode 100644 resources/js/pages/admin/chat/Reports.vue

diff --git a/app/Http/Controllers/Admin/ChatSettingsController.php b/app/Http/Controllers/Admin/ChatSettingsController.php
index 4a92065..f926b47 100644
--- a/app/Http/Controllers/Admin/ChatSettingsController.php
+++ b/app/Http/Controllers/Admin/ChatSettingsController.php
@@ -5,6 +5,7 @@
 use App\Http\Controllers\Controller;
 use App\Models\AppSetting;
 use App\Models\ChatMessage;
+use App\Models\ChatReport;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
 
@@ -20,6 +21,46 @@ public function edit()
             ],
             'totalMessages' => ChatMessage::count(),
             'recentMessagesCount' => ChatMessage::where('created_at', '>=', now()->subHours(24))->count(),
+            'pendingReportsCount' => ChatReport::where('status', 'pending')->count(),
+        ]);
+    }
+
+    public function reports()
+    {
+        $reports = ChatReport::with(['reporter:id,name,username', 'reportedUser:id,name,username,chat_banned_until'])
+            ->latest('id')
+            ->take(100)
+            ->get()
+            ->map(fn ($report) => [
+                'id' => $report->id,
+                'reporter_id' => $report->reporter_id,
+                'reporter' => $report->reporter ? [
+                    'id' => $report->reporter->id,
+                    'name' => $report->reporter->name,
+                    'username' => $report->reporter->username,
+                ] : null,
+                'reported_user_id' => $report->reported_user_id,
+                'reported_user_name' => $report->reported_user_name,
+                'reported_user_username' => $report->reported_user_username,
+                'reported_user' => $report->reportedUser ? [
+                    'id' => $report->reportedUser->id,
+                    'name' => $report->reportedUser->name,
+                    'username' => $report->reportedUser->username,
+                    'chat_banned_until' => $report->reportedUser->chat_banned_until?->toIso8601String(),
+                    'is_chat_banned' => $report->reportedUser->isChatBanned(),
+                ] : null,
+                'message_content' => $report->message_content,
+                'message_sent_at' => $report->message_sent_at?->toIso8601String(),
+                'reason' => $report->reason,
+                'status' => $report->status,
+                'created_at' => $report->created_at->toIso8601String(),
+            ]);
+
+        return Inertia::render('admin/chat/Reports', [
+            'reports' => $reports,
+            'pendingCount' => ChatReport::where('status', 'pending')->count(),
+            'reviewedCount' => ChatReport::where('status', 'reviewed')->count(),
+            'dismissedCount' => ChatReport::where('status', 'dismissed')->count(),
         ]);
     }
 
@@ -44,4 +85,22 @@ public function clearMessages()
 
         return back()->with('success', 'All chat messages have been cleared.');
     }
+
+    public function updateReportStatus(Request $request, ChatReport $report)
+    {
+        $validated = $request->validate([
+            'status' => ['required', 'string', 'in:pending,reviewed,dismissed'],
+        ]);
+
+        $report->update(['status' => $validated['status']]);
+
+        return back()->with('success', 'Report status updated.');
+    }
+
+    public function deleteReport(ChatReport $report)
+    {
+        $report->delete();
+
+        return back()->with('success', 'Report deleted successfully.');
+    }
 }
diff --git a/app/Http/Controllers/ChatController.php b/app/Http/Controllers/ChatController.php
index e85262e..cca5d22 100644
--- a/app/Http/Controllers/ChatController.php
+++ b/app/Http/Controllers/ChatController.php
@@ -197,4 +197,47 @@ public function destroy(Request $request, ChatMessage $message)
 
         return response()->json(['success' => true]);
     }
+
+    public function report(Request $request)
+    {
+        $user = $request->user();
+        abort_unless($user, 401, 'Unauthenticated');
+
+        $validated = $request->validate([
+            'reported_user_id' => ['nullable', 'integer', 'exists:users,id'],
+            'reported_user_name' => ['nullable', 'string', 'max:255'],
+            'reported_user_username' => ['nullable', 'string', 'max:255'],
+            'message_content' => ['required', 'string', 'max:1000'],
+            'message_sent_at' => ['nullable', 'date'],
+            'reason' => ['nullable', 'string', 'max:255'],
+        ]);
+
+        // Prevent duplicate reporting of the exact same message content by the same user
+        $alreadyReported = \App\Models\ChatReport::where('reporter_id', $user->id)
+            ->where('message_content', $validated['message_content'])
+            ->where('reported_user_id', $validated['reported_user_id'] ?? null)
+            ->exists();
+
+        if ($alreadyReported) {
+            return response()->json([
+                'message' => 'You have already reported this message.',
+            ], 422);
+        }
+
+        $report = \App\Models\ChatReport::create([
+            'reporter_id' => $user->id,
+            'reported_user_id' => $validated['reported_user_id'] ?? null,
+            'reported_user_name' => $validated['reported_user_name'] ?? null,
+            'reported_user_username' => $validated['reported_user_username'] ?? null,
+            'message_content' => $validated['message_content'],
+            'message_sent_at' => $validated['message_sent_at'] ?? null,
+            'reason' => $validated['reason'] ?? 'Inappropriate message',
+            'status' => 'pending',
+        ]);
+
+        return response()->json([
+            'message' => 'Message reported successfully. Our team will review it.',
+            'report_id' => $report->id,
+        ], 201);
+    }
 }
diff --git a/app/Models/ChatReport.php b/app/Models/ChatReport.php
new file mode 100644
index 0000000..7126f13
--- /dev/null
+++ b/app/Models/ChatReport.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class ChatReport extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'reporter_id',
+        'reported_user_id',
+        'reported_user_name',
+        'reported_user_username',
+        'message_content',
+        'message_sent_at',
+        'reason',
+        'status',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'message_sent_at' => 'datetime',
+        ];
+    }
+
+    public function reporter(): BelongsTo
+    {
+        return $this->belongsTo(User::class, 'reporter_id');
+    }
+
+    public function reportedUser(): BelongsTo
+    {
+        return $this->belongsTo(User::class, 'reported_user_id');
+    }
+}
diff --git a/database/migrations/2026_08_27_161100_create_chat_reports_table.php b/database/migrations/2026_08_27_161100_create_chat_reports_table.php
new file mode 100644
index 0000000..c3ca716
--- /dev/null
+++ b/database/migrations/2026_08_27_161100_create_chat_reports_table.php
@@ -0,0 +1,38 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('chat_reports', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('reporter_id')->nullable()->constrained('users')->nullOnDelete();
+            $table->foreignId('reported_user_id')->nullable()->constrained('users')->nullOnDelete();
+            $table->string('reported_user_name')->nullable();
+            $table->string('reported_user_username')->nullable();
+            $table->text('message_content');
+            $table->timestamp('message_sent_at')->nullable();
+            $table->string('reason', 255)->nullable();
+            $table->string('status', 50)->default('pending'); // pending, reviewed, dismissed
+            $table->timestamps();
+
+            $table->index('status');
+            $table->index('created_at');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('chat_reports');
+    }
+};
diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index 88bec86..bdfdaa2 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Head, Link, usePage } from '@inertiajs/vue3';
-import { Send, Trash2, Lock, Loader2, LogIn, ArrowDown, ShieldAlert, Pencil } from 'lucide-vue-next';
+import { Send, Trash2, Lock, Loader2, LogIn, ArrowDown, ShieldAlert, Pencil, Flag, Check, X } from 'lucide-vue-next';
 import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
 import VerifiedBadge from '@/components/VerifiedBadge.vue';
 import { getEcho } from '@/lib/echo';
@@ -257,6 +257,85 @@ const deleteMessage = async (messageId: number) => {
     }
 };
 
+// Report message state & methods
+const reportingMessage = ref<ChatMessageItem | null>(null);
+const reportReason = ref('Inappropriate message or conduct');
+const isSubmittingReport = ref(false);
+const reportSuccessMessage = ref<string | null>(null);
+const reportErrorMessage = ref<string | null>(null);
+
+const reportReasons = [
+    'Inappropriate message or conduct',
+    'Spam or advertisement',
+    'Harassment or hate speech',
+    'False information / Exam leak attempt',
+    'Other',
+];
+
+const openReportModal = (message: ChatMessageItem) => {
+    if (!currentUser.value) {
+        alert('Please sign in to report a message.');
+        return;
+    }
+    reportingMessage.value = message;
+    reportReason.value = 'Inappropriate message or conduct';
+    reportSuccessMessage.value = null;
+    reportErrorMessage.value = null;
+};
+
+const closeReportModal = () => {
+    reportingMessage.value = null;
+    reportSuccessMessage.value = null;
+    reportErrorMessage.value = null;
+    isSubmittingReport.value = false;
+};
+
+const submitReport = async () => {
+    if (!reportingMessage.value || isSubmittingReport.value) return;
+
+    isSubmittingReport.value = true;
+    reportSuccessMessage.value = null;
+    reportErrorMessage.value = null;
+
+    try {
+        const token = (
+            document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement
+        )?.content;
+
+        const res = await fetch('/api/chat/reports', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                Accept: 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-TOKEN': token || '',
+            },
+            body: JSON.stringify({
+                reported_user_id: reportingMessage.value.user.id,
+                reported_user_name: reportingMessage.value.user.name,
+                reported_user_username: reportingMessage.value.user.username,
+                message_content: reportingMessage.value.content,
+                message_sent_at: reportingMessage.value.created_at,
+                reason: reportReason.value,
+            }),
+        });
+
+        if (res.ok) {
+            reportSuccessMessage.value = 'Thank you. The report has been sent to our moderators.';
+            setTimeout(() => {
+                closeReportModal();
+            }, 1800);
+        } else {
+            const err = await res.json();
+            reportErrorMessage.value = err.message || 'Failed to submit report.';
+        }
+    } catch {
+        reportErrorMessage.value = 'Network error. Please try again.';
+    } finally {
+        isSubmittingReport.value = false;
+    }
+};
+
 const formatTime = (isoString: string) => {
     try {
         const date = new Date(isoString);
@@ -457,6 +536,20 @@ onUnmounted(() => {
                                         <Pencil class="h-3 w-3" />
                                     </Link>
 
+                                    <!-- Report Button (for non-author users) -->
+                                    <button
+                                        v-if="
+                                            currentUser &&
+                                            Number(currentUser.id) !==
+                                                Number(msg.user.id)
+                                        "
+                                        @click="openReportModal(msg)"
+                                        class="cursor-pointer rounded-md p-1 text-slate-400 opacity-100 transition hover:bg-amber-50 hover:text-amber-600 sm:opacity-0 sm:group-hover:opacity-100 dark:text-gray-500 dark:hover:bg-amber-950/40 dark:hover:text-amber-400"
+                                        title="Report message"
+                                    >
+                                        <Flag class="h-3 w-3" />
+                                    </button>
+
                                     <!-- Delete Button -->
                                     <button
                                         v-if="
@@ -580,5 +673,113 @@ onUnmounted(() => {
                 </div>
             </div>
         </div>
+
+        <!-- Report Modal -->
+        <div
+            v-if="reportingMessage"
+            class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs"
+            @click.self="closeReportModal"
+        >
+            <div
+                class="w-full max-w-md rounded-2xl border border-slate-200 bg-white p-5 shadow-xl sm:p-6 dark:border-gray-800 dark:bg-gray-900"
+            >
+                <div class="flex items-center justify-between border-b border-slate-100 pb-3.5 dark:border-gray-800">
+                    <div class="flex items-center gap-2">
+                        <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-50 text-amber-600 dark:bg-amber-950/60 dark:text-amber-400">
+                            <Flag class="h-4 w-4" />
+                        </div>
+                        <h3 class="text-sm font-bold text-slate-900 dark:text-gray-100">
+                            Report Message
+                        </h3>
+                    </div>
+                    <button
+                        type="button"
+                        @click="closeReportModal"
+                        class="cursor-pointer rounded-lg p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                    >
+                        <X class="h-4 w-4" />
+                    </button>
+                </div>
+
+                <!-- Success State -->
+                <div
+                    v-if="reportSuccessMessage"
+                    class="my-6 flex flex-col items-center justify-center py-4 text-center"
+                >
+                    <div class="flex h-12 w-12 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-950/60 dark:text-emerald-400">
+                        <Check class="h-6 w-6" />
+                    </div>
+                    <p class="mt-3 text-xs font-semibold text-emerald-700 dark:text-emerald-300">
+                        {{ reportSuccessMessage }}
+                    </p>
+                </div>
+
+                <!-- Form Content -->
+                <form v-else @submit.prevent="submitReport" class="mt-4 space-y-4">
+                    <!-- Error notice if duplicate or validation fails -->
+                    <div
+                        v-if="reportErrorMessage"
+                        class="rounded-xl border border-rose-200 bg-rose-50/80 p-3 text-xs font-semibold text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/50 dark:text-rose-300"
+                    >
+                        {{ reportErrorMessage }}
+                    </div>
+
+                    <!-- Message Preview Snapshot -->
+                    <div class="rounded-xl border border-slate-200/80 bg-slate-50/80 p-3 dark:border-gray-800 dark:bg-gray-800/60">
+                        <div class="flex items-center justify-between text-[11px] text-slate-500 dark:text-gray-400">
+                            <span class="font-semibold text-slate-700 dark:text-gray-300">
+                                {{ reportingMessage.user.name }} (@{{ reportingMessage.user.username }})
+                            </span>
+                            <span>{{ formatTime(reportingMessage.created_at) }}</span>
+                        </div>
+                        <p class="mt-1.5 text-xs text-slate-800 break-words dark:text-gray-200">
+                            "{{ reportingMessage.content }}"
+                        </p>
+                    </div>
+
+                    <!-- Reason Selection -->
+                    <div>
+                        <label class="mb-1.5 block text-xs font-semibold text-slate-700 dark:text-gray-300">
+                            Why are you reporting this message?
+                        </label>
+                        <select
+                            v-model="reportReason"
+                            class="w-full rounded-xl border border-slate-200 bg-slate-50/80 px-3.5 py-2 text-xs font-medium text-slate-800 transition outline-none focus:border-indigo-500 focus:bg-white dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
+                        >
+                            <option
+                                v-for="reason in reportReasons"
+                                :key="reason"
+                                :value="reason"
+                                class="bg-white text-slate-800 dark:bg-gray-800 dark:text-gray-200"
+                            >
+                                {{ reason }}
+                            </option>
+                        </select>
+                    </div>
+
+                    <!-- Action Buttons -->
+                    <div class="flex items-center justify-end gap-2 pt-2">
+                        <button
+                            type="button"
+                            @click="closeReportModal"
+                            class="cursor-pointer rounded-xl border border-slate-200 bg-transparent px-4 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="submit"
+                            :disabled="isSubmittingReport"
+                            class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl bg-rose-600 px-4 py-2 text-xs font-semibold text-white shadow-xs transition hover:bg-rose-700 active:scale-95 disabled:opacity-50 dark:bg-rose-500 dark:hover:bg-rose-600"
+                        >
+                            <Loader2
+                                v-if="isSubmittingReport"
+                                class="h-3.5 w-3.5 animate-spin"
+                            />
+                            <span>Submit Report</span>
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
     </main>
 </template>
diff --git a/resources/js/pages/admin/ChatSettings.vue b/resources/js/pages/admin/ChatSettings.vue
index 1d45157..992a84a 100644
--- a/resources/js/pages/admin/ChatSettings.vue
+++ b/resources/js/pages/admin/ChatSettings.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Head, useForm, router } from '@inertiajs/vue3';
+import { Head, Link, useForm, router } from '@inertiajs/vue3';
 import {
     MessageCircle,
     Save,
@@ -8,6 +8,7 @@ import {
     Trash2,
     Loader2,
     Activity,
+    Flag,
 } from 'lucide-vue-next';
 import AdminLayout from '@/layouts/AdminLayout.vue';
 
@@ -21,6 +22,7 @@ const props = defineProps<{
     };
     totalMessages: number;
     recentMessagesCount: number;
+    pendingReportsCount?: number;
 }>();
 
 const form = useForm({
@@ -109,6 +111,31 @@ const cooldownPresets = [
             </div>
         </div>
 
+        <!-- Global Chat Management Route Tabs -->
+        <div class="flex items-center gap-2 border-b border-slate-200 dark:border-gray-800">
+            <Link
+                href="/admin/chat"
+                class="flex items-center gap-2 border-b-2 px-4 py-2.5 text-xs font-bold transition-all border-indigo-600 text-indigo-600 dark:border-indigo-400 dark:text-indigo-400"
+            >
+                <MessageCircle class="h-4 w-4" />
+                <span>Chat Configuration</span>
+            </Link>
+
+            <Link
+                href="/admin/chat/reports"
+                class="flex items-center gap-2 border-b-2 border-transparent px-4 py-2.5 text-xs font-bold text-slate-500 transition-all hover:text-slate-700 dark:text-gray-400 dark:hover:text-gray-200"
+            >
+                <Flag class="h-4 w-4 text-rose-500" />
+                <span>Reported Messages</span>
+                <span
+                    v-if="pendingReportsCount && pendingReportsCount > 0"
+                    class="rounded-full bg-rose-500 px-1.5 py-0.2 text-[10px] font-bold text-white"
+                >
+                    {{ pendingReportsCount }}
+                </span>
+            </Link>
+        </div>
+
         <!-- Metric Statistics Cards -->
         <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
             <div
@@ -172,7 +199,7 @@ const cooldownPresets = [
             </div>
         </div>
 
-        <!-- Main Configuration Form -->
+        <!-- Chat Configuration Form -->
         <form
             @submit.prevent="submitSettings"
             class="space-y-6 rounded-2xl border border-slate-200/80 bg-white p-5 sm:p-7 dark:border-gray-800 dark:bg-gray-900"
diff --git a/resources/js/pages/admin/chat/Reports.vue b/resources/js/pages/admin/chat/Reports.vue
new file mode 100644
index 0000000..7f3793e
--- /dev/null
+++ b/resources/js/pages/admin/chat/Reports.vue
@@ -0,0 +1,407 @@
+<script setup lang="ts">
+import { Head, Link, router } from '@inertiajs/vue3';
+import {
+    Flag,
+    ShieldAlert,
+    Pencil,
+    CheckCircle,
+    XCircle,
+    Trash2,
+    Clock,
+    CheckCheck,
+    MessageCircle,
+} from 'lucide-vue-next';
+import { ref, computed } from 'vue';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+
+defineOptions({ layout: AdminLayout });
+
+interface ReportItem {
+    id: number;
+    reporter_id: number | null;
+    reporter: {
+        id: number;
+        name: string;
+        username: string;
+    } | null;
+    reported_user_id: number | null;
+    reported_user_name: string | null;
+    reported_user_username: string | null;
+    reported_user: {
+        id: number;
+        name: string;
+        username: string;
+        chat_banned_until: string | null;
+        is_chat_banned: boolean;
+    } | null;
+    message_content: string;
+    message_sent_at: string | null;
+    reason: string | null;
+    status: 'pending' | 'reviewed' | 'dismissed';
+    created_at: string;
+}
+
+const props = defineProps<{
+    reports: ReportItem[];
+    pendingCount: number;
+    reviewedCount: number;
+    dismissedCount: number;
+}>();
+
+const currentFilter = ref<'all' | 'pending' | 'reviewed' | 'dismissed'>('pending');
+
+const filteredReports = computed(() => {
+    if (currentFilter.value === 'all') {
+        return props.reports;
+    }
+    return props.reports.filter((r) => r.status === currentFilter.value);
+});
+
+const updateReportStatus = (reportId: number, status: string) => {
+    router.patch(
+        `/admin/chat/reports/${reportId}/status`,
+        { status },
+        { preserveScroll: true },
+    );
+};
+
+const deleteReport = (reportId: number) => {
+    if (confirm('Are you sure you want to permanently delete this report record?')) {
+        router.delete(`/admin/chat/reports/${reportId}`, {
+            preserveScroll: true,
+        });
+    }
+};
+
+const formatDate = (isoString?: string | null) => {
+    if (!isoString) return '';
+    try {
+        const d = new Date(isoString);
+        return d.toLocaleString([], {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    } catch {
+        return '';
+    }
+};
+</script>
+
+<template>
+    <Head title="Reported Chat Messages - Staff Panel" />
+
+    <div class="space-y-6">
+        <!-- Header -->
+        <div
+            class="flex flex-col gap-3 border-b border-slate-100 pb-5 sm:flex-row sm:items-center sm:justify-between dark:border-gray-800"
+        >
+            <div class="flex items-center gap-3">
+                <div
+                    class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-rose-50 text-rose-600 dark:bg-rose-950/60 dark:text-rose-400"
+                >
+                    <Flag class="h-5 w-5" />
+                </div>
+                <div>
+                    <h1
+                        class="text-xl font-bold tracking-tight text-slate-900 sm:text-2xl dark:text-gray-100"
+                    >
+                        Reported Chat Messages
+                    </h1>
+                    <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
+                        Review community reports, snapshot of reported messages, and moderate disruptive accounts.
+                    </p>
+                </div>
+            </div>
+
+        </div>
+
+        <!-- Global Chat Management Route Tabs -->
+        <div class="flex items-center gap-2 border-b border-slate-200 dark:border-gray-800">
+            <Link
+                href="/admin/chat"
+                class="flex items-center gap-2 border-b-2 border-transparent px-4 py-2.5 text-xs font-bold text-slate-500 transition-all hover:text-slate-700 dark:text-gray-400 dark:hover:text-gray-200"
+            >
+                <MessageCircle class="h-4 w-4" />
+                <span>Chat Configuration</span>
+            </Link>
+
+            <Link
+                href="/admin/chat/reports"
+                class="flex items-center gap-2 border-b-2 border-rose-600 px-4 py-2.5 text-xs font-bold text-rose-600 transition-all dark:border-rose-400 dark:text-rose-400"
+            >
+                <Flag class="h-4 w-4 text-rose-500" />
+                <span>Reported Messages</span>
+                <span
+                    v-if="pendingCount > 0"
+                    class="rounded-full bg-rose-500 px-1.5 py-0.2 text-[10px] font-bold text-white"
+                >
+                    {{ pendingCount }}
+                </span>
+            </Link>
+        </div>
+
+        <!-- Metric Statistics Cards -->
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <div
+                @click="currentFilter = 'pending'"
+                class="cursor-pointer rounded-2xl border p-4 transition-all"
+                :class="
+                    currentFilter === 'pending'
+                        ? 'border-rose-300 bg-rose-50/50 ring-2 ring-rose-500/20 dark:border-rose-800 dark:bg-rose-950/30'
+                        : 'border-slate-100 bg-white hover:border-slate-200 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700'
+                "
+            >
+                <div class="flex items-center justify-between">
+                    <span class="text-xs font-semibold text-slate-500 dark:text-gray-400">
+                        Pending Review
+                    </span>
+                    <Clock class="h-4 w-4 text-rose-500" />
+                </div>
+                <p class="mt-2 text-2xl font-bold text-slate-900 dark:text-gray-100">
+                    {{ pendingCount }}
+                </p>
+                <span class="text-[11px] text-slate-400 dark:text-gray-500">Requires moderation action</span>
+            </div>
+
+            <div
+                @click="currentFilter = 'reviewed'"
+                class="cursor-pointer rounded-2xl border p-4 transition-all"
+                :class="
+                    currentFilter === 'reviewed'
+                        ? 'border-emerald-300 bg-emerald-50/50 ring-2 ring-emerald-500/20 dark:border-emerald-800 dark:bg-emerald-950/30'
+                        : 'border-slate-100 bg-white hover:border-slate-200 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700'
+                "
+            >
+                <div class="flex items-center justify-between">
+                    <span class="text-xs font-semibold text-slate-500 dark:text-gray-400">
+                        Resolved
+                    </span>
+                    <CheckCheck class="h-4 w-4 text-emerald-500" />
+                </div>
+                <p class="mt-2 text-2xl font-bold text-slate-900 dark:text-gray-100">
+                    {{ reviewedCount }}
+                </p>
+                <span class="text-[11px] text-slate-400 dark:text-gray-500">Reviewed & resolved reports</span>
+            </div>
+
+            <div
+                @click="currentFilter = 'dismissed'"
+                class="cursor-pointer rounded-2xl border p-4 transition-all"
+                :class="
+                    currentFilter === 'dismissed'
+                        ? 'border-slate-400 bg-slate-100/70 ring-2 ring-slate-400/20 dark:border-gray-600 dark:bg-gray-800'
+                        : 'border-slate-100 bg-white hover:border-slate-200 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700'
+                "
+            >
+                <div class="flex items-center justify-between">
+                    <span class="text-xs font-semibold text-slate-500 dark:text-gray-400">
+                        Dismissed
+                    </span>
+                    <XCircle class="h-4 w-4 text-slate-400 dark:text-gray-400" />
+                </div>
+                <p class="mt-2 text-2xl font-bold text-slate-900 dark:text-gray-100">
+                    {{ dismissedCount }}
+                </p>
+                <span class="text-[11px] text-slate-400 dark:text-gray-500">Ignored or invalid reports</span>
+            </div>
+        </div>
+
+        <!-- Filter Sub-Tabs -->
+        <div class="flex flex-wrap items-center gap-2 border-b border-slate-200 pb-3 dark:border-gray-800">
+            <button
+                type="button"
+                @click="currentFilter = 'all'"
+                class="cursor-pointer rounded-xl px-3 py-1.5 text-xs font-bold transition-all"
+                :class="
+                    currentFilter === 'all'
+                        ? 'bg-indigo-600 text-white dark:bg-indigo-500'
+                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
+                "
+            >
+                All ({{ reports.length }})
+            </button>
+
+            <button
+                type="button"
+                @click="currentFilter = 'pending'"
+                class="cursor-pointer rounded-xl px-3 py-1.5 text-xs font-bold transition-all"
+                :class="
+                    currentFilter === 'pending'
+                        ? 'bg-rose-600 text-white dark:bg-rose-500'
+                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
+                "
+            >
+                Pending ({{ pendingCount }})
+            </button>
+
+            <button
+                type="button"
+                @click="currentFilter = 'reviewed'"
+                class="cursor-pointer rounded-xl px-3 py-1.5 text-xs font-bold transition-all"
+                :class="
+                    currentFilter === 'reviewed'
+                        ? 'bg-emerald-600 text-white dark:bg-emerald-500'
+                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
+                "
+            >
+                Resolved ({{ reviewedCount }})
+            </button>
+
+            <button
+                type="button"
+                @click="currentFilter = 'dismissed'"
+                class="cursor-pointer rounded-xl px-3 py-1.5 text-xs font-bold transition-all"
+                :class="
+                    currentFilter === 'dismissed'
+                        ? 'bg-slate-700 text-white dark:bg-gray-700'
+                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
+                "
+            >
+                Dismissed ({{ dismissedCount }})
+            </button>
+        </div>
+
+        <!-- Reports List Feed -->
+        <div class="space-y-4">
+            <div
+                v-if="filteredReports.length === 0"
+                class="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200 bg-slate-50/50 py-16 text-center dark:border-gray-800 dark:bg-gray-900/40"
+            >
+                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-2xs dark:bg-gray-800 dark:text-gray-400">
+                    <Flag class="h-6 w-6 text-slate-400 dark:text-gray-500" />
+                </div>
+                <h3 class="mt-3 text-sm font-bold text-slate-800 dark:text-gray-200">
+                    No {{ currentFilter !== 'all' ? currentFilter : '' }} reports found
+                </h3>
+                <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
+                    Everything looks clean for this filter criteria.
+                </p>
+            </div>
+
+            <div v-else class="space-y-3.5">
+                <div
+                    v-for="report in filteredReports"
+                    :key="report.id"
+                    class="rounded-2xl border p-4.5 transition-colors sm:p-5"
+                    :class="[
+                        report.status === 'pending'
+                            ? 'border-rose-200 bg-white shadow-2xs dark:border-rose-900/50 dark:bg-gray-900'
+                            : 'border-slate-200/80 bg-slate-50/60 dark:border-gray-800 dark:bg-gray-900/40',
+                    ]"
+                >
+                    <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                        <!-- Left: Reporter & Reported User info -->
+                        <div class="space-y-1.5">
+                            <div class="flex flex-wrap items-center gap-2">
+                                <span
+                                    class="inline-flex items-center rounded-md px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider"
+                                    :class="
+                                        report.status === 'pending'
+                                            ? 'bg-rose-100 text-rose-700 dark:bg-rose-950/70 dark:text-rose-300'
+                                            : report.status === 'reviewed'
+                                              ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/70 dark:text-emerald-300'
+                                              : 'bg-slate-200 text-slate-700 dark:bg-gray-800 dark:text-gray-300'
+                                    "
+                                >
+                                    {{ report.status }}
+                                </span>
+
+                                <span class="text-xs text-slate-400 dark:text-gray-500">
+                                    Reported {{ formatDate(report.created_at) }}
+                                </span>
+
+                                <span v-if="report.reporter" class="text-xs text-slate-500 dark:text-gray-400">
+                                    by <strong class="text-slate-700 dark:text-gray-300">{{ report.reporter.name }}</strong>
+                                    <span v-if="report.reporter.username" class="text-slate-400"> (@{{ report.reporter.username }})</span>
+                                </span>
+                            </div>
+
+                            <div class="flex items-center gap-2 pt-0.5">
+                                <span class="text-xs font-semibold text-slate-500 dark:text-gray-400">Reason:</span>
+                                <span class="rounded-md bg-amber-50 px-2 py-0.5 text-xs font-bold text-amber-800 dark:bg-amber-950/50 dark:text-amber-300">
+                                    {{ report.reason || 'Not specified' }}
+                                </span>
+                            </div>
+                        </div>
+
+                        <!-- Right: Action buttons & Moderation shortcut -->
+                        <div class="flex flex-wrap items-center gap-2">
+                            <!-- Direct link to edit/ban reported user -->
+                            <Link
+                                v-if="report.reported_user_id"
+                                :href="`/admin/users/edit/${report.reported_user_id}`"
+                                class="inline-flex items-center gap-1.5 rounded-xl bg-rose-50 px-3 py-1.5 text-xs font-bold text-rose-700 transition hover:bg-rose-100 dark:bg-rose-950/60 dark:text-rose-300 dark:hover:bg-rose-900/60"
+                                title="Open user profile to ban or moderate"
+                            >
+                                <Pencil class="h-3 w-3" />
+                                <span>Edit / Ban Author</span>
+                            </Link>
+
+                            <!-- Mark Status Buttons -->
+                            <button
+                                v-if="report.status !== 'reviewed'"
+                                type="button"
+                                @click="updateReportStatus(report.id, 'reviewed')"
+                                class="inline-flex cursor-pointer items-center gap-1 rounded-xl bg-emerald-50 px-3 py-1.5 text-xs font-semibold text-emerald-700 transition hover:bg-emerald-100 dark:bg-emerald-950/60 dark:text-emerald-300 dark:hover:bg-emerald-900/60"
+                            >
+                                <CheckCircle class="h-3 w-3" />
+                                <span>Resolve</span>
+                            </button>
+
+                            <button
+                                v-if="report.status !== 'dismissed'"
+                                type="button"
+                                @click="updateReportStatus(report.id, 'dismissed')"
+                                class="inline-flex cursor-pointer items-center gap-1 rounded-xl bg-slate-100 px-3 py-1.5 text-xs font-semibold text-slate-700 transition hover:bg-slate-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                            >
+                                <XCircle class="h-3 w-3" />
+                                <span>Dismiss</span>
+                            </button>
+
+                            <!-- Delete report record -->
+                            <button
+                                type="button"
+                                @click="deleteReport(report.id)"
+                                class="cursor-pointer rounded-xl p-1.5 text-slate-400 transition hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
+                                title="Delete Report Record"
+                            >
+                                <Trash2 class="h-3.5 w-3.5" />
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Message Snapshot Content Box -->
+                    <div class="mt-3.5 rounded-xl border border-slate-200/80 bg-slate-50/70 p-3.5 dark:border-gray-800 dark:bg-gray-800/60">
+                        <div class="flex items-center justify-between border-b border-slate-200/60 pb-2 text-[11px] text-slate-500 dark:border-gray-700/60 dark:text-gray-400">
+                            <div>
+                                <span class="font-bold text-slate-800 dark:text-gray-200">
+                                    Message Author: {{ report.reported_user_name || report.reported_user?.name || 'Unknown' }}
+                                </span>
+                                <span v-if="report.reported_user_username || report.reported_user?.username" class="ml-1 text-slate-400">
+                                    (@{{ report.reported_user_username || report.reported_user?.username }})
+                                </span>
+                                <span
+                                    v-if="report.reported_user?.is_chat_banned"
+                                    class="ml-2 rounded-sm bg-rose-100 px-1.5 py-0.5 text-[9px] font-bold text-rose-700 dark:bg-rose-900/60 dark:text-rose-300"
+                                >
+                                    Currently Banned
+                                </span>
+                            </div>
+
+                            <span v-if="report.message_sent_at">
+                                Sent {{ formatDate(report.message_sent_at) }}
+                            </span>
+                        </div>
+
+                        <p class="mt-2 text-xs leading-relaxed font-medium text-slate-900 break-words dark:text-gray-100">
+                            "{{ report.message_content }}"
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/routes/admin.php b/routes/admin.php
index ab9d605..813ce34 100644
--- a/routes/admin.php
+++ b/routes/admin.php
@@ -115,6 +115,9 @@
 // Chat Management & Settings
 Route::middleware('permission:manage chat')->group(function () {
     Route::get('/chat', [ChatSettingsController::class, 'edit'])->name('chat.edit');
+    Route::get('/chat/reports', [ChatSettingsController::class, 'reports'])->name('chat.reports.index');
     Route::post('/chat/settings', [ChatSettingsController::class, 'update'])->name('chat.settings.update');
     Route::post('/chat/clear', [ChatSettingsController::class, 'clearMessages'])->name('chat.clear');
+    Route::patch('/chat/reports/{report}/status', [ChatSettingsController::class, 'updateReportStatus'])->name('chat.reports.update-status');
+    Route::delete('/chat/reports/{report}', [ChatSettingsController::class, 'deleteReport'])->name('chat.reports.destroy');
 });
diff --git a/routes/web.php b/routes/web.php
index 81af179..eeec2f7 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -38,6 +38,7 @@
     // Global Chat Actions
     Route::post('/api/chat/messages', [ChatController::class, 'store'])->name('chat.messages.store');
     Route::delete('/api/chat/messages/{message}', [ChatController::class, 'destroy'])->name('chat.messages.destroy');
+    Route::post('/api/chat/reports', [ChatController::class, 'report'])->name('chat.reports.store');
 });
 
 // Global Chat Messages List (Public Read)

From fc5592b295cbe9063e0889d0e0ead8dddc3c2c3d Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 22:39:19 +0600
Subject: [PATCH 04/15] feat(chat): add message reply support with ellipsized
 snapshot and interactive jump

---
 app/Events/ChatMessageSent.php                |   2 +
 app/Http/Controllers/ChatController.php       |  19 +++
 app/Models/ChatMessage.php                    |   2 +
 ...dd_reply_fields_to_chat_messages_table.php |  29 +++++
 resources/js/pages/Chat/Index.vue             | 108 ++++++++++++++++--
 5 files changed, 150 insertions(+), 10 deletions(-)
 create mode 100644 database/migrations/2026_08_27_163500_add_reply_fields_to_chat_messages_table.php

diff --git a/app/Events/ChatMessageSent.php b/app/Events/ChatMessageSent.php
index ad7f18c..1d85bd6 100644
--- a/app/Events/ChatMessageSent.php
+++ b/app/Events/ChatMessageSent.php
@@ -25,6 +25,8 @@ public function __construct(ChatMessage $chatMessage)
         $this->message = [
             'id' => $chatMessage->id,
             'content' => $chatMessage->content,
+            'reply_to_id' => $chatMessage->reply_to_id,
+            'reply_to_content' => $chatMessage->reply_to_content,
             'created_at' => $chatMessage->created_at->toIso8601String(),
             'user' => [
                 'id' => $chatMessage->user->id,
diff --git a/app/Http/Controllers/ChatController.php b/app/Http/Controllers/ChatController.php
index cca5d22..932e0f3 100644
--- a/app/Http/Controllers/ChatController.php
+++ b/app/Http/Controllers/ChatController.php
@@ -8,6 +8,7 @@
 use App\Models\ChatMessage;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\RateLimiter;
+use Illuminate\Support\Str;
 use Inertia\Inertia;
 
 class ChatController extends Controller
@@ -52,6 +53,8 @@ public function index(Request $request)
             ->map(fn (ChatMessage $msg) => [
                 'id' => $msg->id,
                 'content' => $msg->content,
+                'reply_to_id' => $msg->reply_to_id,
+                'reply_to_content' => $msg->reply_to_content,
                 'created_at' => $msg->created_at->toIso8601String(),
                 'user' => [
                     'id' => $msg->user->id,
@@ -134,13 +137,27 @@ public function store(Request $request)
 
         $validated = $request->validate([
             'content' => ['required', 'string', 'max:280'],
+            'reply_to_id' => ['nullable', 'integer'],
         ]);
 
         $content = trim($validated['content']);
+        $replyToId = $validated['reply_to_id'] ?? null;
+        $replyToContent = null;
+
+        if ($replyToId) {
+            $parentMessage = ChatMessage::find($replyToId);
+            if ($parentMessage) {
+                $replyToContent = Str::limit($parentMessage->content, 97, '...');
+            } else {
+                $replyToId = null;
+            }
+        }
 
         $message = ChatMessage::create([
             'user_id' => $user->id,
             'content' => $content,
+            'reply_to_id' => $replyToId,
+            'reply_to_content' => $replyToContent,
         ]);
 
         // Record rate limit for configured cooldown seconds
@@ -163,6 +180,8 @@ public function store(Request $request)
         return response()->json([
             'id' => $message->id,
             'content' => $message->content,
+            'reply_to_id' => $message->reply_to_id,
+            'reply_to_content' => $message->reply_to_content,
             'created_at' => $message->created_at->toIso8601String(),
             'user' => [
                 'id' => $message->user->id,
diff --git a/app/Models/ChatMessage.php b/app/Models/ChatMessage.php
index 9f2f71f..9f87c1d 100644
--- a/app/Models/ChatMessage.php
+++ b/app/Models/ChatMessage.php
@@ -10,6 +10,8 @@ class ChatMessage extends Model
     protected $fillable = [
         'user_id',
         'content',
+        'reply_to_id',
+        'reply_to_content',
     ];
 
     public function user(): BelongsTo
diff --git a/database/migrations/2026_08_27_163500_add_reply_fields_to_chat_messages_table.php b/database/migrations/2026_08_27_163500_add_reply_fields_to_chat_messages_table.php
new file mode 100644
index 0000000..43a6481
--- /dev/null
+++ b/database/migrations/2026_08_27_163500_add_reply_fields_to_chat_messages_table.php
@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('chat_messages', function (Blueprint $table) {
+            $table->unsignedBigInteger('reply_to_id')->nullable()->after('user_id');
+            $table->string('reply_to_content', 100)->nullable()->after('reply_to_id');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('chat_messages', function (Blueprint $table) {
+            $table->dropColumn(['reply_to_id', 'reply_to_content']);
+        });
+    }
+};
diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index bdfdaa2..b44f674 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Head, Link, usePage } from '@inertiajs/vue3';
-import { Send, Trash2, Lock, Loader2, LogIn, ArrowDown, ShieldAlert, Pencil, Flag, Check, X } from 'lucide-vue-next';
+import { Send, Trash2, Lock, Loader2, LogIn, ArrowDown, ShieldAlert, Pencil, Flag, Check, X, Reply } from 'lucide-vue-next';
 import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
 import VerifiedBadge from '@/components/VerifiedBadge.vue';
 import { getEcho } from '@/lib/echo';
@@ -19,6 +19,8 @@ interface ChatUser {
 interface ChatMessageItem {
     id: number;
     content: string;
+    reply_to_id?: number | null;
+    reply_to_content?: string | null;
     created_at: string;
     user: ChatUser;
 }
@@ -50,7 +52,36 @@ const canDelete = ref(props.chatState.can_delete);
 const activeCooldownSeconds = ref(props.chatState.cooldown_seconds ?? 30);
 
 const messagesContainerRef = ref<HTMLElement | null>(null);
+const messageInputRef = ref<HTMLInputElement | null>(null);
 const showScrollButton = ref(false);
+const highlightedMessageId = ref<number | null>(null);
+
+// Reply State
+const activeReplyTo = ref<ChatMessageItem | null>(null);
+
+const startReply = (msg: ChatMessageItem) => {
+    activeReplyTo.value = msg;
+    nextTick(() => {
+        messageInputRef.value?.focus();
+    });
+};
+
+const cancelReply = () => {
+    activeReplyTo.value = null;
+};
+
+const scrollToMessage = (messageId: number) => {
+    const el = document.getElementById(`chat-msg-${messageId}`);
+    if (el) {
+        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        highlightedMessageId.value = messageId;
+        setTimeout(() => {
+            if (highlightedMessageId.value === messageId) {
+                highlightedMessageId.value = null;
+            }
+        }, 2000);
+    }
+};
 
 // Cooldown logic
 const cooldownSeconds = ref(0);
@@ -188,6 +219,7 @@ const sendMessage = async () => {
         const token = (
             document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement
         )?.content;
+        const replyToId = activeReplyTo.value ? activeReplyTo.value.id : null;
         const res = await fetch('/api/chat/messages', {
             method: 'POST',
             headers: {
@@ -196,7 +228,10 @@ const sendMessage = async () => {
                 'X-Requested-With': 'XMLHttpRequest',
                 'X-CSRF-TOKEN': token || '',
             },
-            body: JSON.stringify({ content }),
+            body: JSON.stringify({
+                content,
+                reply_to_id: replyToId,
+            }),
         });
 
         if (res.ok) {
@@ -211,6 +246,7 @@ const sendMessage = async () => {
             }
 
             inputContent.value = '';
+            activeReplyTo.value = null;
 
             if (activeCooldownSeconds.value > 0) {
                 startCooldown(activeCooldownSeconds.value);
@@ -452,18 +488,22 @@ onUnmounted(() => {
 
                     <!-- Individual Message Row (Distinctly Highlighted for currentUser) -->
                     <div
-                        class="group -mx-1.5 flex items-start gap-3 rounded-xl px-2.5 py-2.5 text-left transition sm:-mx-2 sm:px-3 sm:py-3"
-                        :class="
+                        :id="`chat-msg-${msg.id}`"
+                        class="group flex items-start gap-3 rounded-2xl p-2.5 transition-all duration-300 sm:p-3"
+                        :class="[
                             currentUser &&
                             Number(currentUser.id) === Number(msg.user.id)
-                                ? 'bg-indigo-50/60 hover:bg-indigo-50/90 dark:bg-indigo-950/30 dark:hover:bg-indigo-950/45'
-                                : 'hover:bg-slate-50/60 dark:hover:bg-gray-800/35'
-                        "
+                                ? 'bg-indigo-50/50 dark:bg-indigo-950/20'
+                                : 'hover:bg-slate-50 dark:hover:bg-gray-800/40',
+                            highlightedMessageId === msg.id
+                                ? 'ring-2 ring-indigo-500 bg-indigo-100/70 dark:bg-indigo-950/60'
+                                : '',
+                        ]"
                     >
                         <!-- User Avatar -->
                         <Link
                             :href="`/u/${msg.user.username}`"
-                            class="flex h-8.5 w-8.5 shrink-0 items-center justify-center overflow-hidden rounded-full font-semibold transition hover:ring-2 hover:ring-indigo-400 sm:h-9 sm:w-9"
+                            class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full font-semibold transition hover:ring-2 hover:ring-indigo-400 sm:h-9 sm:w-9"
                             :class="
                                 currentUser &&
                                 Number(currentUser.id) === Number(msg.user.id)
@@ -519,13 +559,24 @@ onUnmounted(() => {
                                     </span>
                                 </div>
 
-                                <div class="flex shrink-0 items-center gap-1.5">
+                                <div class="flex shrink-0 items-center gap-1">
                                     <span
                                         class="text-[10px] text-slate-400 sm:text-[11px] dark:text-gray-500"
                                     >
                                         {{ formatTime(msg.created_at) }}
                                     </span>
 
+                                    <!-- Reply Button -->
+                                    <button
+                                        v-if="currentUser && canPost"
+                                        type="button"
+                                        @click="startReply(msg)"
+                                        class="cursor-pointer rounded-md p-1 text-slate-400 opacity-100 transition hover:bg-indigo-50 hover:text-indigo-600 sm:opacity-0 sm:group-hover:opacity-100 dark:text-gray-500 dark:hover:bg-indigo-950/40 dark:hover:text-indigo-400"
+                                        title="Reply to message"
+                                    >
+                                        <Reply class="h-3 w-3" />
+                                    </button>
+
                                     <!-- Quick Admin Edit / Ban User Button -->
                                     <Link
                                         v-if="can('edit users')"
@@ -567,6 +618,20 @@ onUnmounted(() => {
                                 </div>
                             </div>
 
+                            <!-- Quoted Parent Snapshot (If Reply) -->
+                            <div
+                                v-if="msg.reply_to_content"
+                                @click="msg.reply_to_id ? scrollToMessage(msg.reply_to_id) : null"
+                                class="mt-1.5 flex items-center gap-1.5 rounded-lg border-l-2 border-indigo-500 bg-slate-100/70 px-2.5 py-1 text-[11px] text-slate-600 transition dark:border-indigo-400 dark:bg-gray-800/60 dark:text-gray-300"
+                                :class="msg.reply_to_id ? 'cursor-pointer hover:bg-indigo-50/60 dark:hover:bg-indigo-950/30' : ''"
+                                :title="msg.reply_to_id ? 'Click to jump to original message' : ''"
+                            >
+                                <Reply class="h-3 w-3 shrink-0 text-indigo-500 dark:text-indigo-400" />
+                                <span class="truncate italic">
+                                    "{{ msg.reply_to_content }}"
+                                </span>
+                            </div>
+
                             <!-- Message Text -->
                             <p
                                 class="mt-1 text-xs leading-relaxed break-words whitespace-pre-wrap sm:text-sm"
@@ -600,6 +665,28 @@ onUnmounted(() => {
             <div
                 class="border-t border-slate-100 bg-white p-3.5 sm:p-4 dark:border-gray-800 dark:bg-gray-900"
             >
+                <!-- Active Reply Banner -->
+                <div
+                    v-if="activeReplyTo"
+                    class="mb-2 flex items-center justify-between rounded-xl border border-indigo-100 bg-indigo-50/70 px-3 py-1.5 text-xs text-indigo-900 dark:border-indigo-900/50 dark:bg-indigo-950/40 dark:text-indigo-200"
+                >
+                    <div class="flex min-w-0 items-center gap-1.5 truncate">
+                        <Reply class="h-3.5 w-3.5 shrink-0 text-indigo-600 dark:text-indigo-400" />
+                        <span class="truncate">
+                            Replying to <strong class="font-semibold">{{ activeReplyTo.user.name }}</strong>:
+                            <span class="opacity-80 italic">"{{ activeReplyTo.content }}"</span>
+                        </span>
+                    </div>
+                    <button
+                        type="button"
+                        @click="cancelReply"
+                        class="cursor-pointer rounded-lg p-0.5 text-indigo-500 transition hover:bg-indigo-100 dark:text-indigo-400 dark:hover:bg-indigo-900/60"
+                        title="Cancel reply"
+                    >
+                        <X class="h-3.5 w-3.5" />
+                    </button>
+                </div>
+
                 <!-- Can Post -->
                 <form
                     v-if="canPost"
@@ -608,10 +695,11 @@ onUnmounted(() => {
                 >
                     <div class="relative flex-1">
                         <input
+                            ref="messageInputRef"
                             v-model="inputContent"
                             type="text"
                             :disabled="isSending || cooldownSeconds > 0"
-                            placeholder="Type a message..."
+                            :placeholder="activeReplyTo ? `Reply to ${activeReplyTo.user.name}...` : 'Type a message...'"
                             maxlength="280"
                             class="dark:border-gray-750 w-full rounded-xl border border-slate-200 bg-slate-50/70 px-4 py-2.5 text-xs text-slate-800 placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:outline-none disabled:opacity-60 sm:text-sm dark:border-gray-700/80 dark:bg-gray-800/80 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
                         />

From 913cc3282e1319c2c2165803d0f684c57fbb6116 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 22:41:30 +0600
Subject: [PATCH 05/15] fix(chat): restrict message deletion strictly to staff
 with manage chat permission

---
 app/Http/Controllers/ChatController.php |  4 ++--
 resources/js/pages/Chat/Index.vue       | 12 ++++--------
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/app/Http/Controllers/ChatController.php b/app/Http/Controllers/ChatController.php
index 932e0f3..21bdc3d 100644
--- a/app/Http/Controllers/ChatController.php
+++ b/app/Http/Controllers/ChatController.php
@@ -200,8 +200,8 @@ public function destroy(Request $request, ChatMessage $message)
         $user = $request->user();
         abort_unless($user, 401);
 
-        // Can delete if own message or has manage chat permission
-        if ($message->user_id !== $user->id && ! $user->can('manage chat')) {
+        // Only staff with manage chat permission can delete messages
+        if (! $user->can('manage chat')) {
             abort(403, 'Unauthorized');
         }
 
diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index b44f674..3057540 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -601,17 +601,13 @@ onUnmounted(() => {
                                         <Flag class="h-3 w-3" />
                                     </button>
 
-                                    <!-- Delete Button -->
+                                    <!-- Delete Button (Staff Only) -->
                                     <button
-                                        v-if="
-                                            canDelete ||
-                                            (currentUser &&
-                                                Number(currentUser.id) ===
-                                                    Number(msg.user.id))
-                                        "
+                                        v-if="canDelete"
+                                        type="button"
                                         @click="deleteMessage(msg.id)"
                                         class="cursor-pointer rounded-md p-1 text-slate-400 opacity-100 transition hover:bg-rose-50 hover:text-rose-600 sm:opacity-0 sm:group-hover:opacity-100 dark:text-gray-500 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
-                                        title="Delete message"
+                                        title="Delete message (Staff)"
                                     >
                                         <Trash2 class="h-3 w-3" />
                                     </button>

From f6383179aa3eac304836c822daf8f02fa0e9da09 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 22:43:16 +0600
Subject: [PATCH 06/15] feat(chat): prevent duplicate consecutive messages by
 the same user

---
 app/Http/Controllers/ChatController.php | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/app/Http/Controllers/ChatController.php b/app/Http/Controllers/ChatController.php
index 21bdc3d..3e8ea13 100644
--- a/app/Http/Controllers/ChatController.php
+++ b/app/Http/Controllers/ChatController.php
@@ -141,6 +141,18 @@ public function store(Request $request)
         ]);
 
         $content = trim($validated['content']);
+
+        // Prevent duplicate message sent twice in a streak by the same user
+        $lastMessage = ChatMessage::where('user_id', $user->id)
+            ->latest('id')
+            ->first();
+
+        if ($lastMessage && mb_strtolower($lastMessage->content) === mb_strtolower($content)) {
+            return response()->json([
+                'message' => 'You cannot send the exact same message twice in a row.',
+            ], 422);
+        }
+
         $replyToId = $validated['reply_to_id'] ?? null;
         $replyToContent = null;
 

From 2a1561eea7a5d348d910f3a937e9193461cb0917 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 22:46:27 +0600
Subject: [PATCH 07/15] feat(chat): make rolling message retention limit
 controllable via admin panel

---
 .../Admin/ChatSettingsController.php          |  6 ++
 app/Http/Controllers/ChatController.php       | 12 ++-
 resources/js/pages/Chat/Index.vue             |  6 +-
 resources/js/pages/admin/ChatSettings.vue     | 77 ++++++++++++++++++-
 4 files changed, 92 insertions(+), 9 deletions(-)

diff --git a/app/Http/Controllers/Admin/ChatSettingsController.php b/app/Http/Controllers/Admin/ChatSettingsController.php
index f926b47..b1d3efd 100644
--- a/app/Http/Controllers/Admin/ChatSettingsController.php
+++ b/app/Http/Controllers/Admin/ChatSettingsController.php
@@ -18,6 +18,7 @@ public function edit()
                 'enabled' => (bool) AppSetting::get('global_chat_enabled', true),
                 'audience' => AppSetting::get('global_chat_audience', 'verified_members'),
                 'cooldown_seconds' => (int) AppSetting::get('global_chat_cooldown_seconds', 30),
+                'max_messages' => (int) AppSetting::get('global_chat_max_messages', 200),
             ],
             'totalMessages' => ChatMessage::count(),
             'recentMessagesCount' => ChatMessage::where('created_at', '>=', now()->subHours(24))->count(),
@@ -70,11 +71,16 @@ public function update(Request $request)
             'enabled' => ['required', 'boolean'],
             'audience' => ['required', 'string', 'in:verified_members,all,disabled'],
             'cooldown_seconds' => ['required', 'integer', 'min:0', 'max:3600'],
+            'max_messages' => ['required', 'integer', 'min:20', 'max:1000'],
         ]);
 
         AppSetting::set('global_chat_enabled', $validated['enabled'], 'boolean');
         AppSetting::set('global_chat_audience', $validated['audience'], 'string');
         AppSetting::set('global_chat_cooldown_seconds', $validated['cooldown_seconds'], 'integer');
+        AppSetting::set('global_chat_max_messages', $validated['max_messages'], 'integer');
+
+        // Immediately prune if current count exceeds new limit
+        ChatMessage::pruneOldMessages($validated['max_messages']);
 
         return back()->with('success', 'Global chat settings updated successfully.');
     }
diff --git a/app/Http/Controllers/ChatController.php b/app/Http/Controllers/ChatController.php
index 3e8ea13..f5840f8 100644
--- a/app/Http/Controllers/ChatController.php
+++ b/app/Http/Controllers/ChatController.php
@@ -21,6 +21,7 @@ public function index(Request $request)
         $isEnabled = AppSetting::get('global_chat_enabled', true);
         $audience = AppSetting::get('global_chat_audience', 'verified_members'); // 'verified_members', 'all', 'disabled'
         $cooldownSeconds = (int) AppSetting::get('global_chat_cooldown_seconds', 30);
+        $maxMessages = (int) AppSetting::get('global_chat_max_messages', 200);
 
         // Determine if user can post
         $canPost = false;
@@ -43,10 +44,10 @@ public function index(Request $request)
             $canPost = true;
         }
 
-        // Fetch last 200 messages in chronological order
+        // Fetch last X messages in chronological order
         $messages = ChatMessage::with(['user:id,name,username,image_path,institution', 'user.roles:id,name'])
             ->latest('id')
-            ->take(200)
+            ->take($maxMessages)
             ->get()
             ->reverse()
             ->values()
@@ -73,6 +74,7 @@ public function index(Request $request)
                     'enabled' => (bool) $isEnabled,
                     'audience' => $audience,
                     'cooldown_seconds' => $cooldownSeconds,
+                    'max_messages' => $maxMessages,
                     'can_post' => $canPost,
                     'reason' => $reason,
                     'can_delete' => (bool) $user?->can('manage chat'),
@@ -87,6 +89,7 @@ public function index(Request $request)
             'enabled' => (bool) $isEnabled,
             'audience' => $audience,
             'cooldown_seconds' => $cooldownSeconds,
+            'max_messages' => $maxMessages,
             'can_post' => $canPost,
             'reason' => $reason,
             'can_delete' => (bool) $user?->can('manage chat'),
@@ -104,6 +107,7 @@ public function store(Request $request)
         $isEnabled = AppSetting::get('global_chat_enabled', true);
         $audience = AppSetting::get('global_chat_audience', 'verified_members');
         $cooldownSeconds = (int) AppSetting::get('global_chat_cooldown_seconds', 30);
+        $maxMessages = (int) AppSetting::get('global_chat_max_messages', 200);
 
         // Check if chat is enabled
         if (! $isEnabled || $audience === 'disabled') {
@@ -177,8 +181,8 @@ public function store(Request $request)
             RateLimiter::hit($rateLimitKey, $cooldownSeconds);
         }
 
-        // Keep rolling buffer of latest 200 messages in DB
-        ChatMessage::pruneOldMessages(200);
+        // Keep rolling buffer of latest X messages in DB
+        ChatMessage::pruneOldMessages($maxMessages);
 
         // Broadcast to Pusher Channels
         try {
diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index 3057540..3f75095 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -30,6 +30,7 @@ const props = defineProps<{
         enabled: boolean;
         audience: string;
         cooldown_seconds: number;
+        max_messages?: number;
         can_post: boolean;
         reason: string | null;
         can_delete: boolean;
@@ -43,6 +44,7 @@ const page = usePage();
 const { can } = usePermissions();
 const currentUser = computed(() => page.props.auth?.user);
 
+const maxMessagesLimit = computed(() => props.chatState.max_messages ?? 200);
 const messages = ref<ChatMessageItem[]>(props.chatState.messages || []);
 const inputContent = ref('');
 const isSending = ref(false);
@@ -181,7 +183,7 @@ const setupRealtime = () => {
                 if (!messages.value.some((m) => m.id === e.message.id)) {
                     messages.value.push(e.message);
 
-                    if (messages.value.length > 200) {
+                    if (messages.value.length > maxMessagesLimit.value) {
                         messages.value.shift();
                     }
 
@@ -240,7 +242,7 @@ const sendMessage = async () => {
             if (!messages.value.some((m) => m.id === newMsg.id)) {
                 messages.value.push(newMsg);
 
-                if (messages.value.length > 200) {
+                if (messages.value.length > maxMessagesLimit.value) {
                     messages.value.shift();
                 }
             }
diff --git a/resources/js/pages/admin/ChatSettings.vue b/resources/js/pages/admin/ChatSettings.vue
index 992a84a..3e1eed5 100644
--- a/resources/js/pages/admin/ChatSettings.vue
+++ b/resources/js/pages/admin/ChatSettings.vue
@@ -14,21 +14,25 @@ import AdminLayout from '@/layouts/AdminLayout.vue';
 
 defineOptions({ layout: AdminLayout });
 
-const props = defineProps<{
+interface ChatSettingsProps {
     settings: {
         enabled: boolean;
         audience: string;
         cooldown_seconds: number;
+        max_messages: number;
     };
     totalMessages: number;
     recentMessagesCount: number;
     pendingReportsCount?: number;
-}>();
+}
+
+const props = defineProps<ChatSettingsProps>();
 
 const form = useForm({
     enabled: props.settings.enabled,
     audience: props.settings.audience,
     cooldown_seconds: props.settings.cooldown_seconds,
+    max_messages: props.settings.max_messages ?? 200,
 });
 
 const submitSettings = () => {
@@ -55,6 +59,14 @@ const cooldownPresets = [
     { label: '2 Minutes (120s)', value: 120 },
     { label: '5 Minutes (300s)', value: 300 },
 ];
+
+const messageLimitPresets = [
+    { label: '50 Messages', value: 50 },
+    { label: '100 Messages', value: 100 },
+    { label: '200 Messages (Default)', value: 200 },
+    { label: '500 Messages', value: 500 },
+    { label: '1000 Messages', value: 1000 },
+];
 </script>
 
 <template>
@@ -154,7 +166,7 @@ const cooldownPresets = [
                     {{ totalMessages }}
                 </p>
                 <span class="text-[11px] text-slate-400 dark:text-gray-500"
-                    >Auto-pruning maintains max 200</span
+                    >Auto-pruning maintains max {{ form.max_messages }}</span
                 >
             </div>
 
@@ -411,6 +423,65 @@ const cooldownPresets = [
                 </div>
             </div>
 
+            <!-- 4. Message Retention Buffer (Rolling Limit) -->
+            <div
+                class="space-y-4 border-b border-slate-100 pb-6 dark:border-gray-800"
+            >
+                <div>
+                    <label
+                        class="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-gray-100"
+                    >
+                        <MessageCircle class="h-4 w-4 text-indigo-500" />
+                        Rolling Message Buffer (Max Stored Messages)
+                    </label>
+                    <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
+                        Specify how many recent messages to keep in storage.
+                        Older messages beyond this limit are automatically pruned.
+                    </p>
+                </div>
+
+                <!-- Quick Preset Buttons -->
+                <div class="flex flex-wrap gap-2">
+                    <button
+                        v-for="preset in messageLimitPresets"
+                        :key="preset.value"
+                        type="button"
+                        @click="form.max_messages = preset.value"
+                        class="cursor-pointer rounded-xl border px-3 py-1.5 text-xs font-bold transition-all active:scale-95"
+                        :class="
+                            form.max_messages === preset.value
+                                ? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:border-indigo-400 dark:bg-indigo-950/60 dark:text-indigo-300'
+                                : 'border-slate-200 bg-slate-50 text-slate-600 hover:bg-slate-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
+                        "
+                    >
+                        {{ preset.label }}
+                    </button>
+                </div>
+
+                <!-- Custom Limit Input -->
+                <div class="max-w-xs">
+                    <label
+                        class="mb-1 block text-xs font-semibold text-slate-600 dark:text-gray-400"
+                    >
+                        Custom Retention Limit (20 - 1000 messages):
+                    </label>
+                    <div class="relative">
+                        <input
+                            v-model.number="form.max_messages"
+                            type="number"
+                            min="20"
+                            max="1000"
+                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400"
+                        />
+                        <span
+                            class="absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
+                        >
+                            messages
+                        </span>
+                    </div>
+                </div>
+            </div>
+
             <!-- Submit Button -->
             <div class="flex items-center justify-between pt-2">
                 <button

From 85de407b5491ce1cef9801ef9937de69a00e9d2f Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 22:48:50 +0600
Subject: [PATCH 08/15] feat(chat): make maximum message character limit
 controllable via admin panel

---
 .../Admin/ChatSettingsController.php          |  3 +
 app/Http/Controllers/ChatController.php       |  6 +-
 resources/js/pages/Chat/Index.vue             | 10 +--
 resources/js/pages/admin/ChatSettings.vue     | 67 +++++++++++++++++++
 4 files changed, 81 insertions(+), 5 deletions(-)

diff --git a/app/Http/Controllers/Admin/ChatSettingsController.php b/app/Http/Controllers/Admin/ChatSettingsController.php
index b1d3efd..08fb5b8 100644
--- a/app/Http/Controllers/Admin/ChatSettingsController.php
+++ b/app/Http/Controllers/Admin/ChatSettingsController.php
@@ -19,6 +19,7 @@ public function edit()
                 'audience' => AppSetting::get('global_chat_audience', 'verified_members'),
                 'cooldown_seconds' => (int) AppSetting::get('global_chat_cooldown_seconds', 30),
                 'max_messages' => (int) AppSetting::get('global_chat_max_messages', 200),
+                'max_length' => (int) AppSetting::get('global_chat_max_length', 280),
             ],
             'totalMessages' => ChatMessage::count(),
             'recentMessagesCount' => ChatMessage::where('created_at', '>=', now()->subHours(24))->count(),
@@ -72,12 +73,14 @@ public function update(Request $request)
             'audience' => ['required', 'string', 'in:verified_members,all,disabled'],
             'cooldown_seconds' => ['required', 'integer', 'min:0', 'max:3600'],
             'max_messages' => ['required', 'integer', 'min:20', 'max:1000'],
+            'max_length' => ['required', 'integer', 'min:50', 'max:1000'],
         ]);
 
         AppSetting::set('global_chat_enabled', $validated['enabled'], 'boolean');
         AppSetting::set('global_chat_audience', $validated['audience'], 'string');
         AppSetting::set('global_chat_cooldown_seconds', $validated['cooldown_seconds'], 'integer');
         AppSetting::set('global_chat_max_messages', $validated['max_messages'], 'integer');
+        AppSetting::set('global_chat_max_length', $validated['max_length'], 'integer');
 
         // Immediately prune if current count exceeds new limit
         ChatMessage::pruneOldMessages($validated['max_messages']);
diff --git a/app/Http/Controllers/ChatController.php b/app/Http/Controllers/ChatController.php
index f5840f8..1ef9a00 100644
--- a/app/Http/Controllers/ChatController.php
+++ b/app/Http/Controllers/ChatController.php
@@ -22,6 +22,7 @@ public function index(Request $request)
         $audience = AppSetting::get('global_chat_audience', 'verified_members'); // 'verified_members', 'all', 'disabled'
         $cooldownSeconds = (int) AppSetting::get('global_chat_cooldown_seconds', 30);
         $maxMessages = (int) AppSetting::get('global_chat_max_messages', 200);
+        $maxLength = (int) AppSetting::get('global_chat_max_length', 280);
 
         // Determine if user can post
         $canPost = false;
@@ -75,6 +76,7 @@ public function index(Request $request)
                     'audience' => $audience,
                     'cooldown_seconds' => $cooldownSeconds,
                     'max_messages' => $maxMessages,
+                    'max_length' => $maxLength,
                     'can_post' => $canPost,
                     'reason' => $reason,
                     'can_delete' => (bool) $user?->can('manage chat'),
@@ -90,6 +92,7 @@ public function index(Request $request)
             'audience' => $audience,
             'cooldown_seconds' => $cooldownSeconds,
             'max_messages' => $maxMessages,
+            'max_length' => $maxLength,
             'can_post' => $canPost,
             'reason' => $reason,
             'can_delete' => (bool) $user?->can('manage chat'),
@@ -108,6 +111,7 @@ public function store(Request $request)
         $audience = AppSetting::get('global_chat_audience', 'verified_members');
         $cooldownSeconds = (int) AppSetting::get('global_chat_cooldown_seconds', 30);
         $maxMessages = (int) AppSetting::get('global_chat_max_messages', 200);
+        $maxLength = (int) AppSetting::get('global_chat_max_length', 280);
 
         // Check if chat is enabled
         if (! $isEnabled || $audience === 'disabled') {
@@ -140,7 +144,7 @@ public function store(Request $request)
         }
 
         $validated = $request->validate([
-            'content' => ['required', 'string', 'max:280'],
+            'content' => ['required', 'string', "max:{$maxLength}"],
             'reply_to_id' => ['nullable', 'integer'],
         ]);
 
diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index 3f75095..5bfbf2f 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -31,6 +31,7 @@ const props = defineProps<{
         audience: string;
         cooldown_seconds: number;
         max_messages?: number;
+        max_length?: number;
         can_post: boolean;
         reason: string | null;
         can_delete: boolean;
@@ -45,6 +46,7 @@ const { can } = usePermissions();
 const currentUser = computed(() => page.props.auth?.user);
 
 const maxMessagesLimit = computed(() => props.chatState.max_messages ?? 200);
+const maxLengthLimit = computed(() => props.chatState.max_length ?? 280);
 const messages = ref<ChatMessageItem[]>(props.chatState.messages || []);
 const inputContent = ref('');
 const isSending = ref(false);
@@ -211,7 +213,7 @@ const sendMessage = async () => {
 
     const content = inputContent.value.trim();
 
-    if (content.length > 280) {
+    if (content.length > maxLengthLimit.value) {
         return;
     }
 
@@ -698,14 +700,14 @@ onUnmounted(() => {
                             type="text"
                             :disabled="isSending || cooldownSeconds > 0"
                             :placeholder="activeReplyTo ? `Reply to ${activeReplyTo.user.name}...` : 'Type a message...'"
-                            maxlength="280"
+                            :maxlength="maxLengthLimit"
                             class="dark:border-gray-750 w-full rounded-xl border border-slate-200 bg-slate-50/70 px-4 py-2.5 text-xs text-slate-800 placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:outline-none disabled:opacity-60 sm:text-sm dark:border-gray-700/80 dark:bg-gray-800/80 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
                         />
                         <span
-                            v-if="inputContent.length > 200"
+                            v-if="inputContent.length > (maxLengthLimit - 80)"
                             class="absolute top-1/2 right-3.5 -translate-y-1/2 text-[10px] font-medium text-slate-400 dark:text-gray-500"
                         >
-                            {{ 280 - inputContent.length }}
+                            {{ maxLengthLimit - inputContent.length }}
                         </span>
                     </div>
 
diff --git a/resources/js/pages/admin/ChatSettings.vue b/resources/js/pages/admin/ChatSettings.vue
index 3e1eed5..222d2a5 100644
--- a/resources/js/pages/admin/ChatSettings.vue
+++ b/resources/js/pages/admin/ChatSettings.vue
@@ -20,6 +20,7 @@ interface ChatSettingsProps {
         audience: string;
         cooldown_seconds: number;
         max_messages: number;
+        max_length: number;
     };
     totalMessages: number;
     recentMessagesCount: number;
@@ -33,6 +34,7 @@ const form = useForm({
     audience: props.settings.audience,
     cooldown_seconds: props.settings.cooldown_seconds,
     max_messages: props.settings.max_messages ?? 200,
+    max_length: props.settings.max_length ?? 280,
 });
 
 const submitSettings = () => {
@@ -67,6 +69,13 @@ const messageLimitPresets = [
     { label: '500 Messages', value: 500 },
     { label: '1000 Messages', value: 1000 },
 ];
+
+const lengthPresets = [
+    { label: '140 Characters', value: 140 },
+    { label: '280 Characters (Default)', value: 280 },
+    { label: '500 Characters', value: 500 },
+    { label: '1000 Characters', value: 1000 },
+];
 </script>
 
 <template>
@@ -482,6 +491,64 @@ const messageLimitPresets = [
                 </div>
             </div>
 
+            <!-- 5. Maximum Message Character Limit -->
+            <div
+                class="space-y-4 border-b border-slate-100 pb-6 dark:border-gray-800"
+            >
+                <div>
+                    <label
+                        class="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-gray-100"
+                    >
+                        <MessageCircle class="h-4 w-4 text-indigo-500" />
+                        Per-Message Character Length Limit
+                    </label>
+                    <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
+                        Control the maximum length allowed for any single student message.
+                    </p>
+                </div>
+
+                <!-- Quick Preset Buttons -->
+                <div class="flex flex-wrap gap-2">
+                    <button
+                        v-for="preset in lengthPresets"
+                        :key="preset.value"
+                        type="button"
+                        @click="form.max_length = preset.value"
+                        class="cursor-pointer rounded-xl border px-3 py-1.5 text-xs font-bold transition-all active:scale-95"
+                        :class="
+                            form.max_length === preset.value
+                                ? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:border-indigo-400 dark:bg-indigo-950/60 dark:text-indigo-300'
+                                : 'border-slate-200 bg-slate-50 text-slate-600 hover:bg-slate-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
+                        "
+                    >
+                        {{ preset.label }}
+                    </button>
+                </div>
+
+                <!-- Custom Length Input -->
+                <div class="max-w-xs">
+                    <label
+                        class="mb-1 block text-xs font-semibold text-slate-600 dark:text-gray-400"
+                    >
+                        Custom Length Limit (50 - 1000 characters):
+                    </label>
+                    <div class="relative">
+                        <input
+                            v-model.number="form.max_length"
+                            type="number"
+                            min="50"
+                            max="1000"
+                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400"
+                        />
+                        <span
+                            class="absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
+                        >
+                            chars
+                        </span>
+                    </div>
+                </div>
+            </div>
+
             <!-- Submit Button -->
             <div class="flex items-center justify-between pt-2">
                 <button

From 6bb183453569c43360cfee9415a0a04bd9629bc8 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 22:53:26 +0600
Subject: [PATCH 09/15] feat(chat): sync latest messages on navigation and tab
 return with 15s throttle

---
 resources/js/pages/Chat/Index.vue | 52 +++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index 5bfbf2f..351d4bf 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -167,6 +167,45 @@ const scrollToBottom = (smooth = true) => {
     });
 };
 
+let lastFetchTimestamp = Date.now();
+const fetchLatestMessages = async (force = false) => {
+    // Throttle automatic refreshes to at most once every 15 seconds unless forced
+    const now = Date.now();
+    if (!force && now - lastFetchTimestamp < 15000) {
+        return;
+    }
+    lastFetchTimestamp = now;
+
+    try {
+        const res = await fetch('/chat', {
+            headers: {
+                Accept: 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+            },
+        });
+        if (res.ok) {
+            const data = await res.json();
+            if (data.messages && Array.isArray(data.messages)) {
+                messages.value = data.messages;
+                if (typeof data.can_post === 'boolean') {
+                    canPost.value = data.can_post;
+                }
+                if (typeof data.can_delete === 'boolean') {
+                    canDelete.value = data.can_delete;
+                }
+                if (data.reason !== undefined) {
+                    restrictionReason.value = data.reason;
+                }
+                if (data.cooldown_seconds !== undefined) {
+                    activeCooldownSeconds.value = data.cooldown_seconds;
+                }
+            }
+        }
+    } catch {
+        // Silently ignore background refresh errors
+    }
+};
+
 const setupRealtime = () => {
     const echo = getEcho(
         props.chatState.pusher_key,
@@ -413,16 +452,29 @@ const shouldShowDateDivider = (index: number) => {
     return prev !== curr;
 };
 
+const handleVisibilityOrFocus = () => {
+    if (document.visibilityState === 'visible') {
+        fetchLatestMessages();
+    }
+};
+
 onMounted(() => {
     initCooldown();
     setupRealtime();
     scrollToBottom(false);
+
+    window.addEventListener('focus', fetchLatestMessages);
+    window.addEventListener('pageshow', fetchLatestMessages);
+    document.addEventListener('visibilitychange', handleVisibilityOrFocus);
 });
 
 onUnmounted(() => {
     if (cooldownInterval) {
         clearInterval(cooldownInterval);
     }
+    window.removeEventListener('focus', fetchLatestMessages);
+    window.removeEventListener('pageshow', fetchLatestMessages);
+    document.removeEventListener('visibilitychange', handleVisibilityOrFocus);
 });
 </script>
 

From 03892eb9153a087935e947bb53b0cefde78c57e3 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 23:06:12 +0600
Subject: [PATCH 10/15] feat(chat): add admin-configurable lightweight
 profanity and abuse filter

---
 .../Admin/ChatSettingsController.php          |   9 ++
 app/Http/Controllers/ChatController.php       |   8 ++
 app/Services/ChatProfanityFilter.php          | 103 ++++++++++++++++++
 resources/js/pages/admin/ChatSettings.vue     |  65 +++++++++++
 4 files changed, 185 insertions(+)
 create mode 100644 app/Services/ChatProfanityFilter.php

diff --git a/app/Http/Controllers/Admin/ChatSettingsController.php b/app/Http/Controllers/Admin/ChatSettingsController.php
index 08fb5b8..17e3653 100644
--- a/app/Http/Controllers/Admin/ChatSettingsController.php
+++ b/app/Http/Controllers/Admin/ChatSettingsController.php
@@ -13,6 +13,9 @@ class ChatSettingsController extends Controller
 {
     public function edit()
     {
+        $bannedWords = AppSetting::get('global_chat_banned_words', '');
+        $bannedWordsText = is_array($bannedWords) ? implode(', ', $bannedWords) : (string) $bannedWords;
+
         return Inertia::render('admin/ChatSettings', [
             'settings' => [
                 'enabled' => (bool) AppSetting::get('global_chat_enabled', true),
@@ -20,6 +23,8 @@ public function edit()
                 'cooldown_seconds' => (int) AppSetting::get('global_chat_cooldown_seconds', 30),
                 'max_messages' => (int) AppSetting::get('global_chat_max_messages', 200),
                 'max_length' => (int) AppSetting::get('global_chat_max_length', 280),
+                'profanity_filter_enabled' => (bool) AppSetting::get('global_chat_profanity_filter_enabled', true),
+                'banned_words' => $bannedWordsText,
             ],
             'totalMessages' => ChatMessage::count(),
             'recentMessagesCount' => ChatMessage::where('created_at', '>=', now()->subHours(24))->count(),
@@ -74,6 +79,8 @@ public function update(Request $request)
             'cooldown_seconds' => ['required', 'integer', 'min:0', 'max:3600'],
             'max_messages' => ['required', 'integer', 'min:20', 'max:1000'],
             'max_length' => ['required', 'integer', 'min:50', 'max:1000'],
+            'profanity_filter_enabled' => ['required', 'boolean'],
+            'banned_words' => ['nullable', 'string'],
         ]);
 
         AppSetting::set('global_chat_enabled', $validated['enabled'], 'boolean');
@@ -81,6 +88,8 @@ public function update(Request $request)
         AppSetting::set('global_chat_cooldown_seconds', $validated['cooldown_seconds'], 'integer');
         AppSetting::set('global_chat_max_messages', $validated['max_messages'], 'integer');
         AppSetting::set('global_chat_max_length', $validated['max_length'], 'integer');
+        AppSetting::set('global_chat_profanity_filter_enabled', $validated['profanity_filter_enabled'], 'boolean');
+        AppSetting::set('global_chat_banned_words', $validated['banned_words'] ?? '', 'string');
 
         // Immediately prune if current count exceeds new limit
         ChatMessage::pruneOldMessages($validated['max_messages']);
diff --git a/app/Http/Controllers/ChatController.php b/app/Http/Controllers/ChatController.php
index 1ef9a00..2f7070e 100644
--- a/app/Http/Controllers/ChatController.php
+++ b/app/Http/Controllers/ChatController.php
@@ -6,6 +6,7 @@
 use App\Events\ChatMessageSent;
 use App\Models\AppSetting;
 use App\Models\ChatMessage;
+use App\Services\ChatProfanityFilter;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\RateLimiter;
 use Illuminate\Support\Str;
@@ -150,6 +151,13 @@ public function store(Request $request)
 
         $content = trim($validated['content']);
 
+        // Check for abusive / prohibited language
+        if (ChatProfanityFilter::hasProfanity($content)) {
+            return response()->json([
+                'message' => 'Your message contains inappropriate or prohibited language. If you try again, you may be temporarily banned from chat.',
+            ], 422);
+        }
+
         // Prevent duplicate message sent twice in a streak by the same user
         $lastMessage = ChatMessage::where('user_id', $user->id)
             ->latest('id')
diff --git a/app/Services/ChatProfanityFilter.php b/app/Services/ChatProfanityFilter.php
new file mode 100644
index 0000000..f93d054
--- /dev/null
+++ b/app/Services/ChatProfanityFilter.php
@@ -0,0 +1,103 @@
+<?php
+
+namespace App\Services;
+
+use App\Models\AppSetting;
+
+class ChatProfanityFilter
+{
+    /**
+     * Check if the given text contains abusive or banned words.
+     * Returns true if profanity is detected, false otherwise.
+     */
+    public static function hasProfanity(string $text): bool
+    {
+        $enabled = AppSetting::get('global_chat_profanity_filter_enabled', true);
+        if (! $enabled) {
+            return false;
+        }
+
+        $bannedWords = self::getBannedWords();
+        if (empty($bannedWords)) {
+            return false;
+        }
+
+        $normalized = self::normalize($text);
+
+        foreach ($bannedWords as $word) {
+            $word = trim(mb_strtolower($word));
+            if ($word === '') {
+                continue;
+            }
+
+            // Exact word boundary matching or normalized substring matching
+            $escaped = preg_quote($word, '/');
+            if (preg_match("/\b{$escaped}\b/ui", $text) || preg_match("/\b{$escaped}\b/ui", $normalized)) {
+                return true;
+            }
+
+            // Compact match without spaces or special symbols (e.g. f.u.c.k or f_u_c_k)
+            $compactText = preg_replace('/[^\p{L}\p{N}]/u', '', $normalized);
+            $compactWord = preg_replace('/[^\p{L}\p{N}]/u', '', $word);
+            if ($compactWord !== '' && str_contains($compactText, $compactWord)) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * Normalize text by replacing leet-speak substitutions and collapsing repeated characters.
+     */
+    public static function normalize(string $text): string
+    {
+        $text = mb_strtolower($text);
+
+        // Common leet-speak substitutions
+        $substitutions = [
+            '@' => 'a',
+            '4' => 'a',
+            '$' => 's',
+            '5' => 's',
+            '1' => 'i',
+            '!' => 'i',
+            '|' => 'i',
+            '0' => 'o',
+            '3' => 'e',
+            '8' => 'b',
+            '+' => 't',
+            '7' => 't',
+        ];
+
+        $text = strtr($text, $substitutions);
+
+        // Collapse repeated characters: e.g. "fuuuck" -> "fuck", "biiiitch" -> "bitch"
+        $text = preg_replace('/(.)\1{2,}/u', '$1', $text);
+
+        return $text;
+    }
+
+    /**
+     * Get the active list of banned words from AppSetting.
+     *
+     * @return array<int, string>
+     */
+    public static function getBannedWords(): array
+    {
+        $customWords = AppSetting::get('global_chat_banned_words', '');
+
+        if (empty($customWords)) {
+            return [];
+        }
+
+        if (is_array($customWords)) {
+            return $customWords;
+        }
+
+        // Split by commas or newlines
+        $words = preg_split('/[\r\n,]+/', (string) $customWords);
+
+        return array_values(array_filter(array_map('trim', $words), fn ($w) => $w !== ''));
+    }
+}
diff --git a/resources/js/pages/admin/ChatSettings.vue b/resources/js/pages/admin/ChatSettings.vue
index 222d2a5..a97ef71 100644
--- a/resources/js/pages/admin/ChatSettings.vue
+++ b/resources/js/pages/admin/ChatSettings.vue
@@ -9,6 +9,7 @@ import {
     Loader2,
     Activity,
     Flag,
+    ShieldAlert,
 } from 'lucide-vue-next';
 import AdminLayout from '@/layouts/AdminLayout.vue';
 
@@ -21,6 +22,8 @@ interface ChatSettingsProps {
         cooldown_seconds: number;
         max_messages: number;
         max_length: number;
+        profanity_filter_enabled: boolean;
+        banned_words: string;
     };
     totalMessages: number;
     recentMessagesCount: number;
@@ -35,6 +38,8 @@ const form = useForm({
     cooldown_seconds: props.settings.cooldown_seconds,
     max_messages: props.settings.max_messages ?? 200,
     max_length: props.settings.max_length ?? 280,
+    profanity_filter_enabled: props.settings.profanity_filter_enabled ?? true,
+    banned_words: props.settings.banned_words ?? '',
 });
 
 const submitSettings = () => {
@@ -549,6 +554,66 @@ const lengthPresets = [
                 </div>
             </div>
 
+            <!-- 6. Profanity & Abusive Language Filter -->
+            <div
+                class="space-y-4 border-b border-slate-100 pb-6 dark:border-gray-800"
+            >
+                <div class="flex items-center justify-between">
+                    <div>
+                        <label
+                            class="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-gray-100"
+                        >
+                            <ShieldAlert class="h-4 w-4 text-rose-500" />
+                            Profanity & Abusive Language Filter
+                        </label>
+                        <p
+                            class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
+                        >
+                            Automatically detects and blocks vulgar, abusive, and inappropriate words before they can be sent.
+                        </p>
+                    </div>
+
+                    <!-- Toggle Switch -->
+                    <button
+                        type="button"
+                        @click="form.profanity_filter_enabled = !form.profanity_filter_enabled"
+                        class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none"
+                        :class="
+                            form.profanity_filter_enabled
+                                ? 'bg-indigo-600 dark:bg-indigo-500'
+                                : 'bg-slate-200 dark:bg-gray-700'
+                        "
+                    >
+                        <span
+                            class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out"
+                            :class="
+                                form.profanity_filter_enabled
+                                    ? 'translate-x-5'
+                                    : 'translate-x-0'
+                            "
+                        />
+                    </button>
+                </div>
+
+                <!-- Banned Words List (Textarea) -->
+                <div v-if="form.profanity_filter_enabled" class="space-y-2">
+                    <label
+                        class="block text-xs font-semibold text-slate-600 dark:text-gray-400"
+                    >
+                        Banned Words & Offensive Roots (separated by commas or newlines):
+                    </label>
+                    <textarea
+                        v-model="form.banned_words"
+                        rows="4"
+                        placeholder="e.g. fuck, bitch, chuda, khanki, etc."
+                        class="w-full rounded-xl border border-slate-200 bg-slate-50 p-3 text-xs text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 font-mono"
+                    ></textarea>
+                    <p class="text-[11px] text-slate-400 dark:text-gray-500">
+                        The filter collapses repeated letters (e.g. "fuuuuck" &rarr; "fuck") and replaces common leet-speak (e.g. @ &rarr; a, $ &rarr; s, 0 &rarr; o).
+                    </p>
+                </div>
+            </div>
+
             <!-- Submit Button -->
             <div class="flex items-center justify-between pt-2">
                 <button

From 463e309192c417c8646bc20959be34d6387865e4 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 23:09:03 +0600
Subject: [PATCH 11/15] feat(chat): broadcast and sync chat configuration
 changes live across all connected clients

---
 app/Events/ChatSettingsUpdated.php            | 48 ++++++++++++++++
 .../Admin/ChatSettingsController.php          |  7 +++
 resources/js/pages/Chat/Index.vue             | 56 ++++++++++++++++++-
 3 files changed, 108 insertions(+), 3 deletions(-)
 create mode 100644 app/Events/ChatSettingsUpdated.php

diff --git a/app/Events/ChatSettingsUpdated.php b/app/Events/ChatSettingsUpdated.php
new file mode 100644
index 0000000..77f5690
--- /dev/null
+++ b/app/Events/ChatSettingsUpdated.php
@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Events;
+
+use App\Models\AppSetting;
+use Illuminate\Broadcasting\Channel;
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Queue\SerializesModels;
+
+class ChatSettingsUpdated implements ShouldBroadcastNow
+{
+    use Dispatchable, InteractsWithSockets, SerializesModels;
+
+    public array $settings;
+
+    /**
+     * Create a new event instance.
+     */
+    public function __construct()
+    {
+        $this->settings = [
+            'enabled' => (bool) AppSetting::get('global_chat_enabled', true),
+            'audience' => AppSetting::get('global_chat_audience', 'verified_members'),
+            'cooldown_seconds' => (int) AppSetting::get('global_chat_cooldown_seconds', 30),
+            'max_messages' => (int) AppSetting::get('global_chat_max_messages', 200),
+            'max_length' => (int) AppSetting::get('global_chat_max_length', 280),
+        ];
+    }
+
+    /**
+     * Get the channels the event should broadcast on.
+     *
+     * @return array<int, Channel>
+     */
+    public function broadcastOn(): array
+    {
+        return [
+            new Channel('global-chat'),
+        ];
+    }
+
+    public function broadcastAs(): string
+    {
+        return 'settings.updated';
+    }
+}
diff --git a/app/Http/Controllers/Admin/ChatSettingsController.php b/app/Http/Controllers/Admin/ChatSettingsController.php
index 17e3653..b1f3c7d 100644
--- a/app/Http/Controllers/Admin/ChatSettingsController.php
+++ b/app/Http/Controllers/Admin/ChatSettingsController.php
@@ -94,6 +94,13 @@ public function update(Request $request)
         // Immediately prune if current count exceeds new limit
         ChatMessage::pruneOldMessages($validated['max_messages']);
 
+        // Broadcast settings update to global-chat channel
+        try {
+            broadcast(new \App\Events\ChatSettingsUpdated());
+        } catch (\Throwable $e) {
+            // Log without failing response
+        }
+
         return back()->with('success', 'Global chat settings updated successfully.');
     }
 
diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index 351d4bf..7374af4 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -45,8 +45,8 @@ const page = usePage();
 const { can } = usePermissions();
 const currentUser = computed(() => page.props.auth?.user);
 
-const maxMessagesLimit = computed(() => props.chatState.max_messages ?? 200);
-const maxLengthLimit = computed(() => props.chatState.max_length ?? 280);
+const maxMessagesLimit = ref(props.chatState.max_messages ?? 200);
+const maxLengthLimit = ref(props.chatState.max_length ?? 280);
 const messages = ref<ChatMessageItem[]>(props.chatState.messages || []);
 const inputContent = ref('');
 const isSending = ref(false);
@@ -219,6 +219,7 @@ const setupRealtime = () => {
     echo.channel('global-chat')
         .stopListening('.message.sent')
         .stopListening('.message.deleted')
+        .stopListening('.settings.updated')
         .listen('.message.sent', (e: { message: ChatMessageItem }) => {
             if (e && e.message) {
                 if (!messages.value.some((m) => m.id === e.message.id)) {
@@ -238,7 +239,56 @@ const setupRealtime = () => {
                     (m) => m.id !== e.messageId,
                 );
             }
-        });
+        })
+        .listen(
+            '.settings.updated',
+            (e: {
+                settings: {
+                    enabled: boolean;
+                    audience: string;
+                    cooldown_seconds: number;
+                    max_messages: number;
+                    max_length: number;
+                };
+            }) => {
+                if (e && e.settings) {
+                    activeCooldownSeconds.value = e.settings.cooldown_seconds;
+                    maxMessagesLimit.value = e.settings.max_messages;
+                    maxLengthLimit.value = e.settings.max_length;
+
+                    // Automatically trim messages if max_messages decreased
+                    if (messages.value.length > e.settings.max_messages) {
+                        messages.value = messages.value.slice(
+                            -e.settings.max_messages,
+                        );
+                    }
+
+                    // Dynamically update permissions
+                    const user = currentUser.value;
+                    if (!e.settings.enabled || e.settings.audience === 'disabled') {
+                        canPost.value = false;
+                        restrictionReason.value =
+                            'Global chat is currently disabled for maintenance.';
+                    } else if (!user) {
+                        canPost.value = false;
+                        restrictionReason.value =
+                            'Please sign in to join the conversation.';
+                    } else if (e.settings.audience === 'verified_members') {
+                        if (user.is_verified || can('view admin')) {
+                            canPost.value = true;
+                            restrictionReason.value = null;
+                        } else {
+                            canPost.value = false;
+                            restrictionReason.value =
+                                'Global chat is currently in beta for verified members and contributors.';
+                        }
+                    } else if (e.settings.audience === 'all') {
+                        canPost.value = true;
+                        restrictionReason.value = null;
+                    }
+                }
+            },
+        );
 };
 
 const sendMessage = async () => {

From e14312faeeb9174e5a10a55b824ce99bd1f86255 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 23:10:47 +0600
Subject: [PATCH 12/15] feat(chat): add chat rules and community guidelines
 dialog modal

---
 resources/js/pages/Chat/Index.vue | 144 +++++++++++++++++++++++++++---
 1 file changed, 132 insertions(+), 12 deletions(-)

diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index 7374af4..c8402dc 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Head, Link, usePage } from '@inertiajs/vue3';
-import { Send, Trash2, Lock, Loader2, LogIn, ArrowDown, ShieldAlert, Pencil, Flag, Check, X, Reply } from 'lucide-vue-next';
+import { Send, Trash2, Lock, Loader2, LogIn, ArrowDown, ShieldAlert, Pencil, Flag, Check, X, Reply, Info, ShieldCheck, AlertCircle } from 'lucide-vue-next';
 import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
 import VerifiedBadge from '@/components/VerifiedBadge.vue';
 import { getEcho } from '@/lib/echo';
@@ -59,6 +59,7 @@ const messagesContainerRef = ref<HTMLElement | null>(null);
 const messageInputRef = ref<HTMLInputElement | null>(null);
 const showScrollButton = ref(false);
 const highlightedMessageId = ref<number | null>(null);
+const showRulesModal = ref(false);
 
 // Reply State
 const activeReplyTo = ref<ChatMessageItem | null>(null);
@@ -538,18 +539,31 @@ onUnmounted(() => {
     </Head>
 
     <main class="mx-auto max-w-4xl px-4 py-4 sm:px-6 sm:py-6 lg:px-8">
-        <!-- Compact Page Title & Subtitle -->
-        <div class="mb-3 border-b border-slate-100 pb-3 dark:border-gray-800">
-            <h1
-                class="text-2xl font-extrabold tracking-tight text-slate-900 sm:text-3xl dark:text-gray-100"
-            >
-                Global Chat
-            </h1>
-            <p
-                class="mt-0.5 text-xs text-slate-500 sm:text-sm dark:text-gray-400"
+        <!-- Compact Page Title & Subtitle + Rules Button -->
+        <div class="mb-3 flex items-center justify-between border-b border-slate-100 pb-3 dark:border-gray-800">
+            <div>
+                <h1
+                    class="text-2xl font-extrabold tracking-tight text-slate-900 sm:text-3xl dark:text-gray-100"
+                >
+                    Global Chat
+                </h1>
+                <p
+                    class="mt-0.5 text-xs text-slate-500 sm:text-sm dark:text-gray-400"
+                >
+                    অন্যান্য শিক্ষার্থীদের সাথে সরাসরি কথা বলুন ও প্রশ্ন শেয়ার করুন।
+                </p>
+            </div>
+
+            <!-- Rules / Guidelines Trigger Button -->
+            <button
+                type="button"
+                @click="showRulesModal = true"
+                class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl border border-slate-200/80 bg-slate-50/80 px-3 py-1.5 text-xs font-semibold text-slate-700 shadow-2xs transition hover:bg-slate-100 active:scale-95 dark:border-gray-700/80 dark:bg-gray-800/80 dark:text-gray-200 dark:hover:bg-gray-750"
+                title="Chat Rules & Guidelines"
             >
-                অন্যান্য শিক্ষার্থীদের সাথে সরাসরি কথা বলুন ও প্রশ্ন শেয়ার করুন।
-            </p>
+                <Info class="h-4 w-4 text-indigo-600 dark:text-indigo-400" />
+                <span class="hidden sm:inline">Chat Rules</span>
+            </button>
         </div>
 
         <!-- Chat Container Window -->
@@ -971,5 +985,111 @@ onUnmounted(() => {
                 </form>
             </div>
         </div>
+
+        <!-- Chat Guidelines & Rules Alert Dialog Modal -->
+        <div
+            v-if="showRulesModal"
+            class="fixed inset-0 z-50 flex items-center justify-center p-4"
+        >
+            <!-- Backdrop -->
+            <div
+                class="fixed inset-0 bg-slate-900/60 backdrop-blur-xs transition-opacity"
+                @click="showRulesModal = false"
+            ></div>
+
+            <!-- Modal Content -->
+            <div
+                class="relative w-full max-w-lg overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 shadow-2xl transition-all sm:p-6 dark:border-gray-800 dark:bg-gray-900"
+            >
+                <!-- Modal Header -->
+                <div class="flex items-start justify-between border-b border-slate-100 pb-4 dark:border-gray-800">
+                    <div class="flex items-center gap-3">
+                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600 dark:bg-indigo-950/60 dark:text-indigo-400">
+                            <ShieldCheck class="h-5 w-5" />
+                        </div>
+                        <div>
+                            <h3 class="text-base font-bold text-slate-900 dark:text-gray-100">
+                                Global Chat Rules & Guidelines
+                            </h3>
+                            <p class="text-xs text-slate-500 dark:text-gray-400">
+                                Please follow these standards to keep the space helpful and safe for all students.
+                            </p>
+                        </div>
+                    </div>
+                    <button
+                        type="button"
+                        @click="showRulesModal = false"
+                        class="cursor-pointer rounded-lg p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                    >
+                        <X class="h-4 w-4" />
+                    </button>
+                </div>
+
+                <!-- Rules List -->
+                <div class="my-4 space-y-3.5 text-xs text-slate-700 dark:text-gray-300">
+                    <div class="flex items-start gap-2.5">
+                        <div class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 font-bold text-[11px] text-emerald-700 dark:bg-emerald-950/70 dark:text-emerald-300">
+                            1
+                        </div>
+                        <div>
+                            <strong class="font-semibold text-slate-900 dark:text-gray-100">Be Respectful & Constructive:</strong>
+                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">Treat fellow students, teachers, and moderators with dignity. Harassment, personal attacks, and hate speech are strictly prohibited.</p>
+                        </div>
+                    </div>
+
+                    <div class="flex items-start gap-2.5">
+                        <div class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 font-bold text-[11px] text-emerald-700 dark:bg-emerald-950/70 dark:text-emerald-300">
+                            2
+                        </div>
+                        <div>
+                            <strong class="font-semibold text-slate-900 dark:text-gray-100">No Vulgar or Abusive Language:</strong>
+                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">Avoid profanity, slang abuse, or bypass attempts in English, Bangla, or Banglish. Automated filters will block abusive messages.</p>
+                        </div>
+                    </div>
+
+                    <div class="flex items-start gap-2.5">
+                        <div class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 font-bold text-[11px] text-emerald-700 dark:bg-emerald-950/70 dark:text-emerald-300">
+                            3
+                        </div>
+                        <div>
+                            <strong class="font-semibold text-slate-900 dark:text-gray-100">No Spamming or Flooding:</strong>
+                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">Do not send identical messages repeatedly, flood the chat, or post unsolicited advertisements and external links.</p>
+                        </div>
+                    </div>
+
+                    <div class="flex items-start gap-2.5">
+                        <div class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 font-bold text-[11px] text-emerald-700 dark:bg-emerald-950/70 dark:text-emerald-300">
+                            4
+                        </div>
+                        <div>
+                            <strong class="font-semibold text-slate-900 dark:text-gray-100">Report Inappropriate Content:</strong>
+                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">Use the flag/report button on any message that violates these guidelines. Moderators review reported content regularly.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Notice -->
+                <div class="rounded-xl border border-amber-200/80 bg-amber-50/70 p-3 text-[11px] text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-300">
+                    <div class="flex items-center gap-1.5 font-bold">
+                        <AlertCircle class="h-3.5 w-3.5 text-amber-600 dark:text-amber-400" />
+                        <span>Enforcement Policy:</span>
+                    </div>
+                    <p class="mt-1">
+                        Violating chat rules will lead to immediate message deletion and temporary or permanent chat bans.
+                    </p>
+                </div>
+
+                <!-- Footer Close Button -->
+                <div class="mt-5 flex justify-end">
+                    <button
+                        type="button"
+                        @click="showRulesModal = false"
+                        class="cursor-pointer rounded-xl bg-indigo-600 px-5 py-2 text-xs font-semibold text-white shadow-xs transition hover:bg-indigo-700 active:scale-95 dark:bg-indigo-500 dark:hover:bg-indigo-600"
+                    >
+                        I Understand
+                    </button>
+                </div>
+            </div>
+        </div>
     </main>
 </template>

From 3f956bfe879c49447cd6aa445e6e795ad8d8406b Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 23:16:05 +0600
Subject: [PATCH 13/15] fix(ui): improve dark mode hover/focus styling and
 localize chat guidelines

---
 resources/js/pages/Chat/Index.vue         | 28 +++++++++++------------
 resources/js/pages/admin/ChatSettings.vue | 12 +++++-----
 resources/js/pages/auth/Login.vue         |  2 +-
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index c8402dc..cc2b5dc 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -558,7 +558,7 @@ onUnmounted(() => {
             <button
                 type="button"
                 @click="showRulesModal = true"
-                class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl border border-slate-200/80 bg-slate-50/80 px-3 py-1.5 text-xs font-semibold text-slate-700 shadow-2xs transition hover:bg-slate-100 active:scale-95 dark:border-gray-700/80 dark:bg-gray-800/80 dark:text-gray-200 dark:hover:bg-gray-750"
+                class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl border border-slate-200/80 bg-slate-50/80 px-3 py-1.5 text-xs font-semibold text-slate-700 shadow-2xs transition hover:bg-slate-100 active:scale-95 dark:border-gray-700/80 dark:bg-gray-800/80 dark:text-gray-200 dark:hover:bg-gray-700"
                 title="Chat Rules & Guidelines"
             >
                 <Info class="h-4 w-4 text-indigo-600 dark:text-indigo-400" />
@@ -817,7 +817,7 @@ onUnmounted(() => {
                             :disabled="isSending || cooldownSeconds > 0"
                             :placeholder="activeReplyTo ? `Reply to ${activeReplyTo.user.name}...` : 'Type a message...'"
                             :maxlength="maxLengthLimit"
-                            class="dark:border-gray-750 w-full rounded-xl border border-slate-200 bg-slate-50/70 px-4 py-2.5 text-xs text-slate-800 placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:outline-none disabled:opacity-60 sm:text-sm dark:border-gray-700/80 dark:bg-gray-800/80 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
+                            class="w-full rounded-xl border border-slate-200 bg-slate-50/70 px-4 py-2.5 text-xs text-slate-800 placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:outline-none disabled:opacity-60 sm:text-sm dark:border-gray-700/80 dark:bg-gray-800/80 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
                         />
                         <span
                             v-if="inputContent.length > (maxLengthLimit - 80)"
@@ -1012,7 +1012,7 @@ onUnmounted(() => {
                                 Global Chat Rules & Guidelines
                             </h3>
                             <p class="text-xs text-slate-500 dark:text-gray-400">
-                                Please follow these standards to keep the space helpful and safe for all students.
+                                সবার জন্য চ্যাট নিরাপদ ও ফ্রেন্ডলি রাখতে নিচের নিয়মগুলো মেনে চলুন।
                             </p>
                         </div>
                     </div>
@@ -1032,8 +1032,8 @@ onUnmounted(() => {
                             1
                         </div>
                         <div>
-                            <strong class="font-semibold text-slate-900 dark:text-gray-100">Be Respectful & Constructive:</strong>
-                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">Treat fellow students, teachers, and moderators with dignity. Harassment, personal attacks, and hate speech are strictly prohibited.</p>
+                            <strong class="font-semibold text-slate-900 dark:text-gray-100">পরস্পরকে সম্মান করুন (Respectful Environment):</strong>
+                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">অন্য শিক্ষার্থী ও মডারেটরদের সাথে শালীন আচরণ বজায় রাখুন। কোনো ধরনের ব্যক্তিগত আক্রমণ, বুলিং বা হেট স্পিচ কঠোরভাবে নিষিদ্ধ।</p>
                         </div>
                     </div>
 
@@ -1042,8 +1042,8 @@ onUnmounted(() => {
                             2
                         </div>
                         <div>
-                            <strong class="font-semibold text-slate-900 dark:text-gray-100">No Vulgar or Abusive Language:</strong>
-                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">Avoid profanity, slang abuse, or bypass attempts in English, Bangla, or Banglish. Automated filters will block abusive messages.</p>
+                            <strong class="font-semibold text-slate-900 dark:text-gray-100">খারাপ ভাষা ও গালিগালাজ নিষেধ (No Abuse / Slang):</strong>
+                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">বাংলা, ইংরেজি বা বাংলিশ কোনো ভাষাতেই গালাগালি বা অশালীন শব্দ ব্যবহার করা যাবে না। এমন মেসেজ অটোমেটিক ব্লক হবে।</p>
                         </div>
                     </div>
 
@@ -1052,8 +1052,8 @@ onUnmounted(() => {
                             3
                         </div>
                         <div>
-                            <strong class="font-semibold text-slate-900 dark:text-gray-100">No Spamming or Flooding:</strong>
-                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">Do not send identical messages repeatedly, flood the chat, or post unsolicited advertisements and external links.</p>
+                            <strong class="font-semibold text-slate-900 dark:text-gray-100">স্প্যামিং ও অ্যাডভার্টাইজিং নিষেধ (No Spam):</strong>
+                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">একই মেসেজ বারবার পাঠানো, চ্যাট ফ্লাড করা বা অনুমতি ছাড়া কোনো প্রোমোশন বা অপ্রাসঙ্গিক লিংক শেয়ার করা যাবে না।</p>
                         </div>
                     </div>
 
@@ -1062,8 +1062,8 @@ onUnmounted(() => {
                             4
                         </div>
                         <div>
-                            <strong class="font-semibold text-slate-900 dark:text-gray-100">Report Inappropriate Content:</strong>
-                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">Use the flag/report button on any message that violates these guidelines. Moderators review reported content regularly.</p>
+                            <strong class="font-semibold text-slate-900 dark:text-gray-100">অনুপযুক্ত মেসেজ রিপোর্ট করুন (Report Violations):</strong>
+                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">কারো মেসেজে নিয়ম লঙ্ঘন দেখতে পেলে মেসেজের ডানপাশে থাকা ফ্ল্যাগ/রিপোর্ট বাটনে ক্লিক করে মডারেটরদের জানান।</p>
                         </div>
                     </div>
                 </div>
@@ -1072,10 +1072,10 @@ onUnmounted(() => {
                 <div class="rounded-xl border border-amber-200/80 bg-amber-50/70 p-3 text-[11px] text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-300">
                     <div class="flex items-center gap-1.5 font-bold">
                         <AlertCircle class="h-3.5 w-3.5 text-amber-600 dark:text-amber-400" />
-                        <span>Enforcement Policy:</span>
+                        <span>শাস্তি ও এনফোর্সমেন্ট:</span>
                     </div>
                     <p class="mt-1">
-                        Violating chat rules will lead to immediate message deletion and temporary or permanent chat bans.
+                        চ্যাটের নিয়ম ভঙ্গ করলে মেসেজ ডিলিট হওয়ার পাশাপাশি অ্যাকাউন্টে সাময়িক বা স্থায়ী চ্যাট ব্যান (Chat Ban) হতে পারে।
                     </p>
                 </div>
 
@@ -1086,7 +1086,7 @@ onUnmounted(() => {
                         @click="showRulesModal = false"
                         class="cursor-pointer rounded-xl bg-indigo-600 px-5 py-2 text-xs font-semibold text-white shadow-xs transition hover:bg-indigo-700 active:scale-95 dark:bg-indigo-500 dark:hover:bg-indigo-600"
                     >
-                        I Understand
+                        বুঝেছি (Close)
                     </button>
                 </div>
             </div>
diff --git a/resources/js/pages/admin/ChatSettings.vue b/resources/js/pages/admin/ChatSettings.vue
index a97ef71..3675a99 100644
--- a/resources/js/pages/admin/ChatSettings.vue
+++ b/resources/js/pages/admin/ChatSettings.vue
@@ -426,7 +426,7 @@ const lengthPresets = [
                             type="number"
                             min="0"
                             max="3600"
-                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400"
+                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
                         />
                         <span
                             class="absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
@@ -485,7 +485,7 @@ const lengthPresets = [
                             type="number"
                             min="20"
                             max="1000"
-                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400"
+                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
                         />
                         <span
                             class="absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
@@ -543,7 +543,7 @@ const lengthPresets = [
                             type="number"
                             min="50"
                             max="1000"
-                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400"
+                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
                         />
                         <span
                             class="absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
@@ -605,11 +605,11 @@ const lengthPresets = [
                     <textarea
                         v-model="form.banned_words"
                         rows="4"
-                        placeholder="e.g. fuck, bitch, chuda, khanki, etc."
-                        class="w-full rounded-xl border border-slate-200 bg-slate-50 p-3 text-xs text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 font-mono"
+                        placeholder="Enter offensive words or roots separated by commas or new lines..."
+                        class="w-full rounded-xl border border-slate-200 bg-slate-50 p-3 text-xs text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800/80 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800 font-mono"
                     ></textarea>
                     <p class="text-[11px] text-slate-400 dark:text-gray-500">
-                        The filter collapses repeated letters (e.g. "fuuuuck" &rarr; "fuck") and replaces common leet-speak (e.g. @ &rarr; a, $ &rarr; s, 0 &rarr; o).
+                        The filter automatically collapses repeated letters and replaces common leet-speak substitutions (e.g. @ &rarr; a, $ &rarr; s, 0 &rarr; o).
                     </p>
                 </div>
             </div>
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index 2b23c55..dac62a3 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -96,7 +96,7 @@ const googleAuthUrl = redirectParam
                 <!-- Main Action Button -->
                 <a
                     :href="googleAuthUrl"
-                    class="group dark:hover:bg-gray-750 flex w-full items-center justify-center gap-3 rounded-2xl border border-slate-200 bg-white px-4 py-3.5 text-sm font-bold text-slate-800 shadow-xs transition-all duration-200 hover:scale-[1.01] hover:border-slate-300 hover:bg-slate-50 hover:shadow-md active:scale-[0.98] dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:hover:border-gray-600"
+                    class="group flex w-full items-center justify-center gap-3 rounded-2xl border border-slate-200 bg-white px-4 py-3.5 text-sm font-bold text-slate-800 shadow-xs transition-all duration-200 hover:scale-[1.01] hover:border-slate-300 hover:bg-slate-50 hover:shadow-md active:scale-[0.98] dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:hover:border-gray-600 dark:hover:bg-gray-700/80"
                 >
                     <svg class="h-5 w-5 shrink-0" viewBox="0 0 24 24">
                         <path

From c62b49fa08c5e0c3659cc732e416962cdd6d557e Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 23:22:02 +0600
Subject: [PATCH 14/15] feat(chat): add custom maintenance notice, clean number
 inputs, and 5-report 1-day auto-ban

---
 app/Events/ChatSettingsUpdated.php            |  1 +
 .../Admin/ChatSettingsController.php          |  8 +-
 app/Http/Controllers/ChatController.php       | 24 ++++-
 resources/js/pages/Chat/Index.vue             | 10 +-
 resources/js/pages/admin/ChatSettings.vue     | 93 +++++++------------
 5 files changed, 69 insertions(+), 67 deletions(-)

diff --git a/app/Events/ChatSettingsUpdated.php b/app/Events/ChatSettingsUpdated.php
index 77f5690..df3bea4 100644
--- a/app/Events/ChatSettingsUpdated.php
+++ b/app/Events/ChatSettingsUpdated.php
@@ -23,6 +23,7 @@ public function __construct()
         $this->settings = [
             'enabled' => (bool) AppSetting::get('global_chat_enabled', true),
             'audience' => AppSetting::get('global_chat_audience', 'verified_members'),
+            'disabled_reason' => (string) AppSetting::get('global_chat_disabled_reason', ''),
             'cooldown_seconds' => (int) AppSetting::get('global_chat_cooldown_seconds', 30),
             'max_messages' => (int) AppSetting::get('global_chat_max_messages', 200),
             'max_length' => (int) AppSetting::get('global_chat_max_length', 280),
diff --git a/app/Http/Controllers/Admin/ChatSettingsController.php b/app/Http/Controllers/Admin/ChatSettingsController.php
index b1f3c7d..421e1bb 100644
--- a/app/Http/Controllers/Admin/ChatSettingsController.php
+++ b/app/Http/Controllers/Admin/ChatSettingsController.php
@@ -20,6 +20,7 @@ public function edit()
             'settings' => [
                 'enabled' => (bool) AppSetting::get('global_chat_enabled', true),
                 'audience' => AppSetting::get('global_chat_audience', 'verified_members'),
+                'disabled_reason' => (string) AppSetting::get('global_chat_disabled_reason', ''),
                 'cooldown_seconds' => (int) AppSetting::get('global_chat_cooldown_seconds', 30),
                 'max_messages' => (int) AppSetting::get('global_chat_max_messages', 200),
                 'max_length' => (int) AppSetting::get('global_chat_max_length', 280),
@@ -74,8 +75,9 @@ public function reports()
     public function update(Request $request)
     {
         $validated = $request->validate([
-            'enabled' => ['required', 'boolean'],
+            'enabled' => ['nullable', 'boolean'],
             'audience' => ['required', 'string', 'in:verified_members,all,disabled'],
+            'disabled_reason' => ['nullable', 'string', 'max:255'],
             'cooldown_seconds' => ['required', 'integer', 'min:0', 'max:3600'],
             'max_messages' => ['required', 'integer', 'min:20', 'max:1000'],
             'max_length' => ['required', 'integer', 'min:50', 'max:1000'],
@@ -83,8 +85,10 @@ public function update(Request $request)
             'banned_words' => ['nullable', 'string'],
         ]);
 
-        AppSetting::set('global_chat_enabled', $validated['enabled'], 'boolean');
+        $isEnabled = $validated['audience'] !== 'disabled';
+        AppSetting::set('global_chat_enabled', $isEnabled, 'boolean');
         AppSetting::set('global_chat_audience', $validated['audience'], 'string');
+        AppSetting::set('global_chat_disabled_reason', $validated['disabled_reason'] ?? '', 'string');
         AppSetting::set('global_chat_cooldown_seconds', $validated['cooldown_seconds'], 'integer');
         AppSetting::set('global_chat_max_messages', $validated['max_messages'], 'integer');
         AppSetting::set('global_chat_max_length', $validated['max_length'], 'integer');
diff --git a/app/Http/Controllers/ChatController.php b/app/Http/Controllers/ChatController.php
index 2f7070e..cfc14ea 100644
--- a/app/Http/Controllers/ChatController.php
+++ b/app/Http/Controllers/ChatController.php
@@ -30,7 +30,8 @@ public function index(Request $request)
         $reason = null;
 
         if (! $isEnabled || $audience === 'disabled') {
-            $reason = 'Global chat is currently disabled for maintenance.';
+            $customReason = trim((string) AppSetting::get('global_chat_disabled_reason', ''));
+            $reason = ! empty($customReason) ? $customReason : 'Global chat is currently disabled for maintenance.';
         } elseif (! $user) {
             $reason = 'Please sign in to join the conversation.';
         } elseif ($user->isChatBanned()) {
@@ -116,7 +117,10 @@ public function store(Request $request)
 
         // Check if chat is enabled
         if (! $isEnabled || $audience === 'disabled') {
-            return response()->json(['message' => 'Global chat is currently disabled.'], 403);
+            $customReason = trim((string) AppSetting::get('global_chat_disabled_reason', ''));
+            $msg = ! empty($customReason) ? $customReason : 'Global chat is currently disabled.';
+
+            return response()->json(['message' => $msg], 403);
         }
 
         // Check if user is chat banned
@@ -282,6 +286,22 @@ public function report(Request $request)
             'status' => 'pending',
         ]);
 
+        // Auto-ban logic: If the reported user has 5 or more reports on this message/content, auto-ban for 1 day
+        if (! empty($validated['reported_user_id'])) {
+            $reportedUser = \App\Models\User::find($validated['reported_user_id']);
+            if ($reportedUser && ! $reportedUser->can('view admin')) {
+                $totalReportsForMessage = \App\Models\ChatReport::where('reported_user_id', $reportedUser->id)
+                    ->where('message_content', $validated['message_content'])
+                    ->count();
+
+                if ($totalReportsForMessage >= 5) {
+                    $reportedUser->update([
+                        'chat_banned_until' => now()->addDay(),
+                    ]);
+                }
+            }
+        }
+
         return response()->json([
             'message' => 'Message reported successfully. Our team will review it.',
             'report_id' => $report->id,
diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index cc2b5dc..4d3170d 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -269,7 +269,9 @@ const setupRealtime = () => {
                     if (!e.settings.enabled || e.settings.audience === 'disabled') {
                         canPost.value = false;
                         restrictionReason.value =
-                            'Global chat is currently disabled for maintenance.';
+                            e.settings.disabled_reason && e.settings.disabled_reason.trim() !== ''
+                                ? e.settings.disabled_reason.trim()
+                                : 'Global chat is currently disabled for maintenance.';
                     } else if (!user) {
                         canPost.value = false;
                         restrictionReason.value =
@@ -1072,10 +1074,10 @@ onUnmounted(() => {
                 <div class="rounded-xl border border-amber-200/80 bg-amber-50/70 p-3 text-[11px] text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-300">
                     <div class="flex items-center gap-1.5 font-bold">
                         <AlertCircle class="h-3.5 w-3.5 text-amber-600 dark:text-amber-400" />
-                        <span>শাস্তি ও এনফোর্সমেন্ট:</span>
+                        <span>অটো-ব্যান ও এনফোর্সমেন্ট পলিসি:</span>
                     </div>
-                    <p class="mt-1">
-                        চ্যাটের নিয়ম ভঙ্গ করলে মেসেজ ডিলিট হওয়ার পাশাপাশি অ্যাকাউন্টে সাময়িক বা স্থায়ী চ্যাট ব্যান (Chat Ban) হতে পারে।
+                    <p class="mt-1 leading-relaxed">
+                        একটি মেসেজে ৫ জন শিক্ষার্থীর রিপোর্ট (৫ Reports) পড়লে সংশ্লিষ্ট ব্যবহারকারী <strong>স্বয়ংক্রিয়ভাবে ১ দিনের জন্য চ্যাট ব্যান</strong> হবেন। এছাড়া নিয়ম ভঙ্গে মডারেটররা তাৎক্ষণিক স্থায়ী ব্যান দিতে পারেন।
                     </p>
                 </div>
 
diff --git a/resources/js/pages/admin/ChatSettings.vue b/resources/js/pages/admin/ChatSettings.vue
index 3675a99..5029b91 100644
--- a/resources/js/pages/admin/ChatSettings.vue
+++ b/resources/js/pages/admin/ChatSettings.vue
@@ -19,6 +19,7 @@ interface ChatSettingsProps {
     settings: {
         enabled: boolean;
         audience: string;
+        disabled_reason?: string;
         cooldown_seconds: number;
         max_messages: number;
         max_length: number;
@@ -35,6 +36,7 @@ const props = defineProps<ChatSettingsProps>();
 const form = useForm({
     enabled: props.settings.enabled,
     audience: props.settings.audience,
+    disabled_reason: props.settings.disabled_reason ?? '',
     cooldown_seconds: props.settings.cooldown_seconds,
     max_messages: props.settings.max_messages ?? 200,
     max_length: props.settings.max_length ?? 280,
@@ -115,7 +117,7 @@ const lengthPresets = [
                 <span
                     class="inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs font-bold"
                     :class="
-                        form.enabled && form.audience !== 'disabled'
+                        form.audience !== 'disabled'
                             ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-300'
                             : 'bg-rose-50 text-rose-700 dark:bg-rose-950/60 dark:text-rose-300'
                     "
@@ -123,13 +125,13 @@ const lengthPresets = [
                     <span
                         class="h-2 w-2 rounded-full"
                         :class="
-                            form.enabled && form.audience !== 'disabled'
+                            form.audience !== 'disabled'
                                 ? 'animate-pulse bg-emerald-500'
                                 : 'bg-rose-500'
                         "
                     ></span>
                     {{
-                        form.enabled && form.audience !== 'disabled'
+                        form.audience !== 'disabled'
                             ? 'Chat Live'
                             : 'Chat Inactive'
                     }}
@@ -220,59 +222,17 @@ const lengthPresets = [
                     {{ form.cooldown_seconds }}s
                 </p>
                 <span class="text-[11px] text-slate-400 dark:text-gray-500"
-                    >Per-user delay between messages</span
+                    >Interval per student</span
                 >
             </div>
         </div>
 
-        <!-- Chat Configuration Form -->
+        <!-- Settings Form -->
         <form
             @submit.prevent="submitSettings"
-            class="space-y-6 rounded-2xl border border-slate-200/80 bg-white p-5 sm:p-7 dark:border-gray-800 dark:bg-gray-900"
+            class="space-y-6 rounded-3xl border border-slate-200/80 bg-white p-6 shadow-xs sm:p-8 dark:border-gray-800 dark:bg-gray-900"
         >
-            <!-- 1. Master Toggle -->
-            <div
-                class="flex flex-col gap-4 border-b border-slate-100 pb-5 sm:flex-row sm:items-center sm:justify-between dark:border-gray-800"
-            >
-                <div>
-                    <label
-                        class="text-sm font-bold text-slate-900 dark:text-gray-100"
-                    >
-                        Enable Global Chat Service
-                    </label>
-                    <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
-                        Turn the global student chat completely on or off
-                        globally.
-                    </p>
-                </div>
-
-                <div class="flex items-center gap-3">
-                    <button
-                        type="button"
-                        @click="form.enabled = !form.enabled"
-                        class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none"
-                        :class="
-                            form.enabled
-                                ? 'bg-indigo-600 dark:bg-indigo-500'
-                                : 'bg-slate-200 dark:bg-gray-700'
-                        "
-                    >
-                        <span
-                            class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
-                            :class="
-                                form.enabled ? 'translate-x-5' : 'translate-x-0'
-                            "
-                        ></span>
-                    </button>
-                    <span
-                        class="text-xs font-bold text-slate-700 dark:text-gray-300"
-                    >
-                        {{ form.enabled ? 'Enabled' : 'Disabled' }}
-                    </span>
-                </div>
-            </div>
-
-            <!-- 2. Audience Eligibility -->
+            <!-- 1. Audience Eligibility & Status -->
             <div
                 class="space-y-3 border-b border-slate-100 pb-6 dark:border-gray-800"
             >
@@ -281,11 +241,10 @@ const lengthPresets = [
                         class="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-gray-100"
                     >
                         <Users class="h-4 w-4 text-indigo-500" />
-                        Target Audience & Rollout Eligibility
+                        Target Audience & Chat Status
                     </label>
                     <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
-                        Choose who is permitted to send messages in the student
-                        lounge without code changes.
+                        Choose who is permitted to send messages in the student lounge, or pause posting.
                     </p>
                 </div>
 
@@ -359,7 +318,7 @@ const lengthPresets = [
                         <div class="mb-1.5 flex items-center justify-between">
                             <span
                                 class="text-xs font-bold text-slate-900 dark:text-gray-100"
-                                >Read-Only Mode</span
+                                >Disabled (Read-Only)</span
                             >
                             <input
                                 type="radio"
@@ -376,6 +335,22 @@ const lengthPresets = [
                         </p>
                     </label>
                 </div>
+
+                <!-- Custom Disabled / Maintenance Notice Input -->
+                <div v-if="form.audience === 'disabled'" class="mt-3 rounded-2xl border border-rose-200/80 bg-rose-50/40 p-4 dark:border-rose-900/40 dark:bg-rose-950/20">
+                    <label class="block text-xs font-semibold text-rose-900 dark:text-rose-300">
+                        Custom Notice Message for Students (Optional):
+                    </label>
+                    <input
+                        v-model="form.disabled_reason"
+                        type="text"
+                        placeholder="e.g. Chat is temporarily paused during HSC ICT exam. Will resume at 4:00 PM."
+                        class="mt-1.5 w-full rounded-xl border border-rose-200 bg-white px-3.5 py-2 text-xs text-slate-800 focus:border-rose-500 focus:outline-none dark:border-rose-800/80 dark:bg-gray-800 dark:text-gray-100 dark:focus:border-rose-400"
+                    />
+                    <p class="mt-1 text-[11px] text-rose-700/80 dark:text-rose-400/80">
+                        Leave blank to show the default notice: <em>"Global chat is currently disabled for maintenance."</em>
+                    </p>
+                </div>
             </div>
 
             <!-- 3. Cooldown Interval / Rate Limit Configuration -->
@@ -426,10 +401,10 @@ const lengthPresets = [
                             type="number"
                             min="0"
                             max="3600"
-                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
+                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 pr-20 py-2 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                         />
                         <span
-                            class="absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
+                            class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
                         >
                             seconds
                         </span>
@@ -485,10 +460,10 @@ const lengthPresets = [
                             type="number"
                             min="20"
                             max="1000"
-                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
+                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 pr-20 py-2 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                         />
                         <span
-                            class="absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
+                            class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
                         >
                             messages
                         </span>
@@ -543,10 +518,10 @@ const lengthPresets = [
                             type="number"
                             min="50"
                             max="1000"
-                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
+                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 pr-14 py-2 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                         />
                         <span
-                            class="absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
+                            class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
                         >
                             chars
                         </span>

From 0449dac2ecc22a929ed480f5f6391f950b785fca Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 23:24:04 +0600
Subject: [PATCH 15/15] style: format resources with prettier

---
 resources/js/pages/Chat/Index.vue             | 242 ++++++++++++++----
 resources/js/pages/admin/ChatSettings.vue     |  59 +++--
 resources/js/pages/admin/chat/Reports.vue     | 157 +++++++++---
 .../js/pages/admin/users/CreateOrEdit.vue     |  28 +-
 4 files changed, 374 insertions(+), 112 deletions(-)

diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index 4d3170d..8ebdedb 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -1,6 +1,22 @@
 <script setup lang="ts">
 import { Head, Link, usePage } from '@inertiajs/vue3';
-import { Send, Trash2, Lock, Loader2, LogIn, ArrowDown, ShieldAlert, Pencil, Flag, Check, X, Reply, Info, ShieldCheck, AlertCircle } from 'lucide-vue-next';
+import {
+    Send,
+    Trash2,
+    Lock,
+    Loader2,
+    LogIn,
+    ArrowDown,
+    ShieldAlert,
+    Pencil,
+    Flag,
+    Check,
+    X,
+    Reply,
+    Info,
+    ShieldCheck,
+    AlertCircle,
+} from 'lucide-vue-next';
 import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
 import VerifiedBadge from '@/components/VerifiedBadge.vue';
 import { getEcho } from '@/lib/echo';
@@ -266,10 +282,14 @@ const setupRealtime = () => {
 
                     // Dynamically update permissions
                     const user = currentUser.value;
-                    if (!e.settings.enabled || e.settings.audience === 'disabled') {
+                    if (
+                        !e.settings.enabled ||
+                        e.settings.audience === 'disabled'
+                    ) {
                         canPost.value = false;
                         restrictionReason.value =
-                            e.settings.disabled_reason && e.settings.disabled_reason.trim() !== ''
+                            e.settings.disabled_reason &&
+                            e.settings.disabled_reason.trim() !== ''
                                 ? e.settings.disabled_reason.trim()
                                 : 'Global chat is currently disabled for maintenance.';
                     } else if (!user) {
@@ -453,13 +473,15 @@ const submitReport = async () => {
         });
 
         if (res.ok) {
-            reportSuccessMessage.value = 'Thank you. The report has been sent to our moderators.';
+            reportSuccessMessage.value =
+                'Thank you. The report has been sent to our moderators.';
             setTimeout(() => {
                 closeReportModal();
             }, 1800);
         } else {
             const err = await res.json();
-            reportErrorMessage.value = err.message || 'Failed to submit report.';
+            reportErrorMessage.value =
+                err.message || 'Failed to submit report.';
         }
     } catch {
         reportErrorMessage.value = 'Network error. Please try again.';
@@ -542,7 +564,9 @@ onUnmounted(() => {
 
     <main class="mx-auto max-w-4xl px-4 py-4 sm:px-6 sm:py-6 lg:px-8">
         <!-- Compact Page Title & Subtitle + Rules Button -->
-        <div class="mb-3 flex items-center justify-between border-b border-slate-100 pb-3 dark:border-gray-800">
+        <div
+            class="mb-3 flex items-center justify-between border-b border-slate-100 pb-3 dark:border-gray-800"
+        >
             <div>
                 <h1
                     class="text-2xl font-extrabold tracking-tight text-slate-900 sm:text-3xl dark:text-gray-100"
@@ -552,7 +576,8 @@ onUnmounted(() => {
                 <p
                     class="mt-0.5 text-xs text-slate-500 sm:text-sm dark:text-gray-400"
                 >
-                    অন্যান্য শিক্ষার্থীদের সাথে সরাসরি কথা বলুন ও প্রশ্ন শেয়ার করুন।
+                    অন্যান্য শিক্ষার্থীদের সাথে সরাসরি কথা বলুন ও প্রশ্ন শেয়ার
+                    করুন।
                 </p>
             </div>
 
@@ -618,7 +643,7 @@ onUnmounted(() => {
                                 ? 'bg-indigo-50/50 dark:bg-indigo-950/20'
                                 : 'hover:bg-slate-50 dark:hover:bg-gray-800/40',
                             highlightedMessageId === msg.id
-                                ? 'ring-2 ring-indigo-500 bg-indigo-100/70 dark:bg-indigo-950/60'
+                                ? 'bg-indigo-100/70 ring-2 ring-indigo-500 dark:bg-indigo-950/60'
                                 : '',
                         ]"
                     >
@@ -739,12 +764,26 @@ onUnmounted(() => {
                             <!-- Quoted Parent Snapshot (If Reply) -->
                             <div
                                 v-if="msg.reply_to_content"
-                                @click="msg.reply_to_id ? scrollToMessage(msg.reply_to_id) : null"
+                                @click="
+                                    msg.reply_to_id
+                                        ? scrollToMessage(msg.reply_to_id)
+                                        : null
+                                "
                                 class="mt-1.5 flex items-center gap-1.5 rounded-lg border-l-2 border-indigo-500 bg-slate-100/70 px-2.5 py-1 text-[11px] text-slate-600 transition dark:border-indigo-400 dark:bg-gray-800/60 dark:text-gray-300"
-                                :class="msg.reply_to_id ? 'cursor-pointer hover:bg-indigo-50/60 dark:hover:bg-indigo-950/30' : ''"
-                                :title="msg.reply_to_id ? 'Click to jump to original message' : ''"
+                                :class="
+                                    msg.reply_to_id
+                                        ? 'cursor-pointer hover:bg-indigo-50/60 dark:hover:bg-indigo-950/30'
+                                        : ''
+                                "
+                                :title="
+                                    msg.reply_to_id
+                                        ? 'Click to jump to original message'
+                                        : ''
+                                "
                             >
-                                <Reply class="h-3 w-3 shrink-0 text-indigo-500 dark:text-indigo-400" />
+                                <Reply
+                                    class="h-3 w-3 shrink-0 text-indigo-500 dark:text-indigo-400"
+                                />
                                 <span class="truncate italic">
                                     "{{ msg.reply_to_content }}"
                                 </span>
@@ -789,10 +828,18 @@ onUnmounted(() => {
                     class="mb-2 flex items-center justify-between rounded-xl border border-indigo-100 bg-indigo-50/70 px-3 py-1.5 text-xs text-indigo-900 dark:border-indigo-900/50 dark:bg-indigo-950/40 dark:text-indigo-200"
                 >
                     <div class="flex min-w-0 items-center gap-1.5 truncate">
-                        <Reply class="h-3.5 w-3.5 shrink-0 text-indigo-600 dark:text-indigo-400" />
+                        <Reply
+                            class="h-3.5 w-3.5 shrink-0 text-indigo-600 dark:text-indigo-400"
+                        />
                         <span class="truncate">
-                            Replying to <strong class="font-semibold">{{ activeReplyTo.user.name }}</strong>:
-                            <span class="opacity-80 italic">"{{ activeReplyTo.content }}"</span>
+                            Replying to
+                            <strong class="font-semibold">{{
+                                activeReplyTo.user.name
+                            }}</strong
+                            >:
+                            <span class="italic opacity-80"
+                                >"{{ activeReplyTo.content }}"</span
+                            >
                         </span>
                     </div>
                     <button
@@ -817,12 +864,16 @@ onUnmounted(() => {
                             v-model="inputContent"
                             type="text"
                             :disabled="isSending || cooldownSeconds > 0"
-                            :placeholder="activeReplyTo ? `Reply to ${activeReplyTo.user.name}...` : 'Type a message...'"
+                            :placeholder="
+                                activeReplyTo
+                                    ? `Reply to ${activeReplyTo.user.name}...`
+                                    : 'Type a message...'
+                            "
                             :maxlength="maxLengthLimit"
                             class="w-full rounded-xl border border-slate-200 bg-slate-50/70 px-4 py-2.5 text-xs text-slate-800 placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:outline-none disabled:opacity-60 sm:text-sm dark:border-gray-700/80 dark:bg-gray-800/80 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
                         />
                         <span
-                            v-if="inputContent.length > (maxLengthLimit - 80)"
+                            v-if="inputContent.length > maxLengthLimit - 80"
                             class="absolute top-1/2 right-3.5 -translate-y-1/2 text-[10px] font-medium text-slate-400 dark:text-gray-500"
                         >
                             {{ maxLengthLimit - inputContent.length }}
@@ -889,12 +940,18 @@ onUnmounted(() => {
             <div
                 class="w-full max-w-md rounded-2xl border border-slate-200 bg-white p-5 shadow-xl sm:p-6 dark:border-gray-800 dark:bg-gray-900"
             >
-                <div class="flex items-center justify-between border-b border-slate-100 pb-3.5 dark:border-gray-800">
+                <div
+                    class="flex items-center justify-between border-b border-slate-100 pb-3.5 dark:border-gray-800"
+                >
                     <div class="flex items-center gap-2">
-                        <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-50 text-amber-600 dark:bg-amber-950/60 dark:text-amber-400">
+                        <div
+                            class="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-50 text-amber-600 dark:bg-amber-950/60 dark:text-amber-400"
+                        >
                             <Flag class="h-4 w-4" />
                         </div>
-                        <h3 class="text-sm font-bold text-slate-900 dark:text-gray-100">
+                        <h3
+                            class="text-sm font-bold text-slate-900 dark:text-gray-100"
+                        >
                             Report Message
                         </h3>
                     </div>
@@ -912,16 +969,24 @@ onUnmounted(() => {
                     v-if="reportSuccessMessage"
                     class="my-6 flex flex-col items-center justify-center py-4 text-center"
                 >
-                    <div class="flex h-12 w-12 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-950/60 dark:text-emerald-400">
+                    <div
+                        class="flex h-12 w-12 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-950/60 dark:text-emerald-400"
+                    >
                         <Check class="h-6 w-6" />
                     </div>
-                    <p class="mt-3 text-xs font-semibold text-emerald-700 dark:text-emerald-300">
+                    <p
+                        class="mt-3 text-xs font-semibold text-emerald-700 dark:text-emerald-300"
+                    >
                         {{ reportSuccessMessage }}
                     </p>
                 </div>
 
                 <!-- Form Content -->
-                <form v-else @submit.prevent="submitReport" class="mt-4 space-y-4">
+                <form
+                    v-else
+                    @submit.prevent="submitReport"
+                    class="mt-4 space-y-4"
+                >
                     <!-- Error notice if duplicate or validation fails -->
                     <div
                         v-if="reportErrorMessage"
@@ -931,21 +996,35 @@ onUnmounted(() => {
                     </div>
 
                     <!-- Message Preview Snapshot -->
-                    <div class="rounded-xl border border-slate-200/80 bg-slate-50/80 p-3 dark:border-gray-800 dark:bg-gray-800/60">
-                        <div class="flex items-center justify-between text-[11px] text-slate-500 dark:text-gray-400">
-                            <span class="font-semibold text-slate-700 dark:text-gray-300">
-                                {{ reportingMessage.user.name }} (@{{ reportingMessage.user.username }})
+                    <div
+                        class="rounded-xl border border-slate-200/80 bg-slate-50/80 p-3 dark:border-gray-800 dark:bg-gray-800/60"
+                    >
+                        <div
+                            class="flex items-center justify-between text-[11px] text-slate-500 dark:text-gray-400"
+                        >
+                            <span
+                                class="font-semibold text-slate-700 dark:text-gray-300"
+                            >
+                                {{ reportingMessage.user.name }} (@{{
+                                    reportingMessage.user.username
+                                }})
                             </span>
-                            <span>{{ formatTime(reportingMessage.created_at) }}</span>
+                            <span>{{
+                                formatTime(reportingMessage.created_at)
+                            }}</span>
                         </div>
-                        <p class="mt-1.5 text-xs text-slate-800 break-words dark:text-gray-200">
+                        <p
+                            class="mt-1.5 text-xs break-words text-slate-800 dark:text-gray-200"
+                        >
                             "{{ reportingMessage.content }}"
                         </p>
                     </div>
 
                     <!-- Reason Selection -->
                     <div>
-                        <label class="mb-1.5 block text-xs font-semibold text-slate-700 dark:text-gray-300">
+                        <label
+                            class="mb-1.5 block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                        >
                             Why are you reporting this message?
                         </label>
                         <select
@@ -1004,17 +1083,26 @@ onUnmounted(() => {
                 class="relative w-full max-w-lg overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 shadow-2xl transition-all sm:p-6 dark:border-gray-800 dark:bg-gray-900"
             >
                 <!-- Modal Header -->
-                <div class="flex items-start justify-between border-b border-slate-100 pb-4 dark:border-gray-800">
+                <div
+                    class="flex items-start justify-between border-b border-slate-100 pb-4 dark:border-gray-800"
+                >
                     <div class="flex items-center gap-3">
-                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600 dark:bg-indigo-950/60 dark:text-indigo-400">
+                        <div
+                            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600 dark:bg-indigo-950/60 dark:text-indigo-400"
+                        >
                             <ShieldCheck class="h-5 w-5" />
                         </div>
                         <div>
-                            <h3 class="text-base font-bold text-slate-900 dark:text-gray-100">
+                            <h3
+                                class="text-base font-bold text-slate-900 dark:text-gray-100"
+                            >
                                 Global Chat Rules & Guidelines
                             </h3>
-                            <p class="text-xs text-slate-500 dark:text-gray-400">
-                                সবার জন্য চ্যাট নিরাপদ ও ফ্রেন্ডলি রাখতে নিচের নিয়মগুলো মেনে চলুন।
+                            <p
+                                class="text-xs text-slate-500 dark:text-gray-400"
+                            >
+                                সবার জন্য চ্যাট নিরাপদ ও ফ্রেন্ডলি রাখতে নিচের
+                                নিয়মগুলো মেনে চলুন।
                             </p>
                         </div>
                     </div>
@@ -1028,56 +1116,108 @@ onUnmounted(() => {
                 </div>
 
                 <!-- Rules List -->
-                <div class="my-4 space-y-3.5 text-xs text-slate-700 dark:text-gray-300">
+                <div
+                    class="my-4 space-y-3.5 text-xs text-slate-700 dark:text-gray-300"
+                >
                     <div class="flex items-start gap-2.5">
-                        <div class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 font-bold text-[11px] text-emerald-700 dark:bg-emerald-950/70 dark:text-emerald-300">
+                        <div
+                            class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-[11px] font-bold text-emerald-700 dark:bg-emerald-950/70 dark:text-emerald-300"
+                        >
                             1
                         </div>
                         <div>
-                            <strong class="font-semibold text-slate-900 dark:text-gray-100">পরস্পরকে সম্মান করুন (Respectful Environment):</strong>
-                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">অন্য শিক্ষার্থী ও মডারেটরদের সাথে শালীন আচরণ বজায় রাখুন। কোনো ধরনের ব্যক্তিগত আক্রমণ, বুলিং বা হেট স্পিচ কঠোরভাবে নিষিদ্ধ।</p>
+                            <strong
+                                class="font-semibold text-slate-900 dark:text-gray-100"
+                                >পরস্পরকে সম্মান করুন (Respectful
+                                Environment):</strong
+                            >
+                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">
+                                অন্য শিক্ষার্থী ও মডারেটরদের সাথে শালীন আচরণ
+                                বজায় রাখুন। কোনো ধরনের ব্যক্তিগত আক্রমণ, বুলিং
+                                বা হেট স্পিচ কঠোরভাবে নিষিদ্ধ।
+                            </p>
                         </div>
                     </div>
 
                     <div class="flex items-start gap-2.5">
-                        <div class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 font-bold text-[11px] text-emerald-700 dark:bg-emerald-950/70 dark:text-emerald-300">
+                        <div
+                            class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-[11px] font-bold text-emerald-700 dark:bg-emerald-950/70 dark:text-emerald-300"
+                        >
                             2
                         </div>
                         <div>
-                            <strong class="font-semibold text-slate-900 dark:text-gray-100">খারাপ ভাষা ও গালিগালাজ নিষেধ (No Abuse / Slang):</strong>
-                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">বাংলা, ইংরেজি বা বাংলিশ কোনো ভাষাতেই গালাগালি বা অশালীন শব্দ ব্যবহার করা যাবে না। এমন মেসেজ অটোমেটিক ব্লক হবে।</p>
+                            <strong
+                                class="font-semibold text-slate-900 dark:text-gray-100"
+                                >খারাপ ভাষা ও গালিগালাজ নিষেধ (No Abuse /
+                                Slang):</strong
+                            >
+                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">
+                                বাংলা, ইংরেজি বা বাংলিশ কোনো ভাষাতেই গালাগালি বা
+                                অশালীন শব্দ ব্যবহার করা যাবে না। এমন মেসেজ
+                                অটোমেটিক ব্লক হবে।
+                            </p>
                         </div>
                     </div>
 
                     <div class="flex items-start gap-2.5">
-                        <div class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 font-bold text-[11px] text-emerald-700 dark:bg-emerald-950/70 dark:text-emerald-300">
+                        <div
+                            class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-[11px] font-bold text-emerald-700 dark:bg-emerald-950/70 dark:text-emerald-300"
+                        >
                             3
                         </div>
                         <div>
-                            <strong class="font-semibold text-slate-900 dark:text-gray-100">স্প্যামিং ও অ্যাডভার্টাইজিং নিষেধ (No Spam):</strong>
-                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">একই মেসেজ বারবার পাঠানো, চ্যাট ফ্লাড করা বা অনুমতি ছাড়া কোনো প্রোমোশন বা অপ্রাসঙ্গিক লিংক শেয়ার করা যাবে না।</p>
+                            <strong
+                                class="font-semibold text-slate-900 dark:text-gray-100"
+                                >স্প্যামিং ও অ্যাডভার্টাইজিং নিষেধ (No
+                                Spam):</strong
+                            >
+                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">
+                                একই মেসেজ বারবার পাঠানো, চ্যাট ফ্লাড করা বা
+                                অনুমতি ছাড়া কোনো প্রোমোশন বা অপ্রাসঙ্গিক লিংক
+                                শেয়ার করা যাবে না।
+                            </p>
                         </div>
                     </div>
 
                     <div class="flex items-start gap-2.5">
-                        <div class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 font-bold text-[11px] text-emerald-700 dark:bg-emerald-950/70 dark:text-emerald-300">
+                        <div
+                            class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-[11px] font-bold text-emerald-700 dark:bg-emerald-950/70 dark:text-emerald-300"
+                        >
                             4
                         </div>
                         <div>
-                            <strong class="font-semibold text-slate-900 dark:text-gray-100">অনুপযুক্ত মেসেজ রিপোর্ট করুন (Report Violations):</strong>
-                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">কারো মেসেজে নিয়ম লঙ্ঘন দেখতে পেলে মেসেজের ডানপাশে থাকা ফ্ল্যাগ/রিপোর্ট বাটনে ক্লিক করে মডারেটরদের জানান।</p>
+                            <strong
+                                class="font-semibold text-slate-900 dark:text-gray-100"
+                                >অনুপযুক্ত মেসেজ রিপোর্ট করুন (Report
+                                Violations):</strong
+                            >
+                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">
+                                কারো মেসেজে নিয়ম লঙ্ঘন দেখতে পেলে মেসেজের
+                                ডানপাশে থাকা ফ্ল্যাগ/রিপোর্ট বাটনে ক্লিক করে
+                                মডারেটরদের জানান।
+                            </p>
                         </div>
                     </div>
                 </div>
 
                 <!-- Notice -->
-                <div class="rounded-xl border border-amber-200/80 bg-amber-50/70 p-3 text-[11px] text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-300">
+                <div
+                    class="rounded-xl border border-amber-200/80 bg-amber-50/70 p-3 text-[11px] text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-300"
+                >
                     <div class="flex items-center gap-1.5 font-bold">
-                        <AlertCircle class="h-3.5 w-3.5 text-amber-600 dark:text-amber-400" />
+                        <AlertCircle
+                            class="h-3.5 w-3.5 text-amber-600 dark:text-amber-400"
+                        />
                         <span>অটো-ব্যান ও এনফোর্সমেন্ট পলিসি:</span>
                     </div>
                     <p class="mt-1 leading-relaxed">
-                        একটি মেসেজে ৫ জন শিক্ষার্থীর রিপোর্ট (৫ Reports) পড়লে সংশ্লিষ্ট ব্যবহারকারী <strong>স্বয়ংক্রিয়ভাবে ১ দিনের জন্য চ্যাট ব্যান</strong> হবেন। এছাড়া নিয়ম ভঙ্গে মডারেটররা তাৎক্ষণিক স্থায়ী ব্যান দিতে পারেন।
+                        একটি মেসেজে ৫ জন শিক্ষার্থীর রিপোর্ট (৫ Reports) পড়লে
+                        সংশ্লিষ্ট ব্যবহারকারী
+                        <strong
+                            >স্বয়ংক্রিয়ভাবে ১ দিনের জন্য চ্যাট ব্যান</strong
+                        >
+                        হবেন। এছাড়া নিয়ম ভঙ্গে মডারেটররা তাৎক্ষণিক স্থায়ী ব্যান
+                        দিতে পারেন।
                     </p>
                 </div>
 
diff --git a/resources/js/pages/admin/ChatSettings.vue b/resources/js/pages/admin/ChatSettings.vue
index 5029b91..35e73e7 100644
--- a/resources/js/pages/admin/ChatSettings.vue
+++ b/resources/js/pages/admin/ChatSettings.vue
@@ -140,10 +140,12 @@ const lengthPresets = [
         </div>
 
         <!-- Global Chat Management Route Tabs -->
-        <div class="flex items-center gap-2 border-b border-slate-200 dark:border-gray-800">
+        <div
+            class="flex items-center gap-2 border-b border-slate-200 dark:border-gray-800"
+        >
             <Link
                 href="/admin/chat"
-                class="flex items-center gap-2 border-b-2 px-4 py-2.5 text-xs font-bold transition-all border-indigo-600 text-indigo-600 dark:border-indigo-400 dark:text-indigo-400"
+                class="flex items-center gap-2 border-b-2 border-indigo-600 px-4 py-2.5 text-xs font-bold text-indigo-600 transition-all dark:border-indigo-400 dark:text-indigo-400"
             >
                 <MessageCircle class="h-4 w-4" />
                 <span>Chat Configuration</span>
@@ -157,7 +159,7 @@ const lengthPresets = [
                 <span>Reported Messages</span>
                 <span
                     v-if="pendingReportsCount && pendingReportsCount > 0"
-                    class="rounded-full bg-rose-500 px-1.5 py-0.2 text-[10px] font-bold text-white"
+                    class="py-0.2 rounded-full bg-rose-500 px-1.5 text-[10px] font-bold text-white"
                 >
                     {{ pendingReportsCount }}
                 </span>
@@ -244,7 +246,8 @@ const lengthPresets = [
                         Target Audience & Chat Status
                     </label>
                     <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
-                        Choose who is permitted to send messages in the student lounge, or pause posting.
+                        Choose who is permitted to send messages in the student
+                        lounge, or pause posting.
                     </p>
                 </div>
 
@@ -337,8 +340,13 @@ const lengthPresets = [
                 </div>
 
                 <!-- Custom Disabled / Maintenance Notice Input -->
-                <div v-if="form.audience === 'disabled'" class="mt-3 rounded-2xl border border-rose-200/80 bg-rose-50/40 p-4 dark:border-rose-900/40 dark:bg-rose-950/20">
-                    <label class="block text-xs font-semibold text-rose-900 dark:text-rose-300">
+                <div
+                    v-if="form.audience === 'disabled'"
+                    class="mt-3 rounded-2xl border border-rose-200/80 bg-rose-50/40 p-4 dark:border-rose-900/40 dark:bg-rose-950/20"
+                >
+                    <label
+                        class="block text-xs font-semibold text-rose-900 dark:text-rose-300"
+                    >
                         Custom Notice Message for Students (Optional):
                     </label>
                     <input
@@ -347,8 +355,14 @@ const lengthPresets = [
                         placeholder="e.g. Chat is temporarily paused during HSC ICT exam. Will resume at 4:00 PM."
                         class="mt-1.5 w-full rounded-xl border border-rose-200 bg-white px-3.5 py-2 text-xs text-slate-800 focus:border-rose-500 focus:outline-none dark:border-rose-800/80 dark:bg-gray-800 dark:text-gray-100 dark:focus:border-rose-400"
                     />
-                    <p class="mt-1 text-[11px] text-rose-700/80 dark:text-rose-400/80">
-                        Leave blank to show the default notice: <em>"Global chat is currently disabled for maintenance."</em>
+                    <p
+                        class="mt-1 text-[11px] text-rose-700/80 dark:text-rose-400/80"
+                    >
+                        Leave blank to show the default notice:
+                        <em
+                            >"Global chat is currently disabled for
+                            maintenance."</em
+                        >
                     </p>
                 </div>
             </div>
@@ -401,7 +415,7 @@ const lengthPresets = [
                             type="number"
                             min="0"
                             max="3600"
-                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 pr-20 py-2 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                            class="w-full [appearance:textfield] rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 pr-20 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
                         />
                         <span
                             class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
@@ -425,7 +439,8 @@ const lengthPresets = [
                     </label>
                     <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
                         Specify how many recent messages to keep in storage.
-                        Older messages beyond this limit are automatically pruned.
+                        Older messages beyond this limit are automatically
+                        pruned.
                     </p>
                 </div>
 
@@ -460,7 +475,7 @@ const lengthPresets = [
                             type="number"
                             min="20"
                             max="1000"
-                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 pr-20 py-2 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                            class="w-full [appearance:textfield] rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 pr-20 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
                         />
                         <span
                             class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
@@ -483,7 +498,8 @@ const lengthPresets = [
                         Per-Message Character Length Limit
                     </label>
                     <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
-                        Control the maximum length allowed for any single student message.
+                        Control the maximum length allowed for any single
+                        student message.
                     </p>
                 </div>
 
@@ -518,7 +534,7 @@ const lengthPresets = [
                             type="number"
                             min="50"
                             max="1000"
-                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 pr-14 py-2 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                            class="w-full [appearance:textfield] rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 pr-14 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
                         />
                         <span
                             class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-xs font-medium text-slate-400"
@@ -544,14 +560,18 @@ const lengthPresets = [
                         <p
                             class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
                         >
-                            Automatically detects and blocks vulgar, abusive, and inappropriate words before they can be sent.
+                            Automatically detects and blocks vulgar, abusive,
+                            and inappropriate words before they can be sent.
                         </p>
                     </div>
 
                     <!-- Toggle Switch -->
                     <button
                         type="button"
-                        @click="form.profanity_filter_enabled = !form.profanity_filter_enabled"
+                        @click="
+                            form.profanity_filter_enabled =
+                                !form.profanity_filter_enabled
+                        "
                         class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none"
                         :class="
                             form.profanity_filter_enabled
@@ -575,16 +595,19 @@ const lengthPresets = [
                     <label
                         class="block text-xs font-semibold text-slate-600 dark:text-gray-400"
                     >
-                        Banned Words & Offensive Roots (separated by commas or newlines):
+                        Banned Words & Offensive Roots (separated by commas or
+                        newlines):
                     </label>
                     <textarea
                         v-model="form.banned_words"
                         rows="4"
                         placeholder="Enter offensive words or roots separated by commas or new lines..."
-                        class="w-full rounded-xl border border-slate-200 bg-slate-50 p-3 text-xs text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800/80 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800 font-mono"
+                        class="w-full rounded-xl border border-slate-200 bg-slate-50 p-3 font-mono text-xs text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800/80 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
                     ></textarea>
                     <p class="text-[11px] text-slate-400 dark:text-gray-500">
-                        The filter automatically collapses repeated letters and replaces common leet-speak substitutions (e.g. @ &rarr; a, $ &rarr; s, 0 &rarr; o).
+                        The filter automatically collapses repeated letters and
+                        replaces common leet-speak substitutions (e.g. @ &rarr;
+                        a, $ &rarr; s, 0 &rarr; o).
                     </p>
                 </div>
             </div>
diff --git a/resources/js/pages/admin/chat/Reports.vue b/resources/js/pages/admin/chat/Reports.vue
index 7f3793e..bbeac0b 100644
--- a/resources/js/pages/admin/chat/Reports.vue
+++ b/resources/js/pages/admin/chat/Reports.vue
@@ -48,7 +48,9 @@ const props = defineProps<{
     dismissedCount: number;
 }>();
 
-const currentFilter = ref<'all' | 'pending' | 'reviewed' | 'dismissed'>('pending');
+const currentFilter = ref<'all' | 'pending' | 'reviewed' | 'dismissed'>(
+    'pending',
+);
 
 const filteredReports = computed(() => {
     if (currentFilter.value === 'all') {
@@ -66,7 +68,11 @@ const updateReportStatus = (reportId: number, status: string) => {
 };
 
 const deleteReport = (reportId: number) => {
-    if (confirm('Are you sure you want to permanently delete this report record?')) {
+    if (
+        confirm(
+            'Are you sure you want to permanently delete this report record?',
+        )
+    ) {
         router.delete(`/admin/chat/reports/${reportId}`, {
             preserveScroll: true,
         });
@@ -111,15 +117,17 @@ const formatDate = (isoString?: string | null) => {
                         Reported Chat Messages
                     </h1>
                     <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
-                        Review community reports, snapshot of reported messages, and moderate disruptive accounts.
+                        Review community reports, snapshot of reported messages,
+                        and moderate disruptive accounts.
                     </p>
                 </div>
             </div>
-
         </div>
 
         <!-- Global Chat Management Route Tabs -->
-        <div class="flex items-center gap-2 border-b border-slate-200 dark:border-gray-800">
+        <div
+            class="flex items-center gap-2 border-b border-slate-200 dark:border-gray-800"
+        >
             <Link
                 href="/admin/chat"
                 class="flex items-center gap-2 border-b-2 border-transparent px-4 py-2.5 text-xs font-bold text-slate-500 transition-all hover:text-slate-700 dark:text-gray-400 dark:hover:text-gray-200"
@@ -136,7 +144,7 @@ const formatDate = (isoString?: string | null) => {
                 <span>Reported Messages</span>
                 <span
                     v-if="pendingCount > 0"
-                    class="rounded-full bg-rose-500 px-1.5 py-0.2 text-[10px] font-bold text-white"
+                    class="py-0.2 rounded-full bg-rose-500 px-1.5 text-[10px] font-bold text-white"
                 >
                     {{ pendingCount }}
                 </span>
@@ -155,15 +163,21 @@ const formatDate = (isoString?: string | null) => {
                 "
             >
                 <div class="flex items-center justify-between">
-                    <span class="text-xs font-semibold text-slate-500 dark:text-gray-400">
+                    <span
+                        class="text-xs font-semibold text-slate-500 dark:text-gray-400"
+                    >
                         Pending Review
                     </span>
                     <Clock class="h-4 w-4 text-rose-500" />
                 </div>
-                <p class="mt-2 text-2xl font-bold text-slate-900 dark:text-gray-100">
+                <p
+                    class="mt-2 text-2xl font-bold text-slate-900 dark:text-gray-100"
+                >
                     {{ pendingCount }}
                 </p>
-                <span class="text-[11px] text-slate-400 dark:text-gray-500">Requires moderation action</span>
+                <span class="text-[11px] text-slate-400 dark:text-gray-500"
+                    >Requires moderation action</span
+                >
             </div>
 
             <div
@@ -176,15 +190,21 @@ const formatDate = (isoString?: string | null) => {
                 "
             >
                 <div class="flex items-center justify-between">
-                    <span class="text-xs font-semibold text-slate-500 dark:text-gray-400">
+                    <span
+                        class="text-xs font-semibold text-slate-500 dark:text-gray-400"
+                    >
                         Resolved
                     </span>
                     <CheckCheck class="h-4 w-4 text-emerald-500" />
                 </div>
-                <p class="mt-2 text-2xl font-bold text-slate-900 dark:text-gray-100">
+                <p
+                    class="mt-2 text-2xl font-bold text-slate-900 dark:text-gray-100"
+                >
                     {{ reviewedCount }}
                 </p>
-                <span class="text-[11px] text-slate-400 dark:text-gray-500">Reviewed & resolved reports</span>
+                <span class="text-[11px] text-slate-400 dark:text-gray-500"
+                    >Reviewed & resolved reports</span
+                >
             </div>
 
             <div
@@ -197,20 +217,30 @@ const formatDate = (isoString?: string | null) => {
                 "
             >
                 <div class="flex items-center justify-between">
-                    <span class="text-xs font-semibold text-slate-500 dark:text-gray-400">
+                    <span
+                        class="text-xs font-semibold text-slate-500 dark:text-gray-400"
+                    >
                         Dismissed
                     </span>
-                    <XCircle class="h-4 w-4 text-slate-400 dark:text-gray-400" />
+                    <XCircle
+                        class="h-4 w-4 text-slate-400 dark:text-gray-400"
+                    />
                 </div>
-                <p class="mt-2 text-2xl font-bold text-slate-900 dark:text-gray-100">
+                <p
+                    class="mt-2 text-2xl font-bold text-slate-900 dark:text-gray-100"
+                >
                     {{ dismissedCount }}
                 </p>
-                <span class="text-[11px] text-slate-400 dark:text-gray-500">Ignored or invalid reports</span>
+                <span class="text-[11px] text-slate-400 dark:text-gray-500"
+                    >Ignored or invalid reports</span
+                >
             </div>
         </div>
 
         <!-- Filter Sub-Tabs -->
-        <div class="flex flex-wrap items-center gap-2 border-b border-slate-200 pb-3 dark:border-gray-800">
+        <div
+            class="flex flex-wrap items-center gap-2 border-b border-slate-200 pb-3 dark:border-gray-800"
+        >
             <button
                 type="button"
                 @click="currentFilter = 'all'"
@@ -270,11 +300,17 @@ const formatDate = (isoString?: string | null) => {
                 v-if="filteredReports.length === 0"
                 class="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200 bg-slate-50/50 py-16 text-center dark:border-gray-800 dark:bg-gray-900/40"
             >
-                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-2xs dark:bg-gray-800 dark:text-gray-400">
+                <div
+                    class="flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-2xs dark:bg-gray-800 dark:text-gray-400"
+                >
                     <Flag class="h-6 w-6 text-slate-400 dark:text-gray-500" />
                 </div>
-                <h3 class="mt-3 text-sm font-bold text-slate-800 dark:text-gray-200">
-                    No {{ currentFilter !== 'all' ? currentFilter : '' }} reports found
+                <h3
+                    class="mt-3 text-sm font-bold text-slate-800 dark:text-gray-200"
+                >
+                    No
+                    {{ currentFilter !== 'all' ? currentFilter : '' }} reports
+                    found
                 </h3>
                 <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
                     Everything looks clean for this filter criteria.
@@ -292,12 +328,14 @@ const formatDate = (isoString?: string | null) => {
                             : 'border-slate-200/80 bg-slate-50/60 dark:border-gray-800 dark:bg-gray-900/40',
                     ]"
                 >
-                    <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                    <div
+                        class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"
+                    >
                         <!-- Left: Reporter & Reported User info -->
                         <div class="space-y-1.5">
                             <div class="flex flex-wrap items-center gap-2">
                                 <span
-                                    class="inline-flex items-center rounded-md px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider"
+                                    class="inline-flex items-center rounded-md px-2 py-0.5 text-[10px] font-bold tracking-wider uppercase"
                                     :class="
                                         report.status === 'pending'
                                             ? 'bg-rose-100 text-rose-700 dark:bg-rose-950/70 dark:text-rose-300'
@@ -309,19 +347,38 @@ const formatDate = (isoString?: string | null) => {
                                     {{ report.status }}
                                 </span>
 
-                                <span class="text-xs text-slate-400 dark:text-gray-500">
+                                <span
+                                    class="text-xs text-slate-400 dark:text-gray-500"
+                                >
                                     Reported {{ formatDate(report.created_at) }}
                                 </span>
 
-                                <span v-if="report.reporter" class="text-xs text-slate-500 dark:text-gray-400">
-                                    by <strong class="text-slate-700 dark:text-gray-300">{{ report.reporter.name }}</strong>
-                                    <span v-if="report.reporter.username" class="text-slate-400"> (@{{ report.reporter.username }})</span>
+                                <span
+                                    v-if="report.reporter"
+                                    class="text-xs text-slate-500 dark:text-gray-400"
+                                >
+                                    by
+                                    <strong
+                                        class="text-slate-700 dark:text-gray-300"
+                                        >{{ report.reporter.name }}</strong
+                                    >
+                                    <span
+                                        v-if="report.reporter.username"
+                                        class="text-slate-400"
+                                    >
+                                        (@{{ report.reporter.username }})</span
+                                    >
                                 </span>
                             </div>
 
                             <div class="flex items-center gap-2 pt-0.5">
-                                <span class="text-xs font-semibold text-slate-500 dark:text-gray-400">Reason:</span>
-                                <span class="rounded-md bg-amber-50 px-2 py-0.5 text-xs font-bold text-amber-800 dark:bg-amber-950/50 dark:text-amber-300">
+                                <span
+                                    class="text-xs font-semibold text-slate-500 dark:text-gray-400"
+                                    >Reason:</span
+                                >
+                                <span
+                                    class="rounded-md bg-amber-50 px-2 py-0.5 text-xs font-bold text-amber-800 dark:bg-amber-950/50 dark:text-amber-300"
+                                >
                                     {{ report.reason || 'Not specified' }}
                                 </span>
                             </div>
@@ -344,7 +401,9 @@ const formatDate = (isoString?: string | null) => {
                             <button
                                 v-if="report.status !== 'reviewed'"
                                 type="button"
-                                @click="updateReportStatus(report.id, 'reviewed')"
+                                @click="
+                                    updateReportStatus(report.id, 'reviewed')
+                                "
                                 class="inline-flex cursor-pointer items-center gap-1 rounded-xl bg-emerald-50 px-3 py-1.5 text-xs font-semibold text-emerald-700 transition hover:bg-emerald-100 dark:bg-emerald-950/60 dark:text-emerald-300 dark:hover:bg-emerald-900/60"
                             >
                                 <CheckCircle class="h-3 w-3" />
@@ -354,7 +413,9 @@ const formatDate = (isoString?: string | null) => {
                             <button
                                 v-if="report.status !== 'dismissed'"
                                 type="button"
-                                @click="updateReportStatus(report.id, 'dismissed')"
+                                @click="
+                                    updateReportStatus(report.id, 'dismissed')
+                                "
                                 class="inline-flex cursor-pointer items-center gap-1 rounded-xl bg-slate-100 px-3 py-1.5 text-xs font-semibold text-slate-700 transition hover:bg-slate-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
                             >
                                 <XCircle class="h-3 w-3" />
@@ -374,14 +435,34 @@ const formatDate = (isoString?: string | null) => {
                     </div>
 
                     <!-- Message Snapshot Content Box -->
-                    <div class="mt-3.5 rounded-xl border border-slate-200/80 bg-slate-50/70 p-3.5 dark:border-gray-800 dark:bg-gray-800/60">
-                        <div class="flex items-center justify-between border-b border-slate-200/60 pb-2 text-[11px] text-slate-500 dark:border-gray-700/60 dark:text-gray-400">
+                    <div
+                        class="mt-3.5 rounded-xl border border-slate-200/80 bg-slate-50/70 p-3.5 dark:border-gray-800 dark:bg-gray-800/60"
+                    >
+                        <div
+                            class="flex items-center justify-between border-b border-slate-200/60 pb-2 text-[11px] text-slate-500 dark:border-gray-700/60 dark:text-gray-400"
+                        >
                             <div>
-                                <span class="font-bold text-slate-800 dark:text-gray-200">
-                                    Message Author: {{ report.reported_user_name || report.reported_user?.name || 'Unknown' }}
+                                <span
+                                    class="font-bold text-slate-800 dark:text-gray-200"
+                                >
+                                    Message Author:
+                                    {{
+                                        report.reported_user_name ||
+                                        report.reported_user?.name ||
+                                        'Unknown'
+                                    }}
                                 </span>
-                                <span v-if="report.reported_user_username || report.reported_user?.username" class="ml-1 text-slate-400">
-                                    (@{{ report.reported_user_username || report.reported_user?.username }})
+                                <span
+                                    v-if="
+                                        report.reported_user_username ||
+                                        report.reported_user?.username
+                                    "
+                                    class="ml-1 text-slate-400"
+                                >
+                                    (@{{
+                                        report.reported_user_username ||
+                                        report.reported_user?.username
+                                    }})
                                 </span>
                                 <span
                                     v-if="report.reported_user?.is_chat_banned"
@@ -396,7 +477,9 @@ const formatDate = (isoString?: string | null) => {
                             </span>
                         </div>
 
-                        <p class="mt-2 text-xs leading-relaxed font-medium text-slate-900 break-words dark:text-gray-100">
+                        <p
+                            class="mt-2 text-xs leading-relaxed font-medium break-words text-slate-900 dark:text-gray-100"
+                        >
                             "{{ report.message_content }}"
                         </p>
                     </div>
diff --git a/resources/js/pages/admin/users/CreateOrEdit.vue b/resources/js/pages/admin/users/CreateOrEdit.vue
index a4933b6..e24f781 100644
--- a/resources/js/pages/admin/users/CreateOrEdit.vue
+++ b/resources/js/pages/admin/users/CreateOrEdit.vue
@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { Head, Link, useForm } from '@inertiajs/vue3';
-import { UserPlus, Loader2, Save, Ban, Clock, CheckCircle } from 'lucide-vue-next';
+import {
+    UserPlus,
+    Loader2,
+    Save,
+    Ban,
+    Clock,
+    CheckCircle,
+} from 'lucide-vue-next';
 import { watch } from 'vue';
 
 const props = defineProps({
@@ -21,7 +28,9 @@ const formatForDatetimeLocal = (dateString?: string | null) => {
     const d = new Date(dateString);
     if (isNaN(d.getTime())) return '';
     const offset = d.getTimezoneOffset() * 60000;
-    const localISOTime = new Date(d.getTime() - offset).toISOString().slice(0, 16);
+    const localISOTime = new Date(d.getTime() - offset)
+        .toISOString()
+        .slice(0, 16);
     return localISOTime;
 };
 
@@ -278,8 +287,11 @@ const submitForm = () => {
                             <Ban class="h-4 w-4 text-rose-500" />
                             Global Chat Moderation
                         </h3>
-                        <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
-                            Restrict this user from sending messages in the Global Student Chat until a specified date & time.
+                        <p
+                            class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
+                        >
+                            Restrict this user from sending messages in the
+                            Global Student Chat until a specified date & time.
                         </p>
                     </div>
 
@@ -301,7 +313,9 @@ const submitForm = () => {
 
                 <!-- Quick Presets -->
                 <div>
-                    <label class="mb-1.5 block text-xs font-semibold text-slate-600 dark:text-gray-400">
+                    <label
+                        class="mb-1.5 block text-xs font-semibold text-slate-600 dark:text-gray-400"
+                    >
                         Quick Ban Presets:
                     </label>
                     <div class="flex flex-wrap gap-2">
@@ -354,7 +368,9 @@ const submitForm = () => {
                     >
                         {{ form.errors.chat_banned_until }}
                     </p>
-                    <p class="mt-1 text-[11px] text-slate-500 dark:text-gray-400">
+                    <p
+                        class="mt-1 text-[11px] text-slate-500 dark:text-gray-400"
+                    >
                         Leave blank if the user should not be banned.
                     </p>
                 </div>