From 01997dccc47b1105ad6f2626ded4705d0ae2363b Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Wed, 10 Jun 2026 23:33:19 +0700
Subject: [PATCH] Add user settings management features including Appearance,
 Password, and Profile controllers for handling user preferences. Implement
 corresponding requests for validation and create views for each setting.
 Enhance middleware to manage appearance settings across the application.
 Update routes for new settings functionality and integrate UI components for
 user navigation in the settings layout.

---
 .../Admin/Setting/AppearanceController.php    |  36 +++++
 .../Admin/Setting/PasswordController.php      |  29 ++++
 .../Admin/Setting/ProfileController.php       |  37 +++++
 app/Http/Middleware/HandleAppearance.php      |  21 +++
 app/Http/Middleware/HandleInertiaRequests.php |   1 +
 .../Admin/Setting/UpdateAppearanceRequest.php |  21 +++
 .../Admin/Setting/UpdatePasswordRequest.php   |  22 +++
 .../Admin/Setting/UpdateProfileRequest.php    |  28 ++++
 app/Services/Setting/ProfileService.php       |  30 ++++
 bootstrap/app.php                             |   2 +
 resources/js/components/UserNav.vue           |  11 +-
 resources/js/composables/useAppearance.ts     |  17 +++
 resources/js/layouts/SettingsLayout.vue       |  59 ++++++++
 .../js/pages/admin/setting/Appearance.vue     | 121 ++++++++++++++++
 resources/js/pages/admin/setting/Password.vue |  89 ++++++++++++
 resources/js/pages/admin/setting/Profile.vue  | 137 ++++++++++++++++++
 resources/js/types/global.d.ts                |   1 +
 resources/js/types/settings.ts                |  41 ++++++
 resources/views/app.blade.php                 |  17 ++-
 routes/web.php                                |  14 ++
 server.php                                    |   1 -
 21 files changed, 730 insertions(+), 5 deletions(-)
 create mode 100644 app/Http/Controllers/Admin/Setting/AppearanceController.php
 create mode 100644 app/Http/Controllers/Admin/Setting/PasswordController.php
 create mode 100644 app/Http/Controllers/Admin/Setting/ProfileController.php
 create mode 100644 app/Http/Middleware/HandleAppearance.php
 create mode 100644 app/Http/Requests/Admin/Setting/UpdateAppearanceRequest.php
 create mode 100644 app/Http/Requests/Admin/Setting/UpdatePasswordRequest.php
 create mode 100644 app/Http/Requests/Admin/Setting/UpdateProfileRequest.php
 create mode 100644 app/Services/Setting/ProfileService.php
 create mode 100644 resources/js/composables/useAppearance.ts
 create mode 100644 resources/js/layouts/SettingsLayout.vue
 create mode 100644 resources/js/pages/admin/setting/Appearance.vue
 create mode 100644 resources/js/pages/admin/setting/Password.vue
 create mode 100644 resources/js/pages/admin/setting/Profile.vue
 create mode 100644 resources/js/types/settings.ts

diff --git a/app/Http/Controllers/Admin/Setting/AppearanceController.php b/app/Http/Controllers/Admin/Setting/AppearanceController.php
new file mode 100644
index 0000000..7ebeba5
--- /dev/null
+++ b/app/Http/Controllers/Admin/Setting/AppearanceController.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Http\Controllers\Admin\Setting;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\Admin\Setting\UpdateAppearanceRequest;
+use Illuminate\Http\RedirectResponse;
+use Inertia\Inertia;
+use Inertia\Response;
+use Symfony\Component\HttpFoundation\Cookie;
+
+class AppearanceController extends Controller
+{
+    public function edit(): Response
+    {
+        return Inertia::render('admin/setting/Appearance', [
+            'appearance' => request()->cookie('appearance', 'system'),
+        ]);
+    }
+
+    public function update(UpdateAppearanceRequest $request): RedirectResponse
+    {
+        $appearance = $request->string('appearance')->toString();
+
+        Inertia::flash('success', 'Tampilan berhasil diperbarui.');
+
+        return redirect()
+            ->route('admin.setting.appearance')
+            ->withCookie(Cookie::create('appearance')
+                ->withValue($appearance)
+                ->withExpires(now()->addYear())
+                ->withPath('/')
+                ->withHttpOnly(false)
+                ->withSameSite('lax'));
+    }
+}
diff --git a/app/Http/Controllers/Admin/Setting/PasswordController.php b/app/Http/Controllers/Admin/Setting/PasswordController.php
new file mode 100644
index 0000000..8c7e46e
--- /dev/null
+++ b/app/Http/Controllers/Admin/Setting/PasswordController.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Controllers\Admin\Setting;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\Admin\Setting\UpdatePasswordRequest;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Support\Facades\Hash;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class PasswordController extends Controller
+{
+    public function edit(): Response
+    {
+        return Inertia::render('admin/setting/Password');
+    }
+
+    public function update(UpdatePasswordRequest $request): RedirectResponse
+    {
+        $user = $request->user();
+        $user->password = Hash::make($request->string('password')->toString());
+        $user->save();
+
+        Inertia::flash('success', 'Kata sandi berhasil diperbarui.');
+
+        return redirect()->route('admin.setting.password');
+    }
+}
diff --git a/app/Http/Controllers/Admin/Setting/ProfileController.php b/app/Http/Controllers/Admin/Setting/ProfileController.php
new file mode 100644
index 0000000..8779ddd
--- /dev/null
+++ b/app/Http/Controllers/Admin/Setting/ProfileController.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Http\Controllers\Admin\Setting;
+
+use App\Enums\Gender;
+use App\Http\Controllers\Controller;
+use App\Http\Requests\Admin\Setting\UpdateProfileRequest;
+use App\Services\Setting\ProfileService;
+use Illuminate\Http\RedirectResponse;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class ProfileController extends Controller
+{
+    public function __construct(
+        private readonly ProfileService $profileService,
+    ) {}
+
+    public function edit(): Response
+    {
+        $user = auth()->user()->load('profile');
+
+        return Inertia::render('admin/setting/Profile', [
+            'genders' => Gender::selectOptions(),
+            'user' => $user,
+        ]);
+    }
+
+    public function update(UpdateProfileRequest $request): RedirectResponse
+    {
+        $this->profileService->update($request->validated());
+
+        Inertia::flash('success', 'Profil berhasil diperbarui.');
+
+        return redirect()->route('admin.setting.profile');
+    }
+}
diff --git a/app/Http/Middleware/HandleAppearance.php b/app/Http/Middleware/HandleAppearance.php
new file mode 100644
index 0000000..15c2394
--- /dev/null
+++ b/app/Http/Middleware/HandleAppearance.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\View;
+use Symfony\Component\HttpFoundation\Response;
+
+class HandleAppearance
+{
+    /**
+     * @param  Closure(Request): Response  $next
+     */
+    public function handle(Request $request, Closure $next): Response
+    {
+        View::share('appearance', $request->cookie('appearance', 'system'));
+
+        return $next($request);
+    }
+}
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index c9e1368..b6674f7 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -55,6 +55,7 @@ public function share(Request $request): array
             ],
             'sidebarOpen' => ! $request->hasCookie('sidebar_state')
                 || $request->cookie('sidebar_state') === 'true',
+            'appearance' => $request->cookie('appearance', 'system'),
         ];
     }
 }
diff --git a/app/Http/Requests/Admin/Setting/UpdateAppearanceRequest.php b/app/Http/Requests/Admin/Setting/UpdateAppearanceRequest.php
new file mode 100644
index 0000000..cb8af1c
--- /dev/null
+++ b/app/Http/Requests/Admin/Setting/UpdateAppearanceRequest.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Requests\Admin\Setting;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rule;
+
+class UpdateAppearanceRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return auth()->check();
+    }
+
+    public function rules(): array
+    {
+        return [
+            'appearance' => ['required', Rule::in(['light', 'dark', 'system'])],
+        ];
+    }
+}
diff --git a/app/Http/Requests/Admin/Setting/UpdatePasswordRequest.php b/app/Http/Requests/Admin/Setting/UpdatePasswordRequest.php
new file mode 100644
index 0000000..14d771c
--- /dev/null
+++ b/app/Http/Requests/Admin/Setting/UpdatePasswordRequest.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Requests\Admin\Setting;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rules\Password;
+
+class UpdatePasswordRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return auth()->check();
+    }
+
+    public function rules(): array
+    {
+        return [
+            'current_password' => ['required', 'current_password'],
+            'password' => ['required', 'confirmed', Password::defaults()],
+        ];
+    }
+}
diff --git a/app/Http/Requests/Admin/Setting/UpdateProfileRequest.php b/app/Http/Requests/Admin/Setting/UpdateProfileRequest.php
new file mode 100644
index 0000000..9c07909
--- /dev/null
+++ b/app/Http/Requests/Admin/Setting/UpdateProfileRequest.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Requests\Admin\Setting;
+
+use App\Enums\Gender;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rule;
+
+class UpdateProfileRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return auth()->check();
+    }
+
+    public function rules(): array
+    {
+        return [
+            'email' => ['required', 'email', 'max:100', Rule::unique('users', 'email')->ignore($this->user()?->id)],
+            'username' => ['required', 'string', 'max:20', 'alpha_dash', Rule::unique('users', 'username')->ignore($this->user()?->id)],
+            'full_name' => ['required', 'string', 'max:200'],
+            'phone_number' => ['nullable', 'string', 'regex:/^08\d{8,11}$/'],
+            'gender' => ['nullable', Rule::enum(Gender::class)],
+            'birth_date' => ['nullable', 'date', 'before:today'],
+            'address' => ['nullable', 'string'],
+        ];
+    }
+}
diff --git a/app/Services/Setting/ProfileService.php b/app/Services/Setting/ProfileService.php
new file mode 100644
index 0000000..7b89e11
--- /dev/null
+++ b/app/Services/Setting/ProfileService.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Services\Setting;
+
+use Illuminate\Support\Facades\DB;
+
+class ProfileService
+{
+    public function update(array $validated): void
+    {
+        $user = auth()->user();
+
+        DB::transaction(function () use ($user, $validated): void {
+            $user->email = $validated['email'];
+            $user->username = $validated['username'];
+            $user->save();
+
+            $user->profile()->updateOrCreate(
+                ['user_id' => $user->id],
+                [
+                    'full_name' => $validated['full_name'],
+                    'phone_number' => $validated['phone_number'] ?? null,
+                    'gender' => $validated['gender'] ?? null,
+                    'birth_date' => $validated['birth_date'] ?? null,
+                    'address' => $validated['address'] ?? null,
+                ],
+            );
+        });
+    }
+}
diff --git a/bootstrap/app.php b/bootstrap/app.php
index 8c18807..b9b2d94 100644
--- a/bootstrap/app.php
+++ b/bootstrap/app.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Middleware\HandleAppearance;
 use App\Http\Middleware\HandleInertiaRequests;
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Configuration\Exceptions;
@@ -24,6 +25,7 @@
         ]);
 
         $middleware->web(append: [
+            HandleAppearance::class,
             HandleInertiaRequests::class,
             AddLinkHeadersForPreloadedAssets::class,
         ]);
diff --git a/resources/js/components/UserNav.vue b/resources/js/components/UserNav.vue
index 62a3e87..f1d8b97 100644
--- a/resources/js/components/UserNav.vue
+++ b/resources/js/components/UserNav.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { router, usePage } from '@inertiajs/vue3';
-import { LogOut } from '@lucide/vue';
+import { LogOut, User } from '@lucide/vue';
 import { computed } from 'vue';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
@@ -9,9 +9,9 @@ import {
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuTrigger,
+    DropdownMenuSeparator, DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu';
+import Separator from './ui/separator/Separator.vue';
 
 const page = usePage();
 
@@ -49,6 +49,11 @@ function logout() {
                 </div>
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
+            <DropdownMenuItem @click="router.visit('/admin/setting/profile')">
+                <User />
+                Profil
+            </DropdownMenuItem>
+            <Separator />
             <DropdownMenuItem variant="destructive" @click="logout">
                 <LogOut />
                 Keluar
diff --git a/resources/js/composables/useAppearance.ts b/resources/js/composables/useAppearance.ts
new file mode 100644
index 0000000..3223e79
--- /dev/null
+++ b/resources/js/composables/useAppearance.ts
@@ -0,0 +1,17 @@
+import type { AppearanceMode } from '@/types/settings';
+
+export function applyAppearance(mode: AppearanceMode): void {
+    const root = document.documentElement;
+
+    root.classList.remove('dark');
+
+    if (mode === 'dark' || (mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        root.classList.add('dark');
+    }
+}
+
+export function useAppearance() {
+    return {
+        applyAppearance,
+    };
+}
diff --git a/resources/js/layouts/SettingsLayout.vue b/resources/js/layouts/SettingsLayout.vue
new file mode 100644
index 0000000..fffc84a
--- /dev/null
+++ b/resources/js/layouts/SettingsLayout.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { Link, usePage } from '@inertiajs/vue3';
+import { KeyRound, Palette, User } from '@lucide/vue';
+import { computed } from 'vue';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { cn } from '@/lib/utils';
+
+const page = usePage();
+
+const currentPath = computed(() => page.url.split('?')[0]);
+
+const navItems = [
+    {
+        href: '/admin/setting/profile',
+        label: 'Profil',
+        icon: User,
+    },
+    {
+        href: '/admin/setting/password',
+        label: 'Kata Sandi',
+        icon: KeyRound,
+    },
+    {
+        href: '/admin/setting/appearance',
+        label: 'Tampilan',
+        icon: Palette,
+    },
+];
+</script>
+
+<template>
+    <AdminLayout title="Pengaturan">
+        <div class="space-y-6">
+            <div class="space-y-1">
+                <h2 class="text-2xl font-bold tracking-tight">
+                    Pengaturan
+                </h2>
+            </div>
+
+            <div class="flex flex-col gap-6 lg:flex-row">
+                <nav class="flex shrink-0 flex-row gap-1 overflow-x-auto lg:w-56 lg:flex-col lg:overflow-visible">
+                    <Link v-for="item in navItems" :key="item.href" :href="item.href" :class="cn(
+                        'inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium whitespace-nowrap transition-colors',
+                        currentPath === item.href
+                            ? 'bg-accent text-accent-foreground'
+                            : 'text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground',
+                    )">
+                        <component :is="item.icon" class="size-4 shrink-0" />
+                        {{ item.label }}
+                    </Link>
+                </nav>
+
+                <div class="min-w-0 flex-1">
+                    <slot />
+                </div>
+            </div>
+        </div>
+    </AdminLayout>
+</template>
diff --git a/resources/js/pages/admin/setting/Appearance.vue b/resources/js/pages/admin/setting/Appearance.vue
new file mode 100644
index 0000000..8b9502f
--- /dev/null
+++ b/resources/js/pages/admin/setting/Appearance.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { Head, useForm } from '@inertiajs/vue3';
+import { Monitor, Moon, Save, Sun } from '@lucide/vue';
+import { toast } from 'vue-sonner';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+    Field,
+    FieldError,
+    FieldGroup,
+    FieldLabel,
+    FieldSet,
+} from '@/components/ui/field';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { applyAppearance } from '@/composables/useAppearance';
+import SettingsLayout from '@/layouts/SettingsLayout.vue';
+import { cn } from '@/lib/utils';
+import type { AppearanceFormData, AppearanceMode } from '@/types/settings';
+
+const props = defineProps<{
+    appearance: AppearanceMode;
+}>();
+
+const form = useForm<AppearanceFormData>({
+    appearance: props.appearance,
+});
+
+const options: Array<{
+    value: AppearanceMode;
+    label: string;
+    description: string;
+    icon: typeof Sun;
+}> = [
+        {
+            value: 'light',
+            label: 'Terang',
+            description: 'Tampilan terang untuk lingkungan yang cukup pencahayaan.',
+            icon: Sun,
+        },
+        {
+            value: 'dark',
+            label: 'Gelap',
+            description: 'Tampilan gelap yang nyaman di malam hari.',
+            icon: Moon,
+        },
+        {
+            value: 'system',
+            label: 'Sistem',
+            description: 'Mengikuti pengaturan tampilan perangkat Anda.',
+            icon: Monitor,
+        },
+    ];
+
+function onAppearanceChange(value: string) {
+    form.appearance = value as AppearanceMode;
+    applyAppearance(form.appearance);
+}
+
+function submit() {
+    form.put('/admin/setting/appearance', {
+        onError: () => {
+            toast.error('Gagal menyimpan tampilan.');
+        },
+    });
+}
+</script>
+
+<template>
+
+    <Head title="Tampilan" />
+
+    <SettingsLayout>
+        <form @submit.prevent="submit">
+            <Card>
+                <CardContent>
+                    <FieldSet>
+                        <FieldGroup>
+                            <Field>
+                                <FieldLabel>Mode Tampilan</FieldLabel>
+                                <RadioGroup :model-value="form.appearance" class="grid gap-3"
+                                    @update:model-value="onAppearanceChange">
+                                    <Label v-for="option in options" :key="option.value"
+                                        :for="`appearance-${option.value}`" :class="cn(
+                                            'flex cursor-pointer items-start gap-3 rounded-lg border p-4 transition-colors',
+                                            form.appearance === option.value
+                                                ? 'border-primary bg-primary/5'
+                                                : 'hover:bg-accent/50',
+                                        )">
+                                        <RadioGroupItem :id="`appearance-${option.value}`" :value="option.value"
+                                            class="mt-0.5" />
+                                        <div class="flex flex-1 items-start gap-3">
+                                            <component :is="option.icon"
+                                                class="text-muted-foreground mt-0.5 size-5 shrink-0" />
+                                            <div class="space-y-1">
+                                                <p class="text-sm leading-none font-medium">
+                                                    {{ option.label }}
+                                                </p>
+                                                <p class="text-muted-foreground text-sm">
+                                                    {{ option.description }}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </Label>
+                                </RadioGroup>
+                                <FieldError :errors="form.errors.appearance ? [form.errors.appearance] : []" />
+                            </Field>
+                        </FieldGroup>
+                    </FieldSet>
+
+                    <div class="mt-6 flex justify-end">
+                        <Button type="submit" :disabled="form.processing">
+                            <Save class="size-4" />
+                            Simpan Tampilan
+                        </Button>
+                    </div>
+                </CardContent>
+            </Card>
+        </form>
+    </SettingsLayout>
+</template>
diff --git a/resources/js/pages/admin/setting/Password.vue b/resources/js/pages/admin/setting/Password.vue
new file mode 100644
index 0000000..f1f99ad
--- /dev/null
+++ b/resources/js/pages/admin/setting/Password.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { Head, useForm } from '@inertiajs/vue3';
+import { Save } from '@lucide/vue';
+import { toast } from 'vue-sonner';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+    Field,
+    FieldError,
+    FieldGroup,
+    FieldLabel,
+    FieldSet,
+} from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+import SettingsLayout from '@/layouts/SettingsLayout.vue';
+import type { PasswordFormData } from '@/types/settings';
+
+const form = useForm<PasswordFormData>({
+    current_password: '',
+    password: '',
+    password_confirmation: '',
+});
+
+function submit() {
+    form.put('/admin/setting/password', {
+        onSuccess: () => {
+            form.reset();
+        },
+        onError: () => {
+            toast.error('Gagal memperbarui kata sandi. Periksa kembali formulir.');
+        },
+    });
+}
+</script>
+
+<template>
+
+    <Head title="Kata Sandi" />
+
+    <SettingsLayout>
+        <form @submit.prevent="submit">
+            <div class="grid gap-6">
+                <Card>
+                    <CardContent>
+                        <FieldSet>
+                            <FieldGroup class="grid gap-4 sm:grid-cols-3">
+                                <Field>
+                                    <FieldLabel for="current_password" required>
+                                        Kata Sandi Saat Ini
+                                    </FieldLabel>
+                                    <Input id="current_password" v-model="form.current_password" type="password"
+                                        placeholder="********" autocomplete="current-password" />
+                                    <FieldError
+                                        :errors="form.errors.current_password ? [form.errors.current_password] : []" />
+                                </Field>
+
+                                <Field>
+                                    <FieldLabel for="password" required>
+                                        Kata Sandi Baru
+                                    </FieldLabel>
+                                    <Input id="password" v-model="form.password" type="password" placeholder="********"
+                                        autocomplete="new-password" />
+                                    <FieldError :errors="form.errors.password ? [form.errors.password] : []" />
+                                </Field>
+
+                                <Field>
+                                    <FieldLabel for="password_confirmation" required>
+                                        Konfirmasi Kata Sandi Baru
+                                    </FieldLabel>
+                                    <Input id="password_confirmation" v-model="form.password_confirmation"
+                                        type="password" placeholder="********" autocomplete="new-password" />
+                                    <FieldError
+                                        :errors="form.errors.password_confirmation ? [form.errors.password_confirmation] : []" />
+                                </Field>
+                            </FieldGroup>
+                        </FieldSet>
+                    </CardContent>
+                </Card>
+
+                <div class="flex items-center justify-end gap-2">
+                    <Button type="submit" :disabled="form.processing">
+                        <Save class="size-4" />
+                        {{ form.processing ? 'Menyimpan...' : 'Simpan' }}
+                    </Button>
+                </div>
+            </div>
+        </form>
+    </SettingsLayout>
+</template>
diff --git a/resources/js/pages/admin/setting/Profile.vue b/resources/js/pages/admin/setting/Profile.vue
new file mode 100644
index 0000000..9e5f16e
--- /dev/null
+++ b/resources/js/pages/admin/setting/Profile.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { Head, useForm } from '@inertiajs/vue3';
+import { Save } from '@lucide/vue';
+import { toast } from 'vue-sonner';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { DatePicker } from '@/components/ui/date-picker';
+import {
+    Field,
+    FieldError,
+    FieldGroup,
+    FieldLabel,
+    FieldSet,
+} from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+import { PhoneNumberInput } from '@/components/ui/phone-number-input';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Textarea } from '@/components/ui/textarea';
+import SettingsLayout from '@/layouts/SettingsLayout.vue';
+import type { EnumOption, ProfileFormData, ProfileUser } from '@/types/settings';
+
+const props = defineProps<{
+    user: ProfileUser;
+    genders: EnumOption[];
+}>();
+
+const form = useForm<ProfileFormData>({
+    email: props.user.email ?? '',
+    username: props.user.username ?? '',
+    full_name: props.user.profile?.full_name ?? '',
+    phone_number: props.user.profile?.phone_number ?? '',
+    gender: props.user.profile?.gender ?? '',
+    birth_date: props.user.profile?.birth_date_input ?? '',
+    address: props.user.profile?.address ?? '',
+});
+
+function submit() {
+    form.put('/admin/setting/profile', {
+        onError: () => {
+            toast.error('Gagal menyimpan profil. Periksa kembali formulir.');
+        },
+    });
+}
+</script>
+
+<template>
+
+    <Head title="Profil" />
+
+    <SettingsLayout>
+        <form @submit.prevent="submit">
+            <div class="grid gap-6">
+                <Card>
+                    <CardContent>
+                        <FieldSet>
+                            <FieldGroup class="grid gap-4 sm:grid-cols-3">
+                                <Field>
+                                    <FieldLabel for="email" required>
+                                        Email
+                                    </FieldLabel>
+                                    <Input id="email" v-model="form.email" type="email"
+                                        placeholder="nama@perusahaan.com" />
+                                    <FieldError :errors="form.errors.email ? [form.errors.email] : []" />
+                                </Field>
+
+                                <Field>
+                                    <FieldLabel for="username" required>
+                                        Username
+                                    </FieldLabel>
+                                    <Input id="username" v-model="form.username" type="text" placeholder="username" />
+                                    <FieldError :errors="form.errors.username ? [form.errors.username] : []" />
+                                </Field>
+
+                                <Field>
+                                    <FieldLabel for="full_name" required>
+                                        Nama Lengkap
+                                    </FieldLabel>
+                                    <Input id="full_name" v-model="form.full_name" type="text"
+                                        placeholder="Nama lengkap" />
+                                    <FieldError :errors="form.errors.full_name ? [form.errors.full_name] : []" />
+                                </Field>
+
+                                <Field>
+                                    <FieldLabel for="phone_number">
+                                        Nomor Telepon
+                                    </FieldLabel>
+                                    <PhoneNumberInput id="phone_number" v-model="form.phone_number" />
+                                    <FieldError :errors="form.errors.phone_number ? [form.errors.phone_number] : []" />
+                                </Field>
+
+                                <Field>
+                                    <FieldLabel for="birth_date">
+                                        Tanggal Lahir
+                                    </FieldLabel>
+                                    <DatePicker id="birth_date" v-model="form.birth_date" />
+                                    <FieldError :errors="form.errors.birth_date ? [form.errors.birth_date] : []" />
+                                </Field>
+
+                                <Field>
+                                    <FieldLabel>
+                                        Jenis Kelamin
+                                    </FieldLabel>
+                                    <RadioGroup v-model="form.gender" class="flex flex-wrap gap-4 pt-1">
+                                        <div v-for="gender in genders" :key="gender.value"
+                                            class="flex items-center gap-2">
+                                            <RadioGroupItem :id="`gender-${gender.value}`" :value="gender.value" />
+                                            <label :for="`gender-${gender.value}`" class="text-sm">
+                                                {{ gender.label }}
+                                            </label>
+                                        </div>
+                                    </RadioGroup>
+                                    <FieldError :errors="form.errors.gender ? [form.errors.gender] : []" />
+                                </Field>
+
+                                <Field class="sm:col-span-3">
+                                    <FieldLabel for="address">
+                                        Alamat
+                                    </FieldLabel>
+                                    <Textarea id="address" v-model="form.address" placeholder="Alamat lengkap"
+                                        rows="3" />
+                                    <FieldError :errors="form.errors.address ? [form.errors.address] : []" />
+                                </Field>
+                            </FieldGroup>
+                        </FieldSet>
+                    </CardContent>
+                </Card>
+
+                <div class="flex items-center justify-end gap-2">
+                    <Button type="submit" :disabled="form.processing">
+                        <Save class="size-4" />
+                        {{ form.processing ? 'Menyimpan...' : 'Simpan' }}
+                    </Button>
+                </div>
+            </div>
+        </form>
+    </SettingsLayout>
+</template>
diff --git a/resources/js/types/global.d.ts b/resources/js/types/global.d.ts
index 1bfc830..25fe199 100644
--- a/resources/js/types/global.d.ts
+++ b/resources/js/types/global.d.ts
@@ -23,6 +23,7 @@ declare module '@inertiajs/core' {
                 error: string | null;
             };
             sidebarOpen: boolean;
+            appearance: 'light' | 'dark' | 'system';
             [key: string]: unknown;
         };
     }
diff --git a/resources/js/types/settings.ts b/resources/js/types/settings.ts
new file mode 100644
index 0000000..cf2c8c9
--- /dev/null
+++ b/resources/js/types/settings.ts
@@ -0,0 +1,41 @@
+import type { EnumOption } from '@/types/employee';
+
+export type AppearanceMode = 'light' | 'dark' | 'system';
+
+export type UserProfile = {
+    full_name: string | null;
+    phone_number: string | null;
+    gender: string | null;
+    gender_label: string | null;
+    birth_date_input: string | null;
+    address: string | null;
+};
+
+export type ProfileUser = {
+    id: number;
+    email: string;
+    username: string;
+    profile: UserProfile | null;
+};
+
+export type ProfileFormData = {
+    email: string;
+    username: string;
+    full_name: string;
+    phone_number: string;
+    gender: string;
+    birth_date: string;
+    address: string;
+};
+
+export type PasswordFormData = {
+    current_password: string;
+    password: string;
+    password_confirmation: string;
+};
+
+export type AppearanceFormData = {
+    appearance: AppearanceMode;
+};
+
+export type { EnumOption };
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 95c1149..1ce3d45 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -1,6 +1,19 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"  @class(['dark' => ($appearance ?? 'system') == 'dark'])>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" @class(['dark' => ($appearance ?? 'system') == 'dark'])>
+
     <head>
+        <script>
+            (function() {
+                const appearance = @json($appearance ?? 'system');
+
+                if (appearance === 'dark' || (appearance === 'system' && window.matchMedia('(prefers-color-scheme: dark)')
+                        .matches)) {
+                    document.documentElement.classList.add('dark');
+                } else {
+                    document.documentElement.classList.remove('dark');
+                }
+            })();
+        </script>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="description" content="{{ config('app.name', 'Laravel') }} - Progressive Web App">
@@ -18,7 +31,9 @@
             <title>{{ config('app.name', 'Laravel') }}</title>
         </x-inertia::head>
     </head>
+
     <body class="font-sans antialiased">
         <x-inertia::app />
     </body>
+
 </html>
diff --git a/routes/web.php b/routes/web.php
index 96202fe..454385e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -8,6 +8,9 @@
 use App\Http\Controllers\Admin\Master\ProductController;
 use App\Http\Controllers\Admin\Master\RawMaterialController;
 use App\Http\Controllers\Admin\Master\SupplierController;
+use App\Http\Controllers\Admin\Setting\AppearanceController;
+use App\Http\Controllers\Admin\Setting\PasswordController;
+use App\Http\Controllers\Admin\Setting\ProfileController;
 use App\Http\Controllers\Auth\LoginController;
 use App\Http\Controllers\Auth\LogoutController;
 use Illuminate\Support\Facades\Route;
@@ -143,6 +146,17 @@
 
         });
 
+        Route::prefix('setting')->name('setting.')->group(function () {
+            Route::get('profile', [ProfileController::class, 'edit'])->name('profile');
+            Route::put('profile', [ProfileController::class, 'update'])->name('profile.update');
+
+            Route::get('password', [PasswordController::class, 'edit'])->name('password');
+            Route::put('password', [PasswordController::class, 'update'])->name('password.update');
+
+            Route::get('appearance', [AppearanceController::class, 'edit'])->name('appearance');
+            Route::put('appearance', [AppearanceController::class, 'update'])->name('appearance.update');
+        });
+
         Route::prefix('hr')->name('hr.')->middleware('permission:'.Permission::EMPLOYEES_VIEW->value)->group(function () {
             Route::prefix('employees')->name('employees.')
                 ->middleware('permission:'.Permission::EMPLOYEES_VIEW->value)
diff --git a/server.php b/server.php
index 38c78ab..7668250 100644
--- a/server.php
+++ b/server.php
@@ -7,7 +7,6 @@
  *
  * @see https://vite-pwa-org.netlify.app/frameworks/laravel.html
  */
-
 $publicPath = getcwd();
 
 $uri = urldecode(