Done Profile

app/Components/Profile/Manager.php

@@ -13,8 +13,6 @@ class Manager extends Component
     public object $user;
     public array  $roles    = [];
     public array  $allRoles = [];
-
-    // Đổi mật khẩu
     public string $mode                  = 'view';   // 'view' | 'password'
     public string $currentPassword       = '';
     public string $password              = '';
@@ -51,17 +49,14 @@ class Manager extends Component
         // 1. Validate
         $this->validate();
 
-        // 2. Kiểm tra mật khẩu hiện tại
         if (! Hash::check($this->currentPassword, $this->user->password)) {
             $this->addError('currentPassword', 'Mật khẩu hiện tại không đúng.');
             return;
         }
 
-        // 3. Cập nhật mật khẩu mới
         $this->user->password = Hash::make($this->password);
         $this->user->save();
 
-        // 4. Thông báo & quay về view
         session()->flash('message', 'Đổi mật khẩu thành công.');
         $this->showView();
     }
@@ -72,7 +67,7 @@ class Manager extends Component
             'user'     => $this->user,
             'roles'    => $this->roles,
             'allRoles' => collect($this->allRoles),
-            'title'    => 'Profile của tôi',
+            'title'    => 'My Profile',
         ]);
     }
 }

resources/views/components/profile/manager.blade.php

@@ -7,13 +7,12 @@
                 <h6 class="mb-0">{{ $title }}</h6>
                 <div class="d-flex align-items-center">
                     @if ($mode === 'view')
-
                         <button wire:click="showPasswordForm" class="btn btn-sm btn-info">
-                            Đổi mật khẩu
+                            Change Password
                         </button>
                     @else
                         <button wire:click="showView" class="btn btn-sm btn-secondary">
-                            ← Quay lại
+                            ← Back to Profile
                         </button>
                     @endif
                 </div>
@@ -26,77 +25,77 @@
                 @endif
 
                 @if ($mode === 'view')
-                    {{-- Skeleton khi loading dữ liệu profile --}}
+                    {{-- Skeleton while loading profile data --}}
                     <div wire:loading class="w-100">
                         {{-- 2 columns (label + value), 4 rows --}}
-                        <x-skeleton-form :columns="2" :rows="4" height="2.5rem" />
+                        <x-skeleton-table :columns="1" :rows="4" height="2.5rem" />
                     </div>
 
-                    {{-- Actual profile --}}
+                    {{-- Actual profile display --}}
                     <div wire:loading.remove>
                         <dl class="row mb-0" style="line-height:2.5rem">
-                            <dt class="col-sm-3">Họ và tên</dt>
+                            <dt class="col-sm-3">Full Name</dt>
                             <dd class="col-sm-9">{{ $user->fullname }}</dd>
 
                             <dt class="col-sm-3">Email</dt>
                             <dd class="col-sm-9">{{ $user->email }}</dd>
 
-                            <dt class="col-sm-3">Vai trò</dt>
+                            <dt class="col-sm-3">Roles</dt>
                             <dd class="col-sm-9">
                                 @if ($roles)
                                     {{ implode(', ', $roles) }}
                                 @else
-                                    <em>Chưa có vai trò</em>
+                                    <em>No roles assigned</em>
                                 @endif
                             </dd>
 
-                            <dt class="col-sm-3">Ngày tạo tài khoản</dt>
+                            <dt class="col-sm-3">Account Created At</dt>
                             <dd class="col-sm-9">
                                 {{ $user->created_at?->format('d/m/Y H:i') ?? '—' }}
                             </dd>
                         </dl>
                     </div>
                 @else
-                    {{-- Skeleton khi loading form đổi mật khẩu --}}
+                    {{-- Skeleton while loading change-password form --}}
                     <div wire:loading class="w-100">
                         {{-- 3 fields + 2 buttons --}}
-                        <x-skeleton-form :fields="3" :button-count="2" />
+                        <x-skeleton-form :fields="3" :button-count="0" />
                     </div>
 
-                    {{-- Actual đổi mật khẩu --}}
+                    {{-- Actual change-password form --}}
                     <div wire:loading.remove>
                         <form wire:submit.prevent="updatePassword">
                             <div class="mb-3">
-                                <label class="form-label">Mật khẩu hiện tại</label>
+                                <label class="form-label">Current Password</label>
                                 <input type="password" wire:model.defer="currentPassword" class="form-control"
-                                    placeholder="Nhập mật khẩu hiện tại">
+                                    placeholder="Enter current password">
                                 @error('currentPassword')
                                     <div class="text-danger text-xs mt-1">{{ $message }}</div>
                                 @enderror
                             </div>
 
                             <div class="mb-3">
-                                <label class="form-label">Mật khẩu mới</label>
+                                <label class="form-label">New Password</label>
                                 <input type="password" wire:model.defer="password" class="form-control"
-                                    placeholder="Tối thiểu 8 ký tự">
+                                    placeholder="At least 8 characters">
                                 @error('password')
                                     <div class="text-danger text-xs mt-1">{{ $message }}</div>
                                 @enderror
                             </div>
 
                             <div class="mb-3">
-                                <label class="form-label">Xác nhận mật khẩu mới</label>
+                                <label class="form-label">Confirm New Password</label>
                                 <input type="password" wire:model.defer="password_confirmation" class="form-control"
-                                    placeholder="Nhập lại mật khẩu mới">
+                                    placeholder="Re-enter new password">
                             </div>
 
                             <div class="d-flex justify-content-end">
                                 <button wire:click="showView" type="button" class="btn btn-secondary btn-sm me-2">
-                                    Hủy
+                                    Cancel
                                 </button>
                                 <button type="submit" class="btn btn-info btn-sm"
-                                    onclick="return confirm('Bạn có chắc muốn đổi mật khẩu?')">
-                                    Xác nhận
+                                    onclick="return confirm('Are you sure you want to change your password?')">
+                                    Confirm
                                 </button>
                             </div>
                         </form>

resources/views/components/skeleton-table.blade.php

@@ -3,7 +3,7 @@
     'columns',
     'rows',
     'height',
-    'pages' => 3, // Default to 3 pages if not specified
+    'pages' => 0, // Default to 3 pages if not specified
 ])
 
 <div wire:loading class="w-100">