feat(user): add username column with default student_{id} auto-assign…

app/Http/Controllers/BlogController.php

@@ -25,7 +25,7 @@ public function index(Request $request)
                 'views',
                 'created_at',
             ])
-            ->with('user:id,name')
+            ->with('user:id,name,username')
             ->withCount(['reactions', 'comments'])
             ->where('is_published', true);
 
@@ -56,13 +56,13 @@ public function show(Blog $blog)
     {
         abort_unless($blog->is_published, 404);
 
-        $blog->load('user:id,name');
+        $blog->load('user:id,name,username');
         $blog->increment('views');
 
         $reactionsCount = $blog->reactions()->count();
 
         $reactors = $blog->reactions()
-            ->with('user:id,name,image_path,institution')
+            ->with('user:id,name,username,image_path,institution')
             ->latest('id')
             ->limit(50)
             ->get()
@@ -71,7 +71,7 @@ public function show(Blog $blog)
             ->values();
 
         $comments = $blog->comments()
-            ->with('user:id,name,image_path,institution')
+            ->with('user:id,name,username,image_path,institution')
             ->latest()
             ->get();
 

app/Http/Controllers/ResourceController.php

@@ -38,7 +38,7 @@ public function show($id)
         $completionsCount = ResourceCompletion::where('resource_id', $id)->count();
 
         $completers = ResourceCompletion::where('resource_id', $id)
-            ->with('user:id,name,image_path,institution')
+            ->with('user:id,name,username,image_path,institution')
             ->latest()
             ->take(10)
             ->get()

app/Http/Controllers/SubjectController.php

@@ -27,7 +27,7 @@ public function index($course)
 
         $featuredBlogs = Blog::where('is_featured', true)
             ->where('is_published', true)
-            ->with('user:id,name')
+            ->with('user:id,name,username')
             ->withCount(['reactions', 'comments'])
             ->inRandomOrder()
             ->limit(3)

app/Http/Requests/Profile/UpdateProfileRequest.php

@@ -4,6 +4,7 @@
 
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rule;
 
 class UpdateProfileRequest extends FormRequest
 {
@@ -24,6 +25,14 @@ public function rules(): array
     {
         return [
             'name' => ['required', 'string', 'max:255'],
+            'username' => [
+                'sometimes',
+                'string',
+                'min:3',
+                'max:30',
+                'regex:/^[a-zA-Z0-9_]+$/',
+                Rule::unique('users', 'username')->ignore($this->user()->id),
+            ],
             'file' => ['sometimes', 'nullable', 'image', 'max:2048'],
             'about' => ['sometimes', 'nullable', 'string'],
             'institution' => ['sometimes', 'nullable', 'string', 'max:255'],

app/Http/Requests/User/StoreUserRequest.php

@@ -25,6 +25,7 @@ public function rules(): array
         return [
 
             'name' => ['required', 'string', 'max:255'],
+            'username' => ['nullable', 'string', 'min:3', 'max:30', 'regex:/^[a-zA-Z0-9_]+$/', 'unique:users,username'],
             'email' => ['required', 'email', 'unique:users,email'],
             'role' => ['required', 'string', 'exists:roles,name'],
             'permissions' => ['required', 'array'],

app/Http/Requests/User/UpdateUserRequest.php

@@ -26,6 +26,7 @@ public function rules(): array
 
         $rules = [
             'name' => ['sometimes', 'string', 'max:255'],
+            'username' => ['sometimes', 'string', 'min:3', 'max:30', 'regex:/^[a-zA-Z0-9_]+$/', 'unique:users,username,'.$user->id],
             'email' => ['sometimes', 'email', 'unique:users,email,'.$user->id],
             'file' => ['sometimes', 'nullable', 'image', 'max:2048'],
             'about' => ['sometimes', 'nullable', 'string'],

app/Models/User.php

@@ -16,6 +16,7 @@
 /**
  * @property int $id
  * @property string $name
+ * @property string|null $username
  * @property string $email
  * @property Carbon|null $email_verified_at
  * @property string $password
@@ -38,6 +39,7 @@ class User extends Authenticatable
 
     protected $fillable = [
         'name',
+        'username',
         'email',
         'receive_emails',
         'google_id',
@@ -51,6 +53,16 @@ class User extends Authenticatable
         'github',
     ];
 
+    protected static function booted(): void
+    {
+        static::created(function (User $user) {
+            if (! $user->username) {
+                $user->updateQuietly(['username' => "student_{$user->id}"]);
+                $user->username = "student_{$user->id}";
+            }
+        });
+    }
+
     protected $appends = [
         'image_url',
     ];

database/migrations/2026_08_26_120400_add_username_to_users_table.php

@@ -0,0 +1,33 @@
+<?php
+
+use App\Models\User;
+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->string('username')->nullable()->unique()->after('name');
+        });
+
+        User::whereNull('username')->each(function ($user) {
+            $user->updateQuietly(['username' => "student_{$user->id}"]);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('username');
+        });
+    }
+};

resources/js/components/NavBar.vue

@@ -219,7 +219,7 @@ onBeforeUnmount(() => {
                                 <p
                                     class="truncate text-[11px] font-medium text-slate-400 dark:text-gray-500"
                                 >
-                                    {{ user.email }}
+                                    {{ user.username ? '@' + user.username : user.email }}
                                 </p>
                             </div>
 
@@ -323,15 +323,19 @@ onBeforeUnmount(() => {
                     v-if="user"
                     class="mb-3 flex items-center gap-3 rounded-2xl border border-slate-200/80 bg-slate-50/80 p-3 dark:border-gray-800 dark:bg-gray-900/80"
                 >
-                    <img
+                    <div
                         v-if="user.image_url"
-                        :src="user.image_url"
-                        :alt="user.name"
-                        class="h-10 w-10 rounded-full object-cover ring-2 ring-indigo-500/20"
-                    />
+                        class="h-10 w-10 shrink-0 overflow-hidden rounded-full ring-2 ring-indigo-600/20"
+                    >
+                        <img
+                            :src="user.image_url"
+                            :alt="user.name"
+                            class="h-full w-full object-cover"
+                        />
+                    </div>
                     <div
                         v-else
-                        class="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-600 text-sm font-black text-white dark:bg-indigo-500"
+                        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-indigo-50 font-bold text-indigo-600 dark:bg-indigo-950/60 dark:text-indigo-400"
                     >
                         {{ user.name.charAt(0).toUpperCase() }}
                     </div>
@@ -344,7 +348,7 @@ onBeforeUnmount(() => {
                         <p
                             class="truncate text-[11px] text-slate-400 dark:text-gray-500"
                         >
-                            {{ user.email }}
+                            {{ user.username ? '@' + user.username : user.email }}
                         </p>
                     </div>
                 </div>

resources/js/components/admin/UserRow.vue

@@ -61,6 +61,12 @@ const deleteUser = (id: number) => {
                             class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100"
                             >{{ user.name }}</span
                         >
+                        <span
+                            v-if="user.username"
+                            class="text-xs text-slate-400 dark:text-gray-500"
+                        >
+                            @{{ user.username }}
+                        </span>
                         <span
                             v-if="user.id === userId"
                             class="rounded-md bg-blue-100 px-1.5 py-0.5 text-[10px] font-medium text-blue-700 dark:bg-blue-500/10 dark:text-blue-400"

resources/js/pages/Profile.vue

@@ -32,6 +32,7 @@ const showConfirmModal = ref(false);
 const form = useForm({
     _method: 'PUT',
     name: user.value?.name || '',
+    username: user.value?.username || '',
     file: null as File | null,
     about: user.value?.about || '',
     institution: user.value?.institution || '',
@@ -178,6 +179,47 @@ const submitForm = () => {
                         </p>
                     </div>
 
+                    <div>
+                        <label
+                            for="username"
+                            class="mb-1.5 block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                        >
+                            Username
+                        </label>
+                        <div class="relative">
+                            <span
+                                class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-sm font-semibold text-slate-400 dark:text-gray-500"
+                            >
+                                @
+                            </span>
+                            <input
+                                v-model="form.username"
+                                type="text"
+                                id="username"
+                                required
+                                placeholder="your_handle"
+                                :disabled="form.processing"
+                                class="w-full rounded-lg border border-slate-300 bg-white py-2.5 pr-3.5 pl-8 text-sm text-slate-900 transition outline-none placeholder:text-slate-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 disabled:bg-slate-50 dark:border-gray-600 dark:bg-gray-950 dark:text-gray-100 dark:placeholder:text-gray-500"
+                                :class="{
+                                    'border-rose-500 focus:ring-rose-500/20':
+                                        form.errors.username,
+                                }"
+                            />
+                        </div>
+                        <p
+                            v-if="form.errors.username"
+                            class="mt-1 text-xs text-rose-600"
+                        >
+                            {{ form.errors.username }}
+                        </p>
+                        <p
+                            v-else
+                            class="mt-1 text-[11px] text-slate-400 dark:text-gray-500"
+                        >
+                            Letters, numbers, and underscores (3–30 chars).
+                        </p>
+                    </div>
+
                     <div>
                         <label
                             for="email"

resources/js/pages/admin/users/CreateOrEdit.vue

@@ -19,6 +19,7 @@ const availablePermissions = props.permissions;
 const form = useForm({
     _method: props.user ? 'PATCH' : 'POST',
     name: props.user?.name || '',
+    username: props.user?.username || '',
     email: props.user?.email || '',
     role: props.user?.roles?.[0]?.name || 'manager',
     permissions: props.user?.permissions?.map((p) => p.name) || ['view admin'],
@@ -89,8 +90,8 @@ const submitForm = () => {
             </div>
 
             <form @submit.prevent="submitForm" class="max-w-3xl space-y-6">
-                <!-- Base fields section (Name, Email) -->
-                <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+                <!-- Base fields section (Name, Username, Email) -->
+                <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
                     <div>
                         <label
                             for="name"
@@ -118,6 +119,40 @@ const submitForm = () => {
                         </p>
                     </div>
 
+                    <div>
+                        <label
+                            for="username"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                            >Username</label
+                        >
+                        <div class="relative">
+                            <span
+                                class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-sm font-semibold text-slate-400 dark:text-gray-500"
+                            >
+                                @
+                            </span>
+                            <input
+                                v-model="form.username"
+                                type="text"
+                                id="username"
+                                placeholder="johndoe"
+                                :disabled="form.processing"
+                                class="w-full rounded-lg border py-2.5 pr-4 pl-8 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.username
+                                        ? 'border-rose-500 focus:ring-rose-500/20'
+                                        : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
+                                "
+                            />
+                        </div>
+                        <p
+                            v-if="form.errors.username"
+                            class="mt-1 text-sm text-rose-600"
+                        >
+                            {{ form.errors.username }}
+                        </p>
+                    </div>
+
                     <div>
                         <label
                             for="email"

tests/Feature/ProfileUsernameUpdateTest.php

@@ -0,0 +1,63 @@
+<?php
+
+use App\Models\User;
+
+test('authenticated user can update their username in profile', function () {
+    $user = User::factory()->create([
+        'username' => 'student_1',
+    ]);
+
+    $response = $this->actingAs($user)->put('/profile', [
+        'name' => $user->name,
+        'username' => 'custom_tajim',
+    ]);
+
+    $response->assertRedirect(route('profile.edit'));
+    expect($user->fresh()->username)->toBe('custom_tajim');
+});
+
+test('user cannot update username to one already taken by someone else', function () {
+    User::factory()->create([
+        'username' => 'existing_user',
+    ]);
+
+    $user = User::factory()->create([
+        'username' => 'my_user',
+    ]);
+
+    $response = $this->actingAs($user)->put('/profile', [
+        'name' => $user->name,
+        'username' => 'existing_user',
+    ]);
+
+    $response->assertSessionHasErrors(['username']);
+    expect($user->fresh()->username)->toBe('my_user');
+});
+
+test('user can submit profile without changing their existing username', function () {
+    $user = User::factory()->create([
+        'username' => 'my_handle',
+    ]);
+
+    $response = $this->actingAs($user)->put('/profile', [
+        'name' => 'Updated Name',
+        'username' => 'my_handle',
+    ]);
+
+    $response->assertRedirect(route('profile.edit'));
+    expect($user->fresh()->name)->toBe('Updated Name');
+    expect($user->fresh()->username)->toBe('my_handle');
+});
+
+test('username must follow alphanumeric and underscore format', function () {
+    $user = User::factory()->create([
+        'username' => 'valid_username',
+    ]);
+
+    $response = $this->actingAs($user)->put('/profile', [
+        'name' => $user->name,
+        'username' => 'invalid user!@#',
+    ]);
+
+    $response->assertSessionHasErrors(['username']);
+});