Merge pull request 'DONE: merge heir tab into profile tab, santize userIcNum and name, rename to malay, add stat card on user list' (#10) from feature/stat-card-on-users into main

Reviewed-on: #10

be/Modules/User/Http/Controllers/UserController.php

@@ -269,6 +269,43 @@ class UserController extends BaseCrudController
         }
     }
 
+    public function stats(Request $request): JsonResponse
+    {
+        $this->authorize('viewAny', $this->modelClass);
+
+        try {
+            $request->validate([
+                'join_date_from' => 'nullable|date',
+                'join_date_to' => 'nullable|date',
+                'leave_date_from' => 'nullable|date',
+                'leave_date_to' => 'nullable|date',
+            ]);
+
+            $dateFilters = array_filter([
+                'join_date_from' => $request->get('join_date_from'),
+                'join_date_to' => $request->get('join_date_to'),
+                'leave_date_from' => $request->get('leave_date_from'),
+                'leave_date_to' => $request->get('leave_date_to'),
+            ]);
+
+            $stats = $this->userService->getListStats(
+                $request->get('search', ''),
+                $request->get('status', ''),
+                $dateFilters
+            );
+
+            return response()->json([
+                'success' => true,
+                'data' => $stats,
+                'message' => 'User stats retrieved successfully.',
+            ]);
+        } catch (Exception $e) {
+            Log::error("Error fetching {$this->resourceNamePlural} stats: ".$e->getMessage());
+
+            return $this->errorResponse('Failed to retrieve user stats.', 500);
+        }
+    }
+
     public function restore(string $id): JsonResponse
     {
         $this->authorize('restore', $this->modelClass);

be/Modules/User/Repositories/Contracts/UserRepositoryInterface.php

@@ -55,6 +55,17 @@ interface UserRepositoryInterface
         string $sortOrder = 'desc'
     );
 
+    /**
+     * Get stats for the Users list (filtered).
+     *
+     * @return array{total: int, joined_this_month: int}
+     */
+    public function getListStats(
+        string $search = '',
+        string $status = '',
+        array $dateFilters = []
+    ): array;
+
     /**
      * Find soft-deleted User by ID
      */

be/Modules/User/Repositories/UserRepository.php

@@ -3,6 +3,7 @@
 namespace Modules\User\Repositories;
 
 use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Support\Carbon;
 use Modules\Auth\Entities\User;
 use Modules\User\Repositories\Contracts\UserRepositoryInterface;
 
@@ -85,7 +86,18 @@ class UserRepository implements UserRepositoryInterface
 
         $query = User::excludeDevelopersUnlessDeveloper()
             ->with([
-                'roles:id,name,guard_name'
+                'roles:id,name,guard_name',
+                'employments' => function ($q) {
+                    $q->select([
+                        'id',
+                        'user_id',
+                        'company_name',
+                        'is_current',
+                        'start_date',
+                    ])
+                        ->orderByDesc('is_current')
+                        ->orderByDesc('start_date');
+                },
             ])
             ->orderBy($sortBy, $sortOrder);
 
@@ -129,6 +141,17 @@ class UserRepository implements UserRepositoryInterface
             ->excludeDevelopersUnlessDeveloper()
             ->with([
                 'roles:id,name,guard_name',
+                'employments' => function ($q) {
+                    $q->select([
+                        'id',
+                        'user_id',
+                        'company_name',
+                        'is_current',
+                        'start_date',
+                    ])
+                        ->orderByDesc('is_current')
+                        ->orderByDesc('start_date');
+                },
             ])
             ->orderBy($sortBy, $sortOrder);
 
@@ -141,6 +164,36 @@ class UserRepository implements UserRepositoryInterface
         return $query->paginate($perPage);
     }
 
+    public function getListStats(
+        string $search = '',
+        string $status = '',
+        array $dateFilters = []
+    ): array {
+        $baseQuery = User::excludeDevelopersUnlessDeveloper();
+
+        $this->applySearch($baseQuery, $search);
+
+        if (! empty($status)) {
+            $baseQuery->where('status', $status);
+        }
+
+        $this->applyDateRangeFilters($baseQuery, $dateFilters);
+
+        $total = (int) (clone $baseQuery)->count();
+
+        $monthStart = Carbon::now()->startOfMonth()->toDateString();
+        $monthEnd = Carbon::now()->endOfMonth()->toDateString();
+        $joinedThisMonth = (int) (clone $baseQuery)
+            ->whereDate('join_date', '>=', $monthStart)
+            ->whereDate('join_date', '<=', $monthEnd)
+            ->count();
+
+        return [
+            'total' => $total,
+            'joined_this_month' => $joinedThisMonth,
+        ];
+    }
+
     /**
      * Get all Users with their relationships and search
      */

be/Modules/User/Routes/api.php

@@ -19,6 +19,7 @@ Route::prefix('v1/public')->group(function () {
 
 Route::middleware(['auth:sanctum', 'single.session'])->prefix('v1')->group(function () {
     Route::get('users/deleted', [UserController::class, 'deletedIndex'])->name('users.deleted.index');
+    Route::get('users/stats', [UserController::class, 'stats'])->name('users.stats');
     Route::post('users/{id}/restore', [UserController::class, 'restore'])->name('users.restore');
     Route::apiResource('users', UserController::class)->names('user');
     Route::apiResource('addresses', AddressController::class)->names('address');

be/Modules/User/Services/UserService.php

@@ -50,6 +50,14 @@ class UserService
         );
     }
 
+    /**
+     * @return array{total: int, joined_this_month: int}
+     */
+    public function getListStats(string $search, string $status, array $dateFilters = []): array
+    {
+        return $this->repository->getListStats($search, $status, $dateFilters);
+    }
+
     public function restoreUser(string $id): ?User
     {
         if (! $this->repository->restore($id)) {

be/Modules/User/Transformers/UserListResource.php

@@ -5,6 +5,7 @@ namespace Modules\User\Transformers;
 use Illuminate\Http\Request;
 use Illuminate\Http\Resources\Json\JsonResource;
 use Illuminate\Support\Facades\Storage;
+use Modules\User\Transformers\EmploymentResource;
 
 class UserListResource extends JsonResource
 {
@@ -31,6 +32,7 @@ class UserListResource extends JsonResource
             'created_at' => $this->created_at,
             'updated_at' => $this->updated_at,
             'deleted_at' => $this->deleted_at,
+            'employments' => EmploymentResource::collection($this->whenLoaded('employments')),
             'roles' => $this->roles->map(function ($role) {
                 return [
                     'id' => $role->id,

be/app/Console/Commands/AutoGenerateWeeklyReportForUnit.php

@@ -1,56 +0,0 @@
-<?php
-
-namespace App\Console\Commands;
-
-use Illuminate\Console\Command;
-use Modules\KJCReport\Entities\KJCReport;
-use Modules\KJCReport\Jobs\GenerateTeamWeeklyReports;
-use Modules\Unit\Entities\Unit;
-use Modules\Auth\Entities\User;
-
-class AutoGenerateWeeklyReportForUnit extends Command
-{
-    protected $signature = 'kjc:auto-generate-weekly-report
-                            {unit : Unit name to generate reports for (e.g. "Jabatan Arah RAJD")}
-                            {--force : Force generation even if reports already exist}';
-
-    protected $description = 'Auto-generate weekly KJC reports for a specific unit';
-
-    public function handle(): int
-    {
-        $unitName = $this->argument('unit');
-
-        $unit = Unit::where('name', $unitName)->first();
-
-        if (! $unit) {
-            $this->error("Unit '{$unitName}' not found.");
-
-            return 1;
-        }
-
-        $month = strtolower(now()->format('F'));
-        $week = (int) ceil(now()->day / 7);
-
-        if (! $this->option('force')) {
-            $existingReports = KJCReport::where('unit_id', $unit->id)
-                ->where('report_type', 'weekly')
-                ->where('report_month', $month)
-                ->where('report_week', $week)
-                ->exists();
-
-            if ($existingReports) {
-                $this->info("Reports for {$unitName} - {$month} week {$week} already exist. Skipping.");
-
-                return 0;
-            }
-        }
-
-        $user = User::where('unit_id', $unit->id)->first();
-
-        GenerateTeamWeeklyReports::dispatch($unit->id, $month, $week, $user?->id);
-
-        $this->info("✓ Queued weekly report generation for {$unitName} - {$month} week {$week}");
-
-        return 0;
-    }
-}

be/app/Console/Commands/TriggerKJCHistoricalDataCapture.php

@@ -1,68 +0,0 @@
-<?php
-
-namespace App\Console\Commands;
-
-use App\Jobs\CaptureKJCHistoricalDataJob;
-use App\Services\KJCHistoricalDataService;
-use Carbon\Carbon;
-use Illuminate\Console\Command;
-
-class TriggerKJCHistoricalDataCapture extends Command
-{
-    /**
-     * The name and signature of the console command.
-     *
-     * @var string
-     */
-    protected $signature = 'kjc:historical:trigger 
-                            {--month= : Month to capture (1-12)}
-                            {--year= : Year to capture (YYYY)}
-                            {--queue : Dispatch to queue instead of running immediately}';
-
-    /**
-     * The console command description.
-     *
-     * @var string
-     */
-    protected $description = 'Manually trigger KJC historical data capture';
-
-    /**
-     * Execute the console command.
-     */
-    public function handle()
-    {
-        $month = $this->option('month');
-        $year = $this->option('year');
-        $useQueue = $this->option('queue');
-
-        // If no month/year provided, use previous month
-        if (! $month || ! $year) {
-            $lastMonth = Carbon::now()->subMonth();
-            $month = $month ?: $lastMonth->format('m');
-            $year = $year ?: $lastMonth->format('Y');
-        }
-
-        $this->info("Triggering KJC historical data capture for {$month}/{$year}...");
-
-        try {
-            if ($useQueue) {
-                // Dispatch to queue
-                CaptureKJCHistoricalDataJob::dispatch($month, $year);
-                $this->info('✓ KJC historical data capture job dispatched to queue');
-                $this->info('You can monitor the job in Horizon dashboard');
-            } else {
-                // Run immediately
-                $job = new CaptureKJCHistoricalDataJob($month, $year);
-                $job->handle(app(KJCHistoricalDataService::class));
-                $this->info('✓ KJC historical data capture completed immediately');
-            }
-
-        } catch (\Exception $e) {
-            $this->error('Error: '.$e->getMessage());
-
-            return 1;
-        }
-
-        return 0;
-    }
-}

be/app/Console/Commands/TriggerPKJHistoricalDataCapture.php

@@ -1,55 +0,0 @@
-<?php
-
-namespace App\Console\Commands;
-
-use App\Jobs\CapturePKJHistoricalDataJob;
-use App\Services\PKJHistoricalDataService;
-use Carbon\Carbon;
-use Illuminate\Console\Command;
-
-class TriggerPKJHistoricalDataCapture extends Command
-{
-    protected $signature = 'pkj:historical:trigger 
-                            {--month= : Month to capture (1-12)}
-                            {--year= : Year to capture (YYYY)}
-                            {--queue : Dispatch to queue instead of running immediately}';
-
-    protected $description = 'Manually trigger PKJ historical data capture';
-
-    public function handle()
-    {
-        $month = $this->option('month');
-        $year = $this->option('year');
-        $useQueue = $this->option('queue');
-
-        // If no month/year provided, use previous month
-        if (! $month || ! $year) {
-            $lastMonth = Carbon::now()->subMonth();
-            $month = $month ?: $lastMonth->format('m');
-            $year = $year ?: $lastMonth->format('Y');
-        }
-
-        $this->info("Triggering PKJ historical data capture for {$month}/{$year}...");
-
-        try {
-            if ($useQueue) {
-                // Dispatch to queue
-                CapturePKJHistoricalDataJob::dispatch($month, $year);
-                $this->info('✓ PKJ historical data capture job dispatched to queue');
-                $this->info('You can monitor the job in Horizon dashboard');
-            } else {
-                // Run immediately
-                $job = new CapturePKJHistoricalDataJob($month, $year);
-                $job->handle(app(PKJHistoricalDataService::class));
-                $this->info('✓ PKJ historical data capture completed immediately');
-            }
-
-        } catch (\Exception $e) {
-            $this->error('Error: '.$e->getMessage());
-
-            return 1;
-        }
-
-        return 0;
-    }
-}

be/app/Http/Controllers/BaseCrudController.php

@@ -113,8 +113,6 @@ abstract class BaseCrudController extends Controller
 
             $item = $this->repository->create($data);
 
-            ActivityLogger::log("Created {$this->resourceName}: {$this->getItemName($item)}", $item);
-
             return response()->json([
                 'success' => true,
                 'data' => new $this->resourceClass($item),
@@ -175,8 +173,6 @@ abstract class BaseCrudController extends Controller
 
             $item->update($data);
 
-            ActivityLogger::log("Updated {$this->resourceName}: {$this->getItemName($item)}", $item);
-
             return response()->json([
                 'success' => true,
                 'data' => new $this->resourceClass($item),
@@ -221,8 +217,6 @@ abstract class BaseCrudController extends Controller
 
             $this->repository->delete($id);
 
-            ActivityLogger::log("Deleted {$this->resourceName}: {$this->getItemName($item)}", $item);
-
             return response()->json([
                 'success' => true,
                 'message' => $this->getSuccessMessage('destroy'),

be/app/Jobs/CaptureKJCHistoricalDataJob.php

@@ -1,102 +0,0 @@
-<?php
-
-namespace App\Jobs;
-
-use App\Services\KJCHistoricalDataService;
-use Illuminate\Bus\Queueable;
-use Illuminate\Contracts\Queue\ShouldQueue;
-use Illuminate\Foundation\Bus\Dispatchable;
-use Illuminate\Queue\InteractsWithQueue;
-use Illuminate\Queue\SerializesModels;
-use Illuminate\Support\Facades\Log;
-
-class CaptureKJCHistoricalDataJob implements ShouldQueue
-{
-    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
-
-    public $timeout = 300; // 5 minutes timeout
-
-    public $tries = 3; // Retry 3 times if failed
-
-    public $backoff = 60; // Wait 60 seconds between retries
-
-    protected $month;
-
-    protected $year;
-
-    /**
-     * Create a new job instance.
-     */
-    public function __construct($month = null, $year = null)
-    {
-        $this->month = $month;
-        $this->year = $year;
-
-        // Set queue name for Horizon monitoring
-        $this->onQueue('kjc-historical-data');
-    }
-
-    /**
-     * Execute the job.
-     */
-    public function handle(KJCHistoricalDataService $kjcHistoricalService)
-    {
-        try {
-            Log::info('Starting KJC historical data capture job', [
-                'month' => $this->month,
-                'year' => $this->year,
-                'job_id' => $this->job ? $this->job->getJobId() : 'manual-execution',
-            ]);
-
-            $success = $kjcHistoricalService->captureMonthlySnapshots($this->month, $this->year);
-
-            if ($success) {
-                Log::info('KJC historical data capture job completed successfully', [
-                    'month' => $this->month,
-                    'year' => $this->year,
-                    'job_id' => $this->job ? $this->job->getJobId() : 'manual-execution',
-                ]);
-            } else {
-                Log::error('KJC historical data capture job failed', [
-                    'month' => $this->month,
-                    'year' => $this->year,
-                    'job_id' => $this->job ? $this->job->getJobId() : 'manual-execution',
-                ]);
-
-                throw new \Exception('KJC historical data capture failed');
-            }
-
-        } catch (\Exception $e) {
-            Log::error('KJC historical data capture job exception', [
-                'month' => $this->month,
-                'year' => $this->year,
-                'job_id' => $this->job ? $this->job->getJobId() : 'manual-execution',
-                'error' => $e->getMessage(),
-                'trace' => $e->getTraceAsString(),
-            ]);
-
-            throw $e;
-        }
-    }
-
-    /**
-     * Handle a job failure.
-     */
-    public function failed(\Throwable $exception)
-    {
-        Log::error('KJC historical data capture job failed permanently', [
-            'month' => $this->month,
-            'year' => $this->year,
-            'job_id' => $this->job ? $this->job->getJobId() : 'manual-execution',
-            'error' => $exception->getMessage(),
-        ]);
-    }
-
-    /**
-     * Get the tags that should be assigned to the job.
-     */
-    public function tags()
-    {
-        return ['kjc-historical-data', "month-{$this->month}", "year-{$this->year}"];
-    }
-}

be/app/Jobs/CapturePKJHistoricalDataJob.php

@@ -1,102 +0,0 @@
-<?php
-
-namespace App\Jobs;
-
-use App\Services\PKJHistoricalDataService;
-use Illuminate\Bus\Queueable;
-use Illuminate\Contracts\Queue\ShouldQueue;
-use Illuminate\Foundation\Bus\Dispatchable;
-use Illuminate\Queue\InteractsWithQueue;
-use Illuminate\Queue\SerializesModels;
-use Illuminate\Support\Facades\Log;
-
-class CapturePKJHistoricalDataJob implements ShouldQueue
-{
-    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
-
-    public $timeout = 300; // 5 minutes timeout
-
-    public $tries = 3; // Retry 3 times if failed
-
-    public $backoff = 60; // Wait 60 seconds between retries
-
-    protected $month;
-
-    protected $year;
-
-    /**
-     * Create a new job instance.
-     */
-    public function __construct($month = null, $year = null)
-    {
-        $this->month = $month;
-        $this->year = $year;
-
-        // Set queue name for Horizon monitoring
-        $this->onQueue('pkj-historical-data');
-    }
-
-    /**
-     * Execute the job.
-     */
-    public function handle(PKJHistoricalDataService $historicalService)
-    {
-        try {
-            Log::info('Starting PKJ historical data capture job', [
-                'month' => $this->month,
-                'year' => $this->year,
-                'job_id' => $this->job ? $this->job->getJobId() : 'manual-execution',
-            ]);
-
-            $success = $historicalService->captureMonthlySnapshots($this->month, $this->year);
-
-            if ($success) {
-                Log::info('PKJ historical data capture job completed successfully', [
-                    'month' => $this->month,
-                    'year' => $this->year,
-                    'job_id' => $this->job ? $this->job->getJobId() : 'manual-execution',
-                ]);
-            } else {
-                Log::error('PKJ historical data capture job failed', [
-                    'month' => $this->month,
-                    'year' => $this->year,
-                    'job_id' => $this->job ? $this->job->getJobId() : 'manual-execution',
-                ]);
-
-                throw new \Exception('PKJ historical data capture failed');
-            }
-
-        } catch (\Exception $e) {
-            Log::error('PKJ historical data capture job exception', [
-                'month' => $this->month,
-                'year' => $this->year,
-                'job_id' => $this->job ? $this->job->getJobId() : 'manual-execution',
-                'error' => $e->getMessage(),
-                'trace' => $e->getTraceAsString(),
-            ]);
-
-            throw $e;
-        }
-    }
-
-    /**
-     * Handle a job failure.
-     */
-    public function failed(\Throwable $exception)
-    {
-        Log::error('PKJ historical data capture job failed permanently', [
-            'month' => $this->month,
-            'year' => $this->year,
-            'job_id' => $this->job ? $this->job->getJobId() : 'manual-execution',
-            'error' => $exception->getMessage(),
-        ]);
-    }
-
-    /**
-     * Get the tags that should be assigned to the job.
-     */
-    public function tags()
-    {
-        return ['pkj-historical-data', "month-{$this->month}", "year-{$this->year}"];
-    }
-}

be/routes/console.php

@@ -3,27 +3,7 @@
 use Illuminate\Foundation\Inspiring;
 use Illuminate\Support\Facades\Artisan;
 use Illuminate\Support\Facades\Schedule;
-use App\Jobs\CaptureKJCHistoricalDataJob;
-use App\Jobs\CapturePKJHistoricalDataJob;
 
 Artisan::command('inspire', function () {
     $this->comment(Inspiring::quote());
-})->purpose('Display an inspiring quote');
-
-// Schedule KJC Historical Data Capture to run monthly on the 1st day at 2:00 AM
-Schedule::job(new CaptureKJCHistoricalDataJob())
-    ->monthlyOn(1, '02:00')
-    ->withoutOverlapping()
-    ->name('kjc-historical-data-capture');
-
-// Schedule PKJ Historical Data Capture to run monthly on the 1st day at 2:30 AM
-Schedule::job(new CapturePKJHistoricalDataJob())
-    ->monthlyOn(1, '02:30')
-    ->withoutOverlapping()
-    ->name('pkj-historical-data-capture');
-
-// Auto-generate weekly KJC reports for Jabatan Arah RAJD every Monday at 3:00 AM
-Schedule::command('kjc:auto-generate-weekly-report "Jabatan Arah RAJD"')
-    ->weeklyOn(1, '03:00') // Monday at 3:00 AM
-    ->withoutOverlapping()
-    ->name('kjc-auto-weekly-report');
+})->purpose('Display an inspiring quote');

fe/src/composables/useRoleSwitcher.ts

@@ -86,9 +86,9 @@ export function useRoleSwitcher() {
         toast: true,
         position: 'top-end',
         icon: 'success',
-        title: res.message || 'Peranan telah ditukar.',
+        title: res.message,
         showConfirmButton: false,
-        timer: 3000,
+        timer: 500,
       })
 
       await router.push(resolvePostLoginRoute(res.redirect_path))

fe/src/modules/auth/pages/Login.vue

@@ -117,7 +117,7 @@ const appVersion = import.meta.env.VITE_APP_VERSION
                 <Input v-model="email" class="box block min-w-full px-5 py-6 xl:min-w-md" type="email"
                   placeholder="Email" autocomplete="email" required />
                 <PasswordInput v-model="password" class="box block min-w-full px-5 py-6 xl:min-w-md"
-                  placeholder="Password" autocomplete="current-password" required />
+                  placeholder="Kata Laluan" autocomplete="current-password" required />
                 <div class="flex text-xs sm:text-sm">
                   <div class="mr-auto flex-row items-center">
                     <CheckboxRoot :checked="remember" @checked-change="({ checked }) => (remember = checked === true)">
@@ -127,7 +127,7 @@ const appVersion = import.meta.env.VITE_APP_VERSION
                   </div>
                   <button type="button" class="opacity-70 hover:opacity-100"
                     @click="router.push({ name: 'forgot-password' })">
-                    Lupa Password?
+                    Lupa Kata Laluan?
                   </button>
                 </div>
                 <div class="mt-5 text-center xl:mt-10 xl:text-left">

fe/src/modules/auth/pages/Register.vue

@@ -8,6 +8,7 @@ import { Input } from '@/components/ui/input'
 import { AlertRoot, AlertTitle, AlertDescription } from '@/components/ui/alert'
 import { PasswordInput } from '@/components/ui/password-input'
 import { getRegisterErrorMessage, register } from '@/modules/auth'
+import { sanitizeIcNumberInput, sanitizeNameInput } from '@/utils/form-input.utils'
 import illustrationUrl from '@/assets/images/logo.svg'
 
 const router = useRouter()
@@ -21,6 +22,14 @@ const termsAccepted = ref(false)
 const loading = ref(false)
 const errorMessage = ref('')
 
+const handleNameInput = () => {
+  name.value = sanitizeNameInput(name.value)
+}
+
+const handleIcNumberInput = () => {
+  icNumber.value = sanitizeIcNumberInput(icNumber.value)
+}
+
 const handleRegister = async () => {
   if (!termsAccepted.value) {
     errorMessage.value = 'Sila bersetuju dengan Dasar Privasi dan Terma dan Syarat.'
@@ -90,15 +99,16 @@ const handleRegister = async () => {
 
               <form class="mt-8 flex flex-col gap-5" @submit.prevent="handleRegister">
                 <Input v-model="name" class="box block min-w-full px-5 py-6 xl:min-w-md" type="text"
-                  placeholder="Nama Penuh" autocomplete="name" required />
+                  placeholder="Nama Penuh" autocomplete="name" required @input="handleNameInput" />
                 <Input v-model="email" class="box block min-w-full px-5 py-6 xl:min-w-md" type="email"
                   placeholder="Email" autocomplete="email" required />
                 <Input v-model="icNumber" class="box block min-w-full px-5 py-6 xl:min-w-md" type="text"
-                  placeholder="No. Kad Pengenalan" required />
+                  inputmode="numeric" maxlength="15" placeholder="Contoh: 900101011234" required
+                  @input="handleIcNumberInput" />
                 <PasswordInput v-model="password" class="box block min-w-full px-5 py-6 xl:min-w-md" type="password"
-                  placeholder="Password" autocomplete="new-password" minlength="8" required />
+                  placeholder="Kata Laluan" autocomplete="new-password" minlength="8" required />
                 <PasswordInput v-model="passwordConfirmation" class="box block min-w-full px-5 py-6 xl:min-w-md"
-                  placeholder="Sahkan Password" autocomplete="new-password" minlength="8" required />
+                  placeholder="Sahkan Kata Laluan" autocomplete="new-password" minlength="8" required />
 
                 <div class="flex text-xs sm:text-sm">
                   <CheckboxRoot :checked="termsAccepted"

fe/src/modules/membership-application/pages/MembershipApplication.vue

@@ -22,7 +22,7 @@ import { AlertRoot, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Lucide } from '@/components/ui/lucide'
 import { getApiErrorMessage, getApiValidationErrors } from '@/core/utils/getApiErrorMessage'
 import { submitMembershipApplication, lookupMemberByIcNumber } from '../services/membership-application.service'
-import { sanitizeIcNumberInput } from '../utils/membership-application-form.utils'
+import { sanitizeIcNumberInput, sanitizeNameInput } from '@/utils/form-input.utils'
 import type {
   MembershipApplicationFormState,
   MembershipApplicationHeirForm,
@@ -80,15 +80,15 @@ const RELATIONSHIP_OPTIONS: SelectOption[] = [
 // TODO: replace with API lookup
 const EMPLOYERS = [
   {
-    name: 'INFRA QUEST SDN BHD',
+    name: 'Infra Quest Sdn. Bhd. (IQSB)',
     address: 'Lot 1045, Jalan Dato’ Lundang, 15200 Kota Bharu, Kelantan',
   },
   {
-    name: 'Permodalan Kelantan Berhad',
+    name: 'Permodalan Kelantan Berhad (PKB)',
     address: 'Permodalan Kelantan Berhad, Tingkat 4, Wisma Permodalan Kelantan Berhad, Jalan Maju, 15000 Kota Bharu Kelantan',
   },
   {
-    name: 'Koperasi Permodalan Kelantan Berhad',
+    name: 'Koperasi Permodalan Kelantan Berhad (KOPKB)',
     address: 'Lot Pt 448, Tingkat 1,Jalan Kuala Krai, Batu 3, Wakaf Che Yeh, 15150 Kota Bharu, Kelantan.',
   },
   {
@@ -226,11 +226,23 @@ function handleReferenceIcInput(role: 'proposer' | 'supporter') {
   clearReference(role)
 }
 
+function handleApplicantNameInput() {
+  form.applicant.name = sanitizeNameInput(form.applicant.name)
+  delete fieldErrors['applicant.name']
+}
+
 function handleApplicantIcInput() {
   form.applicant.ic_number = sanitizeIcNumberInput(form.applicant.ic_number)
   delete fieldErrors['applicant.ic_number']
 }
 
+function handleHeirNameInput(index: number) {
+  const heir = form.heirs[index]
+  if (!heir) return
+  heir.name = sanitizeNameInput(heir.name)
+  delete fieldErrors[`heirs.${index}.name`]
+}
+
 function handleHeirIcInput(index: number) {
   const heir = form.heirs[index]
   if (!heir) return
@@ -622,7 +634,7 @@ function stepLabelClass(stepId: number) {
             <template v-if="currentStep === 1">
               <Field class="col-span-12 sm:col-span-6">
                 <FieldLabel for="name">Nama Penuh</FieldLabel>
-                <Input id="name" v-model="form.applicant.name" type="text" />
+                <Input id="name" v-model="form.applicant.name" type="text" @input="handleApplicantNameInput" />
                 <FieldError v-if="fieldErrors['applicant.name']">{{ fieldErrors['applicant.name'] }}</FieldError>
               </Field>
               <Field class="col-span-12 sm:col-span-6">
@@ -808,7 +820,8 @@ function stepLabelClass(stepId: number) {
                   <div class="grid grid-cols-12 gap-4">
                     <Field class="col-span-12 sm:col-span-6">
                       <FieldLabel :for="`heir-name-${index}`">Nama</FieldLabel>
-                      <Input :id="`heir-name-${index}`" v-model="heir.name" type="text" />
+                      <Input :id="`heir-name-${index}`" v-model="heir.name" type="text"
+                        @input="handleHeirNameInput(index)" />
                       <FieldError v-if="fieldErrors[`heirs.${index}.name`]">
                         {{ fieldErrors[`heirs.${index}.name`] }}
                       </FieldError>

fe/src/modules/membership-application/utils/membership-application-form.utils.ts

@@ -61,9 +61,7 @@ export type ApplicantDocumentUploadType = (typeof APPLICANT_DOCUMENT_UPLOAD_TYPE
 export type AdminDocumentUploadType = (typeof ADMIN_DOCUMENT_UPLOAD_TYPES)[number]
 export type DocumentUploadType = ApplicantDocumentUploadType | AdminDocumentUploadType
 
-export function sanitizeIcNumberInput(value: string): string {
-  return value.replace(/\D/g, '')
-}
+export { sanitizeIcNumberInput } from '@/utils/form-input.utils'
 
 export function createSelectCollection(options: SelectOption[]) {
   return select.collection({
@@ -172,11 +170,11 @@ export function detailToFormState(detail: MembershipApplicationDetail): Membersh
     },
     heirs: detail.heirs.length
       ? detail.heirs.map((heir) => ({
-          name: toFormString(heir.name),
-          ic_number: toFormString(heir.ic_number),
-          relationship: toFormString(heir.relationship),
-          phone_number: toFormString(heir.phone_number),
-        }))
+        name: toFormString(heir.name),
+        ic_number: toFormString(heir.ic_number),
+        relationship: toFormString(heir.relationship),
+        phone_number: toFormString(heir.phone_number),
+      }))
       : [createEmptyHeir()],
     references: {
       proposer: {

fe/src/modules/profile/pages/ProfileOverview2.vue

@@ -15,7 +15,6 @@ import MemberDigitalCard from '../components/MemberDigitalCard.vue'
 import ProfileTab from './ProfileTab.vue'
 import EmploymentTab from './EmploymentTab.vue'
 import BankDetailTab from './BankDetailTab.vue'
-import HeirTab from './HeirTab.vue'
 import ChangePasswordTab from './ChangePasswordTab.vue'
 
 const authStore = useAuthStore()
@@ -263,12 +262,6 @@ onMounted(async () => {
               <Lucide class="size-4 shrink-0 md:mr-2" icon="Banknote" />
               <span class="hidden md:inline">Bank</span>
             </TabsTrigger>
-            <TabsTrigger
-              class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 sm:px-3 md:text-sm"
-              value="6" aria-label="Penama">
-              <Lucide class="size-4 shrink-0 md:mr-2" icon="Users" />
-              <span class="hidden md:inline">Penama</span>
-            </TabsTrigger>
             <TabsTrigger
               class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 sm:px-3 md:text-sm"
               value="2" aria-label="Kata Laluan">
@@ -294,10 +287,6 @@ onMounted(async () => {
       <TabsContent value="2" class="mt-8">
         <ChangePasswordTab embedded />
       </TabsContent>
-      <!-- Penama -->
-      <TabsContent value="6" class="mt-8">
-        <HeirTab embedded />
-      </TabsContent>
     </TabsRoot>
   </div>
 </template>

fe/src/modules/profile/pages/ProfileTab.vue

@@ -20,6 +20,7 @@ import {
   SelectItemText,
 } from '@/components/ui/select'
 import { getApiErrorMessage, getApiValidationErrors } from '@/core/utils/getApiErrorMessage'
+import { sanitizeIcNumberInput, sanitizeNameInput } from '@/utils/form-input.utils'
 import {
   createAddress,
   deleteAddress,
@@ -29,6 +30,7 @@ import {
 import { updateProfile } from '@/modules/profile/services/profile.service'
 import type { Address, AddressPayload } from '@/modules/profile/types/address.types'
 import { useAuthStore } from '@/stores/auth'
+import HeirTab from './HeirTab.vue'
 
 defineProps<{
   embedded?: boolean
@@ -159,6 +161,14 @@ const stateValue = ref<string[]>([])
 const addressTypeInitial = ref<string[]>([])
 const stateInitial = ref<string[]>([])
 
+function handleNameInput() {
+  form.name = sanitizeNameInput(form.name)
+}
+
+function handleIcNumberInput() {
+  form.ic_number = sanitizeIcNumberInput(form.ic_number)
+}
+
 function clearProfileFieldError(field: ProfileFieldKey) {
   delete profileErrors[field]
 }
@@ -569,7 +579,8 @@ onMounted(async () => {
           <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
             <Field>
               <FieldLabel for="profile-name">Nama</FieldLabel>
-              <Input id="profile-name" v-model="form.name" type="text" placeholder="Nama penuh" required />
+              <Input id="profile-name" v-model="form.name" type="text" placeholder="Nama penuh" required
+                @input="handleNameInput" />
             </Field>
             <Field>
               <FieldLabel for="profile-email">E-mel</FieldLabel>
@@ -577,7 +588,8 @@ onMounted(async () => {
             </Field>
             <Field>
               <FieldLabel for="profile-ic">No. Kad Pengenalan</FieldLabel>
-              <Input id="profile-ic" v-model="form.ic_number" type="text" placeholder="No. kad pengenalan" />
+              <Input id="profile-ic" v-model="form.ic_number" type="text" inputmode="numeric" maxlength="15"
+                placeholder="Contoh: 900101011234" @input="handleIcNumberInput" />
             </Field>
             <Field>
               <FieldLabel for="profile-phone">No. Telefon</FieldLabel>
@@ -817,5 +829,7 @@ onMounted(async () => {
         </form>
       </div>
     </Box>
+
+    <HeirTab embedded />
   </div>
 </template>

fe/src/modules/user/composables/useUserList.ts

@@ -3,13 +3,15 @@ import debounce from 'lodash/debounce'
 import type { SortConfig } from '@/components/ui/usage/DataTable.vue'
 import { useApiPagination } from '@/composables/useApiPagination'
 import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
-import { listUsers } from '../services/user.service'
+import { getUserStats, listUsers } from '../services/user.service'
 import type { UserListItem } from '../types/user.types'
 
 export function useUserList() {
   const users = ref<UserListItem[]>([])
   const loading = ref(false)
+  const statsLoading = ref(false)
   const error = ref<string | null>(null)
+  const statsError = ref<string | null>(null)
   const search = ref('')
   const statusFilter = ref('')
   const joinDateFrom = ref('')
@@ -19,6 +21,7 @@ export function useUserList() {
   const sortBy = ref<SortConfig[]>([{ key: 'name', order: 'asc' }])
   const page = ref(1)
   const itemsPerPage = ref(10)
+  const stats = ref<{ total: number; joined_this_month: number }>({ total: 0, joined_this_month: 0 })
 
   const { pagination, applyPagination } = useApiPagination({ per_page: 10 })
 
@@ -64,6 +67,29 @@ export function useUserList() {
     }
   }
 
+  async function fetchStats() {
+    statsLoading.value = true
+    statsError.value = null
+
+    try {
+      const res = await getUserStats({
+        search: search.value.trim() || undefined,
+        status: statusFilter.value.trim() || undefined,
+        join_date_from: joinDateFrom.value || undefined,
+        join_date_to: joinDateTo.value || undefined,
+        leave_date_from: leaveDateFrom.value || undefined,
+        leave_date_to: leaveDateTo.value || undefined,
+      })
+
+      stats.value = res.data
+    } catch (err) {
+      statsError.value = getApiErrorMessage(err, 'Gagal memuatkan statistik pengguna.')
+      stats.value = { total: 0, joined_this_month: 0 }
+    } finally {
+      statsLoading.value = false
+    }
+  }
+
   function handleSortUpdate(value: SortConfig[]) {
     sortBy.value = value
     fetchUsers(1)
@@ -71,6 +97,7 @@ export function useUserList() {
 
   const debouncedSearch = debounce(() => {
     fetchUsers(1)
+    fetchStats()
   }, 400)
 
   watch(search, () => {
@@ -79,10 +106,12 @@ export function useUserList() {
 
   watch(statusFilter, () => {
     fetchUsers(1)
+    fetchStats()
   })
 
   watch([joinDateFrom, joinDateTo, leaveDateFrom, leaveDateTo], () => {
     fetchUsers(1)
+    fetchStats()
   })
 
   watch(page, (nextPage, previousPage) => {
@@ -99,11 +128,15 @@ export function useUserList() {
 
   onMounted(() => {
     fetchUsers(1)
+    fetchStats()
   })
 
   return {
     users,
     loading,
+    stats,
+    statsLoading,
+    statsError,
     error,
     search,
     statusFilter,
@@ -121,5 +154,6 @@ export function useUserList() {
     pagination,
     handleSortUpdate,
     fetchUsers,
+    fetchStats,
   }
 }

fe/src/modules/user/pages/UserCreate.vue

@@ -19,6 +19,7 @@ import {
   SelectItemText,
 } from '@/components/ui/select'
 import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
+import { sanitizeIcNumberInput, sanitizeNameInput } from '@/utils/form-input.utils'
 import { createUser } from '../services/user.service'
 
 type SelectOption = { label: string; value: string }
@@ -105,6 +106,14 @@ const form = reactive({
   birth_place: '',
 })
 
+function handleNameInput() {
+  form.name = sanitizeNameInput(form.name)
+}
+
+function handleIcNumberInput() {
+  form.ic_number = sanitizeIcNumberInput(form.ic_number)
+}
+
 function requireSelectValue(label: string | undefined, fieldName: string): string {
   if (!label) {
     throw new Error(`${fieldName} diperlukan.`)
@@ -201,6 +210,7 @@ const formDisabled = computed(() => saving.value)
               placeholder="Nama penuh"
               :disabled="formDisabled"
               required
+              @input="handleNameInput"
             />
           </Field>
 
@@ -226,9 +236,12 @@ const formDisabled = computed(() => saving.value)
               v-model="form.ic_number"
               class="w-full"
               type="text"
-              placeholder="Nombor kad pengenalan"
+              inputmode="numeric"
+              maxlength="15"
+              placeholder="Contoh: 900101011234"
               :disabled="formDisabled"
               required
+              @input="handleIcNumberInput"
             />
           </Field>
 

fe/src/modules/user/pages/UserEdit.vue

@@ -20,6 +20,7 @@ import {
   SelectItemText,
 } from '@/components/ui/select'
 import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
+import { sanitizeIcNumberInput, sanitizeNameInput } from '@/utils/form-input.utils'
 import { getUser, updateUser } from '../services/user.service'
 
 type SelectOption = { label: string; value: string }
@@ -121,6 +122,14 @@ const form = reactive({
   birth_place: '',
 })
 
+function handleNameInput() {
+  form.name = sanitizeNameInput(form.name)
+}
+
+function handleIcNumberInput() {
+  form.ic_number = sanitizeIcNumberInput(form.ic_number)
+}
+
 function toDateInputValue(value: string | null | undefined): string {
   if (!value) return ''
   return value.slice(0, 10)
@@ -239,7 +248,7 @@ onMounted(() => {
           <Field>
             <FieldLabel for="user-name">Nama</FieldLabel>
             <Input id="user-name" v-model="form.name" class="w-full" type="text" placeholder="Nama penuh"
-              :disabled="formDisabled" required />
+              :disabled="formDisabled" required @input="handleNameInput" />
           </Field>
 
           <Field>
@@ -251,8 +260,8 @@ onMounted(() => {
         <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
           <Field>
             <FieldLabel for="user-ic">Nombor Kad Pengenalan</FieldLabel>
-            <Input id="user-ic" v-model="form.ic_number" class="w-full" type="text" placeholder="Nombor kad pengenalan"
-              :disabled="formDisabled" required />
+            <Input id="user-ic" v-model="form.ic_number" class="w-full" type="text" inputmode="numeric" maxlength="15"
+              placeholder="Contoh: 900101011234" :disabled="formDisabled" required @input="handleIcNumberInput" />
           </Field>
 
           <Field>

fe/src/modules/user/pages/UserHeirTab.vue

@@ -1,38 +0,0 @@
-<script lang="ts" setup>
-import { Badge } from '@/components/ui/badge'
-import { Box } from '@/components/ui/box'
-import type { UserDetail } from '../types/user.types'
-
-defineProps<{
-  user: UserDetail
-  embedded?: boolean
-}>()
-</script>
-
-<template>
-  <div :class="embedded ? '' : 'mt-5'">
-    <Box raised="single" class="p-6">
-      <div class="mb-6">
-        <h3 class="text-lg font-semibold text-slate-900">Penama</h3>
-        <p class="mt-1 text-sm text-slate-500">Senarai penama pengguna.</p>
-      </div>
-
-      <div v-if="user.heirs?.length" class="space-y-3">
-        <div v-for="heir in user.heirs" :key="heir.id" class="rounded-lg border border-foreground/10 p-4">
-          <div class="flex flex-wrap items-center gap-2">
-            <span class="font-medium text-slate-900">{{ heir.name }}</span>
-            <Badge v-if="heir.is_primary" class="bg-green-500 text-white">Utama</Badge>
-            <Badge look="outline">{{ heir.relationship }}</Badge>
-          </div>
-          <p class="mt-1 text-sm text-slate-500">{{ heir.ic_number }}</p>
-          <p class="mt-1 text-sm text-slate-500">{{ heir.phone_number }}</p>
-          <p class="mt-1 text-sm text-slate-700">{{ heir.address }}</p>
-        </div>
-      </div>
-
-      <div v-else class="rounded-lg border border-dashed border-foreground/15 p-6 text-center text-sm text-slate-500">
-        Tiada penama direkodkan.
-      </div>
-    </Box>
-  </div>
-</template>

fe/src/modules/user/pages/UserList.vue

@@ -1,12 +1,19 @@
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import dayjs from 'dayjs'
 import debounce from 'lodash/debounce'
 import { Search, HatGlasses, SquarePen, Trash2, Eye, Shield, RotateCcw } from '@lucide/vue'
 import { Badge } from '@/components/ui/badge'
+import { Box } from '@/components/ui/box'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import {
+  AccordionRoot,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from '@/components/ui/accordion'
 import { CheckboxRoot, CheckboxControl, CheckboxLabel } from '@/components/ui/checkbox'
 import { DialogRoot, DialogContent, DialogCloseTrigger } from '@/components/ui/dialog'
 import { Lucide } from '@/components/ui/lucide'
@@ -78,6 +85,70 @@ function formatUserRoles(roles: UserRole[] | undefined): string {
   return roles?.map((role) => role.name).join(', ') || '-'
 }
 
+type QuickDatePreset = {
+  label: string
+  getRange: () => { from: string; to: string }
+}
+
+function formatDateInput(value: dayjs.Dayjs) {
+  return value.format('YYYY-MM-DD')
+}
+
+const QUICK_DATE_PRESETS: QuickDatePreset[] = [
+  {
+    label: 'Bulan ini',
+    getRange: () => ({
+      from: formatDateInput(dayjs().startOf('month')),
+      to: formatDateInput(dayjs().endOf('month')),
+    }),
+  },
+  {
+    label: 'Bulan lepas',
+    getRange: () => {
+      const prev = dayjs().subtract(1, 'month')
+      return {
+        from: formatDateInput(prev.startOf('month')),
+        to: formatDateInput(prev.endOf('month')),
+      }
+    },
+  },
+  {
+    label: 'Tahun ini',
+    getRange: () => ({
+      from: formatDateInput(dayjs().startOf('year')),
+      to: formatDateInput(dayjs().endOf('year')),
+    }),
+  },
+]
+
+function applyJoinDatePreset(preset: QuickDatePreset) {
+  const { from, to } = preset.getRange()
+  joinDateFrom.value = from
+  joinDateTo.value = to
+}
+
+function applyLeaveDatePreset(preset: QuickDatePreset) {
+  const { from, to } = preset.getRange()
+  leaveDateFrom.value = from
+  leaveDateTo.value = to
+}
+
+function getUserCompanyName(
+  item: Pick<UserListItem, 'company_name' | 'employments'>,
+): string {
+  if (item.company_name) return item.company_name
+  const employments = item.employments ?? []
+  const current = employments.find((employment) => employment.is_current)
+  return (current ?? employments[0])?.company_name ?? '-'
+}
+
+const totalUsersLabel = computed(() => {
+  const value = stats.value.total || pagination.value.total
+  return value.toLocaleString()
+})
+
+const joinedThisMonthCountLabel = computed(() => stats.value.joined_this_month.toLocaleString())
+
 function statusBadgeVariant(status: string) {
   if (status === 'active') return 'success'
   if (status === 'inactive') return 'danger'
@@ -222,6 +293,13 @@ async function confirmRestore() {
 const headers: TableHeader[] = [
   { title: 'Bil.', key: '#', sortable: false },
   { title: 'Name', key: 'name', sortable: true },
+  { title: 'Jenis Anggota', key: 'member_type', sortable: true },
+  {
+    title: 'Unit',
+    key: 'company_name',
+    sortable: false,
+    exportValue: (item) => getUserCompanyName(item),
+  },
   { title: 'Jawatan', key: 'position', sortable: true },
   { title: 'No. Anggota', key: 'member_number', sortable: true, align: 'center' },
   {
@@ -246,10 +324,16 @@ const headers: TableHeader[] = [
   { title: 'Tindakan', key: 'actions', sortable: false },
 ]
 
+// deleted users table headers
 const deletedHeaders: TableHeader[] = [
   { title: 'Bil.', key: '#', sortable: false },
   { title: 'Name', key: 'name', sortable: true },
-  { title: 'Emel', key: 'email', sortable: true },
+  {
+    title: 'Unit',
+    key: 'company_name',
+    sortable: false,
+    exportValue: (item) => getUserCompanyName(item),
+  },
   { title: 'Jawatan', key: 'position', sortable: true },
   { title: 'No. Anggota', key: 'member_number', sortable: true, align: 'center' },
   {
@@ -266,6 +350,9 @@ const deletedHeaders: TableHeader[] = [
 const {
   users,
   loading,
+  stats,
+  statsLoading,
+  statsError,
   error,
   search,
   statusFilter,
@@ -333,11 +420,99 @@ onMounted(() => {
       <h2 class="text-lg font-medium">Senarai Daftar Anggota</h2>
       <p class="mt-1 text-sm opacity-70">Urus dan semak anggota koperasi.</p>
     </div>
+
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <Box class="p-5">
+        <div class="flex items-start justify-between gap-4">
+          <div>
+            <div class="text-sm font-medium opacity-70">Jumlah Anggota</div>
+            <div class="mt-2 text-3xl font-semibold tabular-nums">{{ totalUsersLabel }}</div>
+            <div class="mt-1 text-xs opacity-60">Mengikut carian & penapis semasa</div>
+          </div>
+          <div class="flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
+            <Lucide icon="Users" class="size-5" />
+          </div>
+        </div>
+      </Box>
+
+      <Box class="p-5">
+        <div class="flex items-start justify-between gap-4">
+          <div>
+            <div class="text-sm font-medium opacity-70">Baru Sertai</div>
+            <div class="mt-2 text-3xl font-semibold tabular-nums">{{ joinedThisMonthCountLabel }}</div>
+            <div class="mt-1 text-xs opacity-60">Bulan ini (semua rekod)</div>
+            <div v-if="statsError" class="mt-1 text-xs text-danger">{{ statsError }}</div>
+          </div>
+          <div class="flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
+            <Lucide icon="UserPlus" class="size-5" />
+          </div>
+        </div>
+      </Box>
+    </div>
+
     <AlertRoot v-if="error" class="mt-6" variant="danger">
       <AlertTitle>Error</AlertTitle>
       <AlertDescription>{{ error }}</AlertDescription>
     </AlertRoot>
 
+    <AccordionRoot class="w-full" variant="boxed">
+      <AccordionItem raised="single" value="date-filters">
+        <AccordionTrigger>Penapis Tarikh</AccordionTrigger>
+        <AccordionContent>
+          <div class="flex flex-col gap-3">
+            <div class="rounded-lg border border-foreground/10 p-3">
+              <div class="flex flex-wrap items-end gap-3">
+                <div class="flex min-w-[16rem] flex-1 flex-col gap-1.5">
+                  <span class="text-sm font-medium">Tarikh Menjadi Anggota</span>
+                  <div class="flex flex-wrap items-center gap-2">
+                    <span class="text-sm opacity-70">Pantas:</span>
+                    <Badge v-for="preset in QUICK_DATE_PRESETS" :key="`join-${preset.label}`" variant="ghost"
+                      look="outline" role="button" tabindex="0" @click="applyJoinDatePreset(preset)"
+                      @keydown.enter="applyJoinDatePreset(preset)">
+                      {{ preset.label }}
+                    </Badge>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <Input v-model="joinDateFrom" type="date" aria-label="Tarikh menjadi anggota dari" />
+                    <span class="text-sm opacity-50">–</span>
+                    <Input v-model="joinDateTo" type="date" aria-label="Tarikh menjadi anggota hingga" />
+                  </div>
+                </div>
+                <Button v-if="hasJoinDateFilters" type="button" variant="ghost" look="outline"
+                  @click="clearJoinDateFilters">
+                  Reset
+                </Button>
+              </div>
+            </div>
+            <div class="rounded-lg border border-foreground/10 p-3">
+              <div class="flex flex-wrap items-end gap-3">
+                <div class="flex min-w-[16rem] flex-1 flex-col gap-1.5">
+                  <span class="text-sm font-medium">Tarikh Berhenti</span>
+                  <div class="flex flex-wrap items-center gap-2">
+                    <span class="text-sm opacity-70">Pantas:</span>
+                    <Badge v-for="preset in QUICK_DATE_PRESETS" :key="`leave-${preset.label}`" variant="ghost"
+                      look="outline" role="button" tabindex="0" @click="applyLeaveDatePreset(preset)"
+                      @keydown.enter="applyLeaveDatePreset(preset)">
+                      {{ preset.label }}
+                    </Badge>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <Input v-model="leaveDateFrom" type="date" aria-label="Tarikh berhenti dari" />
+                    <span class="text-sm opacity-50">–</span>
+                    <Input v-model="leaveDateTo" type="date" aria-label="Tarikh berhenti hingga" />
+                  </div>
+                </div>
+                <Button v-if="hasLeaveDateFilters" type="button" variant="ghost" look="outline"
+                  @click="clearLeaveDateFilters">
+                  Reset
+                </Button>
+              </div>
+            </div>
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </AccordionRoot>
+
     <DataTable :headers="headers" :items="users" :loading="loading" :pagination="pagination" :current-sort="sortBy"
       show-pagination exportable export-file-name="users" export-pdf-title="Senarai Daftar Anggota" v-model:page="page"
       v-model:items-per-page="itemsPerPage" @update:sort-by="handleSortUpdate">
@@ -348,7 +523,7 @@ onMounted(() => {
               <Search
                 class="pointer-events-none absolute top-1/2 left-3 z-10 size-4 -translate-y-1/2 text-foreground/50"
                 aria-hidden="true" />
-              <Input v-model="search" type="search" placeholder="Search name, email, IC, phone, role..."
+              <Input v-model="search" type="search" placeholder="Cari nama, email, no. anggota, jawatan..."
                 class="w-full pl-9" aria-label="Search users" />
             </div>
             <Button v-if="hasPermission('daftar pengguna baru')" type="button" variant="primary" look="outline"
@@ -365,50 +540,6 @@ onMounted(() => {
               {{ chip.label }}
             </Badge>
           </div>
-          <div class="flex flex-col gap-3">
-            <div class="rounded-lg border border-foreground/10 p-3">
-              <div class="flex flex-wrap items-end gap-3">
-                <div class="flex min-w-[16rem] flex-1 flex-col gap-1.5">
-                  <span class="text-sm font-medium">Tarikh Menjadi Anggota</span>
-                  <div class="flex items-center gap-2">
-                    <Input v-model="joinDateFrom" type="date" aria-label="Tarikh menjadi anggota dari" />
-                    <span class="text-sm opacity-50">–</span>
-                    <Input v-model="joinDateTo" type="date" aria-label="Tarikh menjadi anggota hingga" />
-                  </div>
-                </div>
-                <Button
-                  v-if="hasJoinDateFilters"
-                  type="button"
-                  variant="ghost"
-                  look="outline"
-                  @click="clearJoinDateFilters"
-                >
-                  Reset
-                </Button>
-              </div>
-            </div>
-            <div class="rounded-lg border border-foreground/10 p-3">
-              <div class="flex flex-wrap items-end gap-3">
-                <div class="flex min-w-[16rem] flex-1 flex-col gap-1.5">
-                  <span class="text-sm font-medium">Tarikh Berhenti</span>
-                  <div class="flex items-center gap-2">
-                    <Input v-model="leaveDateFrom" type="date" aria-label="Tarikh berhenti dari" />
-                    <span class="text-sm opacity-50">–</span>
-                    <Input v-model="leaveDateTo" type="date" aria-label="Tarikh berhenti hingga" />
-                  </div>
-                </div>
-                <Button
-                  v-if="hasLeaveDateFilters"
-                  type="button"
-                  variant="ghost"
-                  look="outline"
-                  @click="clearLeaveDateFilters"
-                >
-                  Reset
-                </Button>
-              </div>
-            </div>
-          </div>
         </div>
       </template>
 
@@ -429,6 +560,14 @@ onMounted(() => {
         <span class="lowercase">{{ item.email }}</span>
       </template>
 
+      <template #item.member_type="{ item }">
+        <span class="capitalize">{{ item.member_type }}</span>
+      </template>
+
+      <template #item.company_name="{ item }">
+        <span>{{ getUserCompanyName(item) }}</span>
+      </template>
+
       <template #item.roles="{ item }">
         {{ formatUserRoles(item.roles) }}
       </template>
@@ -516,6 +655,14 @@ onMounted(() => {
           <span class="lowercase">{{ item.email }}</span>
         </template>
 
+        <template #item.member_type="{ item }">
+          <span class="uppercase">{{ item.member_type }}</span>
+        </template>
+
+        <template #item.company_name="{ item }">
+          <span>{{ getUserCompanyName(item) }}</span>
+        </template>
+
         <template #item.roles="{ item }">
           {{ formatUserRoles(item.roles) }}
         </template>

fe/src/modules/user/pages/UserProfileTab.vue

@@ -153,5 +153,32 @@ function formatAddressLine(address: Address) {
         Tiada alamat direkodkan.
       </div>
     </Box>
+
+    <Box raised="single" class="p-6">
+      <div class="mb-6">
+        <h3 class="text-lg font-semibold text-slate-900">Penama</h3>
+        <p class="mt-1 text-sm text-slate-500">Senarai penama pengguna.</p>
+      </div>
+
+      <div v-if="user.heirs?.length" class="space-y-3">
+        <div v-for="heir in user.heirs" :key="heir.id" class="rounded-lg border border-foreground/10 p-4">
+          <div class="flex flex-wrap items-center gap-2">
+            <span class="font-medium text-slate-900">{{ heir.name }}</span>
+            <Badge v-if="heir.is_primary" class="bg-green-500 text-white">Utama</Badge>
+            <Badge look="outline">{{ heir.relationship }}</Badge>
+          </div>
+          <p class="mt-1 text-sm text-slate-500">{{ heir.ic_number }}</p>
+          <p class="mt-1 text-sm text-slate-500">{{ heir.phone_number }}</p>
+          <p class="mt-1 text-sm text-slate-700">{{ heir.address }}</p>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="rounded-lg border border-dashed border-foreground/15 p-6 text-center text-sm text-slate-500"
+      >
+        Tiada penama direkodkan.
+      </div>
+    </Box>
   </div>
 </template>

fe/src/modules/user/pages/UserProfileView.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { AlertRoot, AlertTitle, AlertDescription } from '@/components/ui/alert'
+import { Badge } from '@/components/ui/badge'
 import { Box } from '@/components/ui/box'
 import { Button } from '@/components/ui/button'
 import { TabsRoot, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
@@ -13,7 +14,6 @@ import type { UserDetail } from '../types/user.types'
 import UserProfileTab from './UserProfileTab.vue'
 import UserEmploymentTab from './UserEmploymentTab.vue'
 import UserBankDetailTab from './UserBankDetailTab.vue'
-import UserHeirTab from './UserHeirTab.vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -29,15 +29,41 @@ const displayValue = (value: string | number | null | undefined) => {
   return String(value).trim() || '-'
 }
 
+const STATUS_LABELS: Record<string, string> = {
+  active: 'Aktif',
+  pending: 'Menunggu',
+  inactive: 'Tidak Aktif',
+}
+
 const statusLabel = computed(() => {
   const status = user.value?.status
   if (!status) return '-'
-  return status.charAt(0).toUpperCase() + status.slice(1)
+  return STATUS_LABELS[status] ?? status.charAt(0).toUpperCase() + status.slice(1)
 })
 
-const roleNames = computed(() =>
-  user.value?.roles?.map((role) => role.name).join(', ') || '-',
-)
+const statusBadgeVariant = computed(() => {
+  const status = user.value?.status
+  if (status === 'active') return 'success' as const
+  if (status === 'pending') return 'pending' as const
+  return 'secondary' as const
+})
+
+const companyName = computed(() => {
+  const employments = user.value?.employments ?? []
+  const currentEmployment = employments.find((employment) => employment.is_current)
+  return currentEmployment?.company_name ?? employments[0]?.company_name ?? null
+})
+
+function formatDateLabel(value: string | null | undefined): string {
+  if (!value) return '-'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return value
+  return new Intl.DateTimeFormat('ms-MY', {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  }).format(date)
+}
 
 const avatarFallback = computed(() => {
   const name = user.value?.name?.trim()
@@ -82,53 +108,66 @@ onMounted(() => {
 
     <TabsRoot v-else-if="user" defaultValue="1">
       <Box raised="single" class="mt-5 p-0">
-        <div class="flex flex-col border-b border-foreground/15 p-5 lg:flex-row">
-          <div class="flex flex-1 items-center justify-center px-5 lg:justify-start">
+        <div class="flex flex-col border-b border-foreground/15 lg:flex-row">
+          <!-- Identity -->
+          <div class="flex flex-1 items-center justify-center p-5 lg:justify-start">
             <AvatarRoot class="size-20 border-5 bg-background rounded-full sm:size-24 lg:size-32">
               <AvatarFallback>{{ avatarFallback }}</AvatarFallback>
               <AvatarImage v-if="user.image_url" :src="user.image_url" :alt="user.name" />
             </AvatarRoot>
-            <div class="ml-5">
-              <div class="w-24 truncate text-lg font-medium sm:w-40 sm:whitespace-normal">
+            <div class="ml-5 min-w-0">
+              <div class="truncate text-lg font-medium sm:whitespace-normal">
                 {{ displayValue(user.name) }}
               </div>
-              <div class="opacity-70">{{ roleNames }}</div>
+              <div v-if="user.member_type"
+                class="mt-1 truncate text-sm capitalize opacity-70 sm:whitespace-normal">
+                {{ displayValue(user.member_type) }}
+              </div>
+              <div class="mt-3 flex flex-wrap items-center gap-2">
+                <Badge :variant="statusBadgeVariant">{{ statusLabel }}</Badge>
+                <Badge v-if="user.member_number" look="outline" variant="secondary">
+                  No. {{ user.member_number }}
+                </Badge>
+              </div>
             </div>
           </div>
-          <div
-            class="mt-6 flex-1 border-t border-l border-r border-foreground/15 px-5 pt-5 lg:mt-0 lg:border-t-0 lg:pt-0">
-            <div class="text-center font-medium lg:mt-3 lg:text-left">Maklumat Hubungan</div>
-            <div class="mt-4 flex flex-col items-center justify-center lg:items-start">
+
+          <!-- Contact & membership -->
+          <div class="flex-1 border-t border-foreground/15 p-5 lg:border-t-0 lg:border-l">
+            <div class="text-center font-medium lg:text-left">Maklumat Hubungan</div>
+            <div class="mt-4 flex flex-col items-center lg:items-start">
               <div class="flex items-center truncate sm:whitespace-normal">
-                <Lucide class="mr-2 size-4" icon="Mail" />
+                <Lucide class="mr-2 size-4 shrink-0" icon="Mail" />
                 {{ displayValue(user.email) }}
               </div>
               <div class="mt-3 flex items-center truncate sm:whitespace-normal">
-                <Lucide class="mr-2 size-4" icon="Phone" />
+                <Lucide class="mr-2 size-4 shrink-0" icon="Phone" />
                 {{ displayValue(user.phone_number) }}
               </div>
               <div class="mt-3 flex items-center truncate sm:whitespace-normal">
-                <Lucide class="mr-2 size-4" icon="IdCard" />
+                <Lucide class="mr-2 size-4 shrink-0" icon="IdCard" />
                 {{ displayValue(user.ic_number) }}
               </div>
             </div>
-          </div>
-          <div
-            class="mt-6 flex flex-1 items-center justify-center border-t border-foreground/15 px-5 pt-5 lg:mt-0 lg:border-0 lg:pt-0">
-            <div class="grid grid-cols-3 gap-5">
-              <div class="text-center">
-                <div class="truncate text-xl font-medium">{{ user.roles?.length ?? 0 }}</div>
-                <div class="opacity-70">Peranan</div>
-              </div>
-              <div class="text-center">
-                <div class="text-xl font-medium">{{ statusLabel }}</div>
-                <div class="opacity-70">Status</div>
-              </div>
-              <div class="text-center">
-                <div class="truncate text-xl font-medium capitalize">
-                  {{ displayValue(user.member_type) }}
+
+            <div class="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-3">
+              <div class="text-center lg:text-left">
+                <div class="truncate text-base font-medium">
+                  {{ displayValue(user.position) }}
                 </div>
-                <div class="opacity-70">Jenis Anggota</div>
+                <div class="text-xs opacity-70">Jawatan</div>
+              </div>
+              <div class="text-center lg:text-left">
+                <div class="truncate text-base font-medium">
+                  {{ displayValue(companyName) }}
+                </div>
+                <div class="text-xs opacity-70">Unit</div>
+              </div>
+              <div class="col-span-2 text-center sm:col-span-1 lg:text-left">
+                <div class="truncate text-base font-medium">
+                  {{ formatDateLabel(user.join_date) }}
+                </div>
+                <div class="text-xs opacity-70">Tarikh Sertai</div>
               </div>
             </div>
           </div>
@@ -136,18 +175,15 @@ onMounted(() => {
 
         <div class="px-5 py-4">
           <TabsList class="mb-0 w-full flex justify-between">
-            <TabsTrigger class="inline-flex w-1/4 items-center justify-center" value="1">
+            <TabsTrigger class="inline-flex w-1/3 items-center justify-center" value="1">
               <Lucide class="mr-2 size-4" icon="User" /> Profil
             </TabsTrigger>
-            <TabsTrigger class="inline-flex w-1/4 items-center justify-center" value="5">
+            <TabsTrigger class="inline-flex w-1/3 items-center justify-center" value="5">
               <Lucide class="mr-2 size-4" icon="Briefcase" /> Pekerjaan
             </TabsTrigger>
-            <TabsTrigger class="inline-flex w-1/4 items-center justify-center" value="3">
+            <TabsTrigger class="inline-flex w-1/3 items-center justify-center" value="3">
               <Lucide class="mr-2 size-4" icon="Banknote" /> Bank
             </TabsTrigger>
-            <TabsTrigger class="inline-flex w-1/4 items-center justify-center" value="6">
-              <Lucide class="mr-2 size-4" icon="Users" /> Penama
-            </TabsTrigger>
           </TabsList>
         </div>
       </Box>
@@ -161,9 +197,6 @@ onMounted(() => {
       <TabsContent value="3" class="mt-8">
         <UserBankDetailTab :user="user" embedded />
       </TabsContent>
-      <TabsContent value="6" class="mt-8">
-        <UserHeirTab :user="user" embedded />
-      </TabsContent>
     </TabsRoot>
   </div>
 </template>

fe/src/modules/user/services/user.service.ts

@@ -15,6 +15,15 @@ type UserApiResponse = {
   message?: string
 }
 
+type UserStatsApiResponse = {
+  success: boolean
+  data: {
+    total: number
+    joined_this_month: number
+  }
+  message?: string
+}
+
 export async function listUsers(
   params: ListUsersParams,
 ): Promise<PaginatedApiResponse<UserListItem>> {
@@ -29,6 +38,20 @@ export async function listUsers(
   return data
 }
 
+export async function getUserStats(
+  params: Omit<ListUsersParams, 'page' | 'per_page' | 'sort_by' | 'sort_order'>,
+): Promise<UserStatsApiResponse> {
+  const { data } = await api.get<UserStatsApiResponse>('/v1/users/stats', {
+    params,
+  })
+
+  if (!data.success) {
+    throw new Error(data.message ?? 'Failed to load user stats')
+  }
+
+  return data
+}
+
 export async function listDeletedUsers(
   params: ListDeletedUsersParams,
 ): Promise<PaginatedApiResponse<UserListItem>> {

fe/src/modules/user/types/user.types.ts

@@ -20,6 +20,8 @@ export interface UserListItem {
   email: string
   ic_number: string
   position: string
+  company_name?: string | null
+  employments?: Employment[]
   phone_number: string
   image_url: string | null
   status: string

fe/src/utils/form-input.utils.ts

@@ -0,0 +1,7 @@
+export function sanitizeIcNumberInput(value: string): string {
+  return value.replace(/\D/g, '')
+}
+
+export function sanitizeNameInput(value: string): string {
+  return value.toUpperCase()
+}