From 57f5c5dc61e16f7a1b150e3d5c2129520680b2d6 Mon Sep 17 00:00:00 2001
From: Sirawit Chanaburanasak <punpunsirawit@gmail.com>
Date: Sun, 22 Dec 2024 23:55:35 +0700
Subject: [PATCH] fix: lint

---
 .../Modal/ChangePasswordModal.svelte          | 266 ++++-----
 .../Backoffice/Modal/ConfirmationModal.svelte | 121 ++--
 .../Modal/CreateDocumentModal.svelte          | 273 +++++----
 .../Modal/CreateStatisticModal.svelte         | 304 +++++-----
 .../Backoffice/Modal/EditUserModal.svelte     | 233 ++++----
 .../Backoffice/Modal/FileRankingModal.svelte  | 532 +++++++++---------
 .../components/BackofficePlayground.svelte    | 164 +++---
 src/routes/+layout.svelte                     |   1 -
 8 files changed, 957 insertions(+), 937 deletions(-)

diff --git a/src/lib/components/Backoffice/Modal/ChangePasswordModal.svelte b/src/lib/components/Backoffice/Modal/ChangePasswordModal.svelte
index 3ef8d6e..963a6c9 100644
--- a/src/lib/components/Backoffice/Modal/ChangePasswordModal.svelte
+++ b/src/lib/components/Backoffice/Modal/ChangePasswordModal.svelte
@@ -1,142 +1,150 @@
 <script lang="ts">
-    export let open = false;
-    let dialogEl: HTMLDialogElement;
-    
-    let currentPassword = '';
-    let newPassword = '';
-    let confirmPassword = '';
-    
-    /**
-     * 3 Steps
-     * 1. Enter current password
-     * 2. Enter new password
-     * 3. Confirm new password
-     */
-    let step = 1; 
+	export let open = false;
+	let dialogEl: HTMLDialogElement;
 
-    function handleSubmit() {
-        if (step === 1 && currentPassword) {
-            // TODO: Check the current password
-            step = 2;
-            currentPassword = '';
-        } else if (step === 2 && newPassword && confirmPassword) {
-            if (newPassword === confirmPassword) {
-                step = 3;
-            }
-        } else {
-            handleClose();
-        }
-    }
+	let currentPassword = '';
+	let newPassword = '';
+	let confirmPassword = '';
 
-    function handleClose() {
-        currentPassword = '';
-        newPassword = '';
-        confirmPassword = '';
-        step = 1;
-        open = false;
-    }
+	/**
+	 * 3 Steps
+	 * 1. Enter current password
+	 * 2. Enter new password
+	 * 3. Confirm new password
+	 */
+	let step = 1;
 
-    $: if (open && dialogEl) {
-        dialogEl.showModal();
-    } else if (dialogEl) {
-        dialogEl.close();
-    }
+	function handleSubmit() {
+		if (step === 1 && currentPassword) {
+			// TODO: Check the current password
+			step = 2;
+			currentPassword = '';
+		} else if (step === 2 && newPassword && confirmPassword) {
+			if (newPassword === confirmPassword) {
+				step = 3;
+			}
+		} else {
+			handleClose();
+		}
+	}
+
+	function handleClose() {
+		currentPassword = '';
+		newPassword = '';
+		confirmPassword = '';
+		step = 1;
+		open = false;
+	}
+
+	$: if (open && dialogEl) {
+		dialogEl.showModal();
+	} else if (dialogEl) {
+		dialogEl.close();
+	}
 </script>
 
 {#if open}
-    <dialog 
-        bind:this={dialogEl}
-        class="bg-transparent p-0"
-        on:close={() => open = false}
-    >
-        <div 
-            role="presentation"
-            class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
-            on:click|self={handleClose}
-            on:keydown|self={(e) => e.key === 'Escape' && handleClose()}
-        >
-            <div class="bg-white w-full max-w-md rounded-md shadow-lg">
-                <div class="p-6">
-                    {#if step === 1}
-                        <h3 class="text-2xl font-bold text-sucu-gray-dark mb-2">เปลี่ยนรหัสผ่าน</h3>
-                        <p class="text-sucu-gray mb-6">กรอกรหัสปัจจุบันเพื่อสร้างรหัสใหม่</p>
-                        
-                        <form on:submit|preventDefault={handleSubmit} class="space-y-4">
-                            <div class="space-y-1">
-                                <span class="text-sm text-sucu-gray-dark">รหัสปัจจุบัน</span>
-                                <input
-                                    type="password"
-                                    bind:value={currentPassword}
-                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
-                                    required
-                                />
-                            </div>
-                            
-                            <div class="flex justify-end gap-4">
-                                <button type="button" class="px-4 py-2 text-sucu-dark-gray bg-white rounded-sm border border-sucu-pink-01 font-semibold hover:bg-red-500 hover:text-white transition-colors duration-300" on:click={handleClose}>
-                                    ยกเลิก
-                                </button>
-                                <button type="submit" class="px-4 py-2 text-white font-semibold bg-sucu-pink-01 rounded-sm">
-                                    ถัดไป
-                                </button>
-                            </div>
-                        </form>
+	<dialog bind:this={dialogEl} class="bg-transparent p-0" on:close={() => (open = false)}>
+		<div
+			role="presentation"
+			class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
+			on:click|self={handleClose}
+			on:keydown|self={(e) => e.key === 'Escape' && handleClose()}
+		>
+			<div class="bg-white w-full max-w-md rounded-md shadow-lg">
+				<div class="p-6">
+					{#if step === 1}
+						<h3 class="text-2xl font-bold text-sucu-gray-dark mb-2">เปลี่ยนรหัสผ่าน</h3>
+						<p class="text-sucu-gray mb-6">กรอกรหัสปัจจุบันเพื่อสร้างรหัสใหม่</p>
+
+						<form on:submit|preventDefault={handleSubmit} class="space-y-4">
+							<div class="space-y-1">
+								<span class="text-sm text-sucu-gray-dark">รหัสปัจจุบัน</span>
+								<input
+									type="password"
+									bind:value={currentPassword}
+									class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
+									required
+								/>
+							</div>
+
+							<div class="flex justify-end gap-4">
+								<button
+									type="button"
+									class="px-4 py-2 text-sucu-dark-gray bg-white rounded-sm border border-sucu-pink-01 font-semibold hover:bg-red-500 hover:text-white transition-colors duration-300"
+									on:click={handleClose}
+								>
+									ยกเลิก
+								</button>
+								<button
+									type="submit"
+									class="px-4 py-2 text-white font-semibold bg-sucu-pink-01 rounded-sm"
+								>
+									ถัดไป
+								</button>
+							</div>
+						</form>
+					{:else if step === 2}
+						<h3 class="text-2xl font-bold text-sucu-gray-dark mb-2">เปลี่ยนรหัสผ่าน</h3>
+						<p class="text-sucu-gray mb-6">กรอกรหัสใหม่และยืนยันอีกครั้ง</p>
 
-                    {:else if step === 2}
-                        <h3 class="text-2xl font-bold text-sucu-gray-dark mb-2">เปลี่ยนรหัสผ่าน</h3>
-                        <p class="text-sucu-gray mb-6">กรอกรหัสใหม่และยืนยันอีกครั้ง</p>
-                        
-                        <form on:submit|preventDefault={handleSubmit} class="space-y-4">
-                            <div class="space-y-1">
-                                <span class="text-sm text-sucu-gray-dark">รหัสใหม่</span>
-                                <input
-                                    type="password"
-                                    bind:value={newPassword}
-                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
-                                    required
-                                />
-                            </div>
+						<form on:submit|preventDefault={handleSubmit} class="space-y-4">
+							<div class="space-y-1">
+								<span class="text-sm text-sucu-gray-dark">รหัสใหม่</span>
+								<input
+									type="password"
+									bind:value={newPassword}
+									class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
+									required
+								/>
+							</div>
 
-                            <div class="space-y-1">
-                                <span class="text-sm text-sucu-gray-dark">ยืนยันรหัสใหม่</span>
-                                <input
-                                    type="password"
-                                    bind:value={confirmPassword}
-                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
-                                    required
-                                />
-                            </div>
-                            
-                            <div class="flex justify-end gap-4">
-                                <button type="button" class="px-4 py-2 text-sucu-dark-gray bg-white rounded-sm border border-sucu-pink-01 font-semibold hover:bg-red-500 hover:text-white transition-colors duration-300" on:click={handleClose}>
-                                    ยกเลิก
-                                </button>
-                                <button type="submit" class="px-4 py-2 text-white font-semibold bg-sucu-pink-01 rounded-sm">
-                                    ถัดไป
-                                </button>
-                            </div>
-                        </form>
+							<div class="space-y-1">
+								<span class="text-sm text-sucu-gray-dark">ยืนยันรหัสใหม่</span>
+								<input
+									type="password"
+									bind:value={confirmPassword}
+									class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
+									required
+								/>
+							</div>
 
-                    {:else}
-                        <div class="flex items-center justify-center flex-col">
-                            <h3 class="text-2xl font-bold text-sucu-gray-dark mb-2">เปลี่ยนรหัสผ่านสำเร็จ</h3>
-                            <p class="text-sucu-gray mb-6">โปรดคลิกยืนยันเพื่อเข้าสู่ระบบใหม่อีกครั้ง</p>
-                            <button 
-                                class="self-end w-1/3 px-4 py-2 text-white bg-sucu-pink-01 rounded-md hover:bg-sucu-pink-02"
-                                on:click={handleClose}
-                            >
-                                ยืนยัน
-                            </button>
-                        </div>
-                    {/if}
-                </div>
-            </div>
-        </div>
-    </dialog>
+							<div class="flex justify-end gap-4">
+								<button
+									type="button"
+									class="px-4 py-2 text-sucu-dark-gray bg-white rounded-sm border border-sucu-pink-01 font-semibold hover:bg-red-500 hover:text-white transition-colors duration-300"
+									on:click={handleClose}
+								>
+									ยกเลิก
+								</button>
+								<button
+									type="submit"
+									class="px-4 py-2 text-white font-semibold bg-sucu-pink-01 rounded-sm"
+								>
+									ถัดไป
+								</button>
+							</div>
+						</form>
+					{:else}
+						<div class="flex items-center justify-center flex-col">
+							<h3 class="text-2xl font-bold text-sucu-gray-dark mb-2">เปลี่ยนรหัสผ่านสำเร็จ</h3>
+							<p class="text-sucu-gray mb-6">โปรดคลิกยืนยันเพื่อเข้าสู่ระบบใหม่อีกครั้ง</p>
+							<button
+								class="self-end w-1/3 px-4 py-2 text-white bg-sucu-pink-01 rounded-md hover:bg-sucu-pink-02"
+								on:click={handleClose}
+							>
+								ยืนยัน
+							</button>
+						</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</dialog>
 {/if}
 
 <style>
-    dialog::backdrop {
-        display: none;
-    }
-</style> 
\ No newline at end of file
+	dialog::backdrop {
+		display: none;
+	}
+</style>
diff --git a/src/lib/components/Backoffice/Modal/ConfirmationModal.svelte b/src/lib/components/Backoffice/Modal/ConfirmationModal.svelte
index 3a0ea8b..8bcc2cd 100644
--- a/src/lib/components/Backoffice/Modal/ConfirmationModal.svelte
+++ b/src/lib/components/Backoffice/Modal/ConfirmationModal.svelte
@@ -1,75 +1,70 @@
 <script lang="ts">
-    export let isOpen = false;
-    export let title: string;
-    export let body: string;
-    export let confirmText = 'ยืนยัน';
-    export let cancelText = 'ยกเลิก';
-    export let onConfirm: () => void = () => {};
-    export let onCancel: () => void = () => {};
+	export let isOpen = false;
+	export let title: string;
+	export let body: string;
+	export let confirmText = 'ยืนยัน';
+	export let cancelText = 'ยกเลิก';
+	export let onConfirm: () => void = () => {};
+	export let onCancel: () => void = () => {};
 
-    let dialogEl: HTMLDialogElement;
+	let dialogEl: HTMLDialogElement;
 
-    function handleConfirm() {
-        onConfirm();
-        isOpen = false;
-    }
+	function handleConfirm() {
+		onConfirm();
+		isOpen = false;
+	}
 
-    function handleCancel() {
-        onCancel();
-        isOpen = false;
-    }
+	function handleCancel() {
+		onCancel();
+		isOpen = false;
+	}
 
-    $: if (isOpen && dialogEl) {
-        dialogEl.showModal();
-    } else if (dialogEl) {
-        dialogEl.close();
-    }
+	$: if (isOpen && dialogEl) {
+		dialogEl.showModal();
+	} else if (dialogEl) {
+		dialogEl.close();
+	}
 </script>
 
 {#if isOpen}
-    <dialog 
-        bind:this={dialogEl}
-        class="bg-transparent p-0"
-        on:close={() => isOpen = false}
-    >
-        <div 
-            role="presentation"
-            class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
-            on:click|self={handleCancel}
-            on:keydown|self={(e) => e.key === 'Escape' && handleCancel()}
-        >
-            <div class="bg-white w-full max-w-md rounded-md shadow-lg p-8">
-                <div class="space-y-6">
-                    <div class="space-y-2">
-                        <h3 class="text-2xl font-bold text-sucu-gray-dark">{title}</h3>
-                        <p class="text-sucu-gray">{body}</p>
-                    </div>
-                    
-                    <div class="flex justify-end gap-4">
-                        <button 
-                            type="button" 
-                            class="px-4 py-2 text-white font-semibold bg-sucu-pink-01 rounded-sm"
-                            on:click={handleConfirm}
-                        >
-                            {confirmText}
-                        </button>
-                        <button 
-                            type="button" 
-                            class="px-4 py-2 text-sucu-gray-dark font-semibold bg-white rounded-sm border border-sucu-pink-01 hover:bg-red-500 hover:text-white transition-colors duration-300"
-                            on:click={handleCancel}
-                        >
-                            {cancelText}
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </dialog>
+	<dialog bind:this={dialogEl} class="bg-transparent p-0" on:close={() => (isOpen = false)}>
+		<div
+			role="presentation"
+			class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
+			on:click|self={handleCancel}
+			on:keydown|self={(e) => e.key === 'Escape' && handleCancel()}
+		>
+			<div class="bg-white w-full max-w-md rounded-md shadow-lg p-8">
+				<div class="space-y-6">
+					<div class="space-y-2">
+						<h3 class="text-2xl font-bold text-sucu-gray-dark">{title}</h3>
+						<p class="text-sucu-gray">{body}</p>
+					</div>
+
+					<div class="flex justify-end gap-4">
+						<button
+							type="button"
+							class="px-4 py-2 text-white font-semibold bg-sucu-pink-01 rounded-sm"
+							on:click={handleConfirm}
+						>
+							{confirmText}
+						</button>
+						<button
+							type="button"
+							class="px-4 py-2 text-sucu-gray-dark font-semibold bg-white rounded-sm border border-sucu-pink-01 hover:bg-red-500 hover:text-white transition-colors duration-300"
+							on:click={handleCancel}
+						>
+							{cancelText}
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</dialog>
 {/if}
 
 <style>
-    dialog::backdrop {
-        display: none;
-    }
+	dialog::backdrop {
+		display: none;
+	}
 </style>
-
diff --git a/src/lib/components/Backoffice/Modal/CreateDocumentModal.svelte b/src/lib/components/Backoffice/Modal/CreateDocumentModal.svelte
index 52fcf7f..a8e49f7 100644
--- a/src/lib/components/Backoffice/Modal/CreateDocumentModal.svelte
+++ b/src/lib/components/Backoffice/Modal/CreateDocumentModal.svelte
@@ -1,152 +1,151 @@
 <script lang="ts">
-    import { faCloudArrowUp, faFile, faXmark } from '@fortawesome/free-solid-svg-icons';
-    import Fa from 'svelte-fa';
-    
-    export let isOpen = false;
-    let dialogEl: HTMLDialogElement;
-    
-    let documentName = '';
-    let selectedFile: File | null = null;
-    let dragOver = false;
-    let fileInputRef: HTMLInputElement;
+	import { faCloudArrowUp, faFile, faXmark } from '@fortawesome/free-solid-svg-icons';
+	import Fa from 'svelte-fa';
 
-    function handleSubmit() {
-        // TODO: Implement API call to create document
-        if (documentName && selectedFile) {
-            handleClose();
-        }
-    }
+	export let isOpen = false;
+	let dialogEl: HTMLDialogElement;
 
-    function handleClose() {
-        documentName = '';
-        selectedFile = null;
-        dragOver = false;
-        isOpen = false;
-    }
+	let documentName = '';
+	let selectedFile: File | null = null;
+	let dragOver = false;
+	let fileInputRef: HTMLInputElement;
 
-    function handleFileDrop(e: DragEvent) {
-        e.preventDefault();
-        dragOver = false;
-        const file = e.dataTransfer?.files[0];
-        if (file && file.type.startsWith('image/')) {
-            selectedFile = file;
-        }
-    }
+	function handleSubmit() {
+		// TODO: Implement API call to create document
+		if (documentName && selectedFile) {
+			handleClose();
+		}
+	}
 
-    function handleFileSelect(e: Event) {
-        const input = e.target as HTMLInputElement;
-        if (input.files?.[0]) {
-            selectedFile = input.files[0];
-        }
-    }
+	function handleClose() {
+		documentName = '';
+		selectedFile = null;
+		dragOver = false;
+		isOpen = false;
+	}
 
-    function openFileInput() {
-        fileInputRef?.click();
-    }
+	function handleFileDrop(e: DragEvent) {
+		e.preventDefault();
+		dragOver = false;
+		const file = e.dataTransfer?.files[0];
+		if (file && file.type.startsWith('image/')) {
+			selectedFile = file;
+		}
+	}
 
-    $: if (isOpen && dialogEl) {
-        dialogEl.showModal();
-    } else if (dialogEl) {
-        dialogEl.close();
-    }
+	function handleFileSelect(e: Event) {
+		const input = e.target as HTMLInputElement;
+		if (input.files?.[0]) {
+			selectedFile = input.files[0];
+		}
+	}
+
+	function openFileInput() {
+		fileInputRef?.click();
+	}
+
+	$: if (isOpen && dialogEl) {
+		dialogEl.showModal();
+	} else if (dialogEl) {
+		dialogEl.close();
+	}
 </script>
 
 {#if isOpen}
-    <dialog 
-        bind:this={dialogEl}
-        class="bg-transparent p-0"
-        on:close={() => isOpen = false}
-    >
-        <div 
-            role="presentation"
-            class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
-            on:click|self={handleClose}
-            on:keydown|self={(e) => e.key === 'Escape' && handleClose()}
-        >
-            <div class="bg-white w-full max-w-md rounded-md shadow-lg">
-                <div class="p-6">
-                    <h3 class="text-2xl font-bold text-sucu-gray-dark mb-2">สร้างเอกสาร</h3>
-                    <p class="text-sucu-gray mb-6">หากทำการยืนยันเอกสารจะถูกสร้าง และสามารถแก้ไขภายหลังได้</p>
-                    
-                    <form on:submit|preventDefault={handleSubmit} class="space-y-4">
-                        <div class="space-y-1">
-                            <span class="text-sm text-sucu-gray-dark">ชื่อเอกสาร</span>
-                            <input
-                                type="text"
-                                bind:value={documentName}
-                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
-                                required
-                            />
-                        </div>
+	<dialog bind:this={dialogEl} class="bg-transparent p-0" on:close={() => (isOpen = false)}>
+		<div
+			role="presentation"
+			class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
+			on:click|self={handleClose}
+			on:keydown|self={(e) => e.key === 'Escape' && handleClose()}
+		>
+			<div class="bg-white w-full max-w-md rounded-md shadow-lg">
+				<div class="p-6">
+					<h3 class="text-2xl font-bold text-sucu-gray-dark mb-2">สร้างเอกสาร</h3>
+					<p class="text-sucu-gray mb-6">หากทำการยืนยันเอกสารจะถูกสร้าง และสามารถแก้ไขภายหลังได้</p>
+
+					<form on:submit|preventDefault={handleSubmit} class="space-y-4">
+						<div class="space-y-1">
+							<span class="text-sm text-sucu-gray-dark">ชื่อเอกสาร</span>
+							<input
+								type="text"
+								bind:value={documentName}
+								class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
+								required
+							/>
+						</div>
+
+						<!-- File Drop Zone -->
+						<div
+							role="presentation"
+							class="border-2 border-dashed rounded-md p-6 text-center transition-colors cursor-pointer"
+							class:border-blue-500={dragOver}
+							class:border-gray-300={!dragOver}
+							on:dragenter|preventDefault={() => (dragOver = true)}
+							on:dragleave|preventDefault={() => (dragOver = false)}
+							on:dragover|preventDefault
+							on:drop|preventDefault={handleFileDrop}
+							on:click={openFileInput}
+						>
+							<input
+								type="file"
+								bind:this={fileInputRef}
+								id="fileInput"
+								accept="image/*"
+								class="hidden"
+								on:change={handleFileSelect}
+							/>
+							<span>
+								<Fa icon={faCloudArrowUp} class="mx-auto h-12 w-12 text-sucu-gray" />
+								<p class="mt-1 text-sm text-sucu-gray-dark">
+									Click or drag file to this area to upload
+								</p>
+								<p class="mt-1 text-xs text-sucu-gray">ประเภทไฟล์ที่รองรับ: .jpg .jpeg and .png</p>
+							</span>
+						</div>
 
-                        <!-- File Drop Zone -->
-                        <div 
-                            role="presentation"
-                            class="border-2 border-dashed rounded-md p-6 text-center transition-colors cursor-pointer"
-                            class:border-blue-500={dragOver}
-                            class:border-gray-300={!dragOver}
-                            on:dragenter|preventDefault={() => dragOver = true}
-                            on:dragleave|preventDefault={() => dragOver = false}
-                            on:dragover|preventDefault
-                            on:drop|preventDefault={handleFileDrop}
-                            on:click={openFileInput}
-                        >
-                            <input
-                                type="file"
-                                bind:this={fileInputRef}
-                                id="fileInput"
-                                accept="image/*"
-                                class="hidden"
-                                on:change={handleFileSelect}
-                            />
-                            <span>
-                                <Fa 
-                                    icon={faCloudArrowUp}
-                                    class="mx-auto h-12 w-12 text-sucu-gray"
-                                />
-                                <p class="mt-1 text-sm text-sucu-gray-dark">Click or drag file to this area to upload</p>
-                                <p class="mt-1 text-xs text-sucu-gray">ประเภทไฟล์ที่รองรับ: .jpg .jpeg and .png</p>
-                            </span>
-                        </div>
+						<!-- Selected File Display -->
+						{#if selectedFile}
+							<div class="flex items-center justify-between p-3 bg-gray-50 rounded-md">
+								<div class="flex items-center gap-3">
+									<Fa icon={faFile} class="w-6 h-6 text-sucu-gray" />
+									<span class="text-sm text-sucu-gray-dark">{selectedFile.name}</span>
+								</div>
+								<button
+									type="button"
+									class="text-sucu-gray hover:text-sucu-gray-dark"
+									on:click={() => (selectedFile = null)}
+								>
+									<Fa icon={faXmark} class="w-5 h-5" />
+								</button>
+							</div>
+						{/if}
 
-                        <!-- Selected File Display -->
-                        {#if selectedFile}
-                            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md">
-                                <div class="flex items-center gap-3">
-                                    <Fa icon={faFile} class="w-6 h-6 text-sucu-gray" />
-                                    <span class="text-sm text-sucu-gray-dark">{selectedFile.name}</span>
-                                </div>
-                                <button 
-                                    type="button"
-                                    class="text-sucu-gray hover:text-sucu-gray-dark"
-                                    on:click={() => selectedFile = null}
-                                >
-                                    <Fa icon={faXmark} class="w-5 h-5" />
-                                </button>
-                            </div>
-                        {/if}
-                        
-                        <div class="flex justify-end gap-4 pt-4">
-                            <button type="button" class="px-4 py-2 text-sucu-gray-dark font-semibold bg-white rounded-sm border border-sucu-pink-01 hover:bg-red-500 hover:text-white transition-colors duration-300" on:click={handleClose}>
-                                ยกเลิก
-                            </button>
-                            <button 
-                                type="submit" 
-                                class="px-4 py-2 text-white font-semibold bg-sucu-pink-01 rounded-sm"
-                                disabled={!documentName || !selectedFile}
-                            >
-                                ยืนยัน
-                            </button>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </dialog>
+						<div class="flex justify-end gap-4 pt-4">
+							<button
+								type="button"
+								class="px-4 py-2 text-sucu-gray-dark font-semibold bg-white rounded-sm border border-sucu-pink-01 hover:bg-red-500 hover:text-white transition-colors duration-300"
+								on:click={handleClose}
+							>
+								ยกเลิก
+							</button>
+							<button
+								type="submit"
+								class="px-4 py-2 text-white font-semibold bg-sucu-pink-01 rounded-sm"
+								disabled={!documentName || !selectedFile}
+							>
+								ยืนยัน
+							</button>
+						</div>
+					</form>
+				</div>
+			</div>
+		</div>
+	</dialog>
 {/if}
 
 <style>
-    dialog::backdrop {
-        display: none;
-    }
-</style> 
\ No newline at end of file
+	dialog::backdrop {
+		display: none;
+	}
+</style>
diff --git a/src/lib/components/Backoffice/Modal/CreateStatisticModal.svelte b/src/lib/components/Backoffice/Modal/CreateStatisticModal.svelte
index 54a753d..a1ee67a 100644
--- a/src/lib/components/Backoffice/Modal/CreateStatisticModal.svelte
+++ b/src/lib/components/Backoffice/Modal/CreateStatisticModal.svelte
@@ -1,163 +1,167 @@
 <script lang="ts">
-    import { faCloudArrowUp } from '@fortawesome/free-solid-svg-icons';
-    import Fa from 'svelte-fa';
-    export let open = false;
-    let dialogEl: HTMLDialogElement;
-  
-    let title = '';
-    let content = '';
-    let coverFile: FileList;
-    let imageFiles: FileList;
-    let documentFiles: FileList;
-  
-    function handleSubmit() {
-        // TODO: Implement create statistic
-        open = false;
-    }
-  
-    function handleClose() {
-        title = '';
-        content = '';
-        open = false;
-    }
-    
-    $: if (open && dialogEl) {
-        dialogEl.showModal();
-    } else if (dialogEl) {
-        dialogEl.close();
-    }
+	import { faCloudArrowUp } from '@fortawesome/free-solid-svg-icons';
+	import Fa from 'svelte-fa';
+	export let open = false;
+	let dialogEl: HTMLDialogElement;
+
+	let title = '';
+	let content = '';
+	let coverFile: FileList;
+	let imageFiles: FileList;
+	let documentFiles: FileList;
+
+	function handleSubmit() {
+		// TODO: Implement create statistic
+		console.log(imageFiles, coverFile, documentFiles);
+		open = false;
+	}
+
+	function handleClose() {
+		title = '';
+		content = '';
+		open = false;
+	}
+
+	$: if (open && dialogEl) {
+		dialogEl.showModal();
+	} else if (dialogEl) {
+		dialogEl.close();
+	}
 </script>
 
 {#if open}
-    <dialog 
-        bind:this={dialogEl}
-        class="bg-transparent p-0"
-        on:close={() => open = false}
-    >
-        <div 
-            role="presentation"
-            class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
-            on:click|self={handleClose}
-            on:keydown|self={(e) => e.key === 'Escape' && handleClose()}
-        >
-            <div class="bg-white w-full max-w-3xl rounded-md shadow-lg overflow-y-auto max-h-[90vh]">
-                <div class="p-6 space-y-6">
-                    <div class="space-y-2">
-                        <h3 class="text-2xl font-bold text-sucu-dark-gray">สร้างเอกสารสถิติ และงบประมาณ</h3>
-                        <p class="text-sucu-gray">ทุกท่านสามารถเพิ่มเอกสารสถิติขึ้นมา และสามารถแก้ไขภายหลังได้</p>
-                    </div>
+	<dialog bind:this={dialogEl} class="bg-transparent p-0" on:close={() => (open = false)}>
+		<div
+			role="presentation"
+			class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
+			on:click|self={handleClose}
+			on:keydown|self={(e) => e.key === 'Escape' && handleClose()}
+		>
+			<div class="bg-white w-full max-w-3xl rounded-md shadow-lg overflow-y-auto max-h-[90vh]">
+				<div class="p-6 space-y-6">
+					<div class="space-y-2">
+						<h3 class="text-2xl font-bold text-sucu-dark-gray">สร้างเอกสารสถิติ และงบประมาณ</h3>
+						<p class="text-sucu-gray">
+							ทุกท่านสามารถเพิ่มเอกสารสถิติขึ้นมา และสามารถแก้ไขภายหลังได้
+						</p>
+					</div>
 
-                    <form on:submit|preventDefault={handleSubmit} class="space-y-6 max-h-[60vh] overflow-y-auto pr-4">
-                        <div class="space-y-2">
-                            <span class="text-sucu-dark-gray">ชื่อประกาศ</span>
-                            <input
-                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
-                                type="text"
-                                bind:value={title}
-                                placeholder="ระบุชื่อประกาศ"
-                                required
-                            />
-                        </div>
+					<form
+						on:submit|preventDefault={handleSubmit}
+						class="space-y-6 max-h-[60vh] overflow-y-auto pr-4"
+					>
+						<div class="space-y-2">
+							<span class="text-sucu-dark-gray">ชื่อประกาศ</span>
+							<input
+								class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
+								type="text"
+								bind:value={title}
+								placeholder="ระบุชื่อประกาศ"
+								required
+							/>
+						</div>
 
-                        <div class="space-y-2">
-                            <span class="text-gray-700">เนื้อหา</span>
-                            <textarea
-                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
-                                bind:value={content}
-                                placeholder="ระบุเนื้อหา"
-                                rows="4"
-                            />
-                        </div>
+						<div class="space-y-2">
+							<span class="text-gray-700">เนื้อหา</span>
+							<textarea
+								class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
+								bind:value={content}
+								placeholder="ระบุเนื้อหา"
+								rows="4"
+							/>
+						</div>
 
-                        <div class="space-y-4">
-                            <div class="space-y-2">
-                                <span class="text-gray-700">เพิ่มรูปปกของหน้าสถิติ และงบประมาณ</span>
-                                <div class="border-2 border-dashed border-gray-300 rounded-md p-6 text-center hover:border-sucu-pink-01 transition-colors cursor-pointer">
-                                    <input
-                                        type="file"
-                                        accept="image/*"
-                                        class="hidden"
-                                        id="coverFile"
-                                        bind:files={coverFile}
-                                    />
-                                    <label for="coverFile" class="cursor-pointer">
-                                        <Fa 
-                                            icon={faCloudArrowUp} 
-                                            class="mx-auto h-12 w-12 text-gray-400"
-                                        />
-                                        <p class="mt-1 text-sm text-gray-600">Click or drag file to upload</p>
-                                        <p class="mt-1 text-xs text-gray-500">ประเภทไฟล์ที่รองรับ: .jpg .jpeg and .png</p>
-                                    </label>
-                                </div>
-                            </div>
+						<div class="space-y-4">
+							<div class="space-y-2">
+								<span class="text-gray-700">เพิ่มรูปปกของหน้าสถิติ และงบประมาณ</span>
+								<div
+									class="border-2 border-dashed border-gray-300 rounded-md p-6 text-center hover:border-sucu-pink-01 transition-colors cursor-pointer"
+								>
+									<input
+										type="file"
+										accept="image/*"
+										class="hidden"
+										id="coverFile"
+										bind:files={coverFile}
+									/>
+									<label for="coverFile" class="cursor-pointer">
+										<Fa icon={faCloudArrowUp} class="mx-auto h-12 w-12 text-gray-400" />
+										<p class="mt-1 text-sm text-gray-600">Click or drag file to upload</p>
+										<p class="mt-1 text-xs text-gray-500">
+											ประเภทไฟล์ที่รองรับ: .jpg .jpeg and .png
+										</p>
+									</label>
+								</div>
+							</div>
 
-                            <div class="space-y-2">
-                                <span class="text-gray-700">เพิ่มรูปปกของหน้าสถิติ และงบประมาณ</span>
-                                <div class="border-2 border-dashed border-gray-300 rounded-md p-6 text-center hover:border-sucu-pink-01 transition-colors cursor-pointer">
-                                    <input
-                                        type="file"
-                                        accept="image/*"
-                                        class="hidden"
-                                        id="coverFile"
-                                        bind:files={coverFile}
-                                    />
-                                    <label for="coverFile" class="cursor-pointer">
-                                        <Fa 
-                                            icon={faCloudArrowUp} 
-                                            class="mx-auto h-12 w-12 text-gray-400"
-                                        />
-                                        <p class="mt-1 text-sm text-gray-600">Click or drag file to upload</p>
-                                        <p class="mt-1 text-xs text-gray-500">ประเภทไฟล์ที่รองรับ: .jpg .jpeg and .png</p>
-                                    </label>
-                                </div>
-                            </div>
+							<div class="space-y-2">
+								<span class="text-gray-700">เพิ่มรูปปกของหน้าสถิติ และงบประมาณ</span>
+								<div
+									class="border-2 border-dashed border-gray-300 rounded-md p-6 text-center hover:border-sucu-pink-01 transition-colors cursor-pointer"
+								>
+									<input
+										type="file"
+										accept="image/*"
+										class="hidden"
+										id="coverFile"
+										bind:files={coverFile}
+									/>
+									<label for="coverFile" class="cursor-pointer">
+										<Fa icon={faCloudArrowUp} class="mx-auto h-12 w-12 text-gray-400" />
+										<p class="mt-1 text-sm text-gray-600">Click or drag file to upload</p>
+										<p class="mt-1 text-xs text-gray-500">
+											ประเภทไฟล์ที่รองรับ: .jpg .jpeg and .png
+										</p>
+									</label>
+								</div>
+							</div>
 
-                            <div class="space-y-2">
-                                <span class="text-gray-700">เพิ่มรูปปกของหน้าสถิติ และงบประมาณ</span>
-                                <div class="border-2 border-dashed border-gray-300 rounded-md p-6 text-center hover:border-sucu-pink-01 transition-colors cursor-pointer">
-                                    <input
-                                        type="file"
-                                        accept="image/*"
-                                        class="hidden"
-                                        id="coverFile"
-                                        bind:files={coverFile}
-                                    />
-                                    <label for="coverFile" class="cursor-pointer">
-                                        <Fa 
-                                            icon={faCloudArrowUp} 
-                                            class="mx-auto h-12 w-12 text-gray-400"
-                                        />
-                                        <p class="mt-1 text-sm text-gray-600">Click or drag file to upload</p>
-                                        <p class="mt-1 text-xs text-gray-500">ประเภทไฟล์ที่รองรับ: .jpg .jpeg and .png</p>
-                                    </label>
-                                </div>
-                            </div>
-                            
-                        </div>
-                    </form>
-                    <div class="flex justify-end gap-4">
-                        <button 
-                            type="button" 
-                            class="px-4 py-2 text-sucu-dark-gray bg-white rounded-sm border border-sucu-pink-01 font-semibold hover:bg-red-500 hover:text-white transition-colors duration-300"
-                            on:click={handleClose}
-                        >
-                            ยกเลิก
-                        </button>
-                        <button 
-                            type="submit" 
-                            class="px-4 py-2 text-white bg-sucu-pink-01 rounded-sm font-semibold"
-                        >
-                            ยืนยัน
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </dialog>
+							<div class="space-y-2">
+								<span class="text-gray-700">เพิ่มรูปปกของหน้าสถิติ และงบประมาณ</span>
+								<div
+									class="border-2 border-dashed border-gray-300 rounded-md p-6 text-center hover:border-sucu-pink-01 transition-colors cursor-pointer"
+								>
+									<input
+										type="file"
+										accept="image/*"
+										class="hidden"
+										id="coverFile"
+										bind:files={coverFile}
+									/>
+									<label for="coverFile" class="cursor-pointer">
+										<Fa icon={faCloudArrowUp} class="mx-auto h-12 w-12 text-gray-400" />
+										<p class="mt-1 text-sm text-gray-600">Click or drag file to upload</p>
+										<p class="mt-1 text-xs text-gray-500">
+											ประเภทไฟล์ที่รองรับ: .jpg .jpeg and .png
+										</p>
+									</label>
+								</div>
+							</div>
+						</div>
+					</form>
+					<div class="flex justify-end gap-4">
+						<button
+							type="button"
+							class="px-4 py-2 text-sucu-dark-gray bg-white rounded-sm border border-sucu-pink-01 font-semibold hover:bg-red-500 hover:text-white transition-colors duration-300"
+							on:click={handleClose}
+						>
+							ยกเลิก
+						</button>
+						<button
+							type="submit"
+							class="px-4 py-2 text-white bg-sucu-pink-01 rounded-sm font-semibold"
+						>
+							ยืนยัน
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</dialog>
 {/if}
 
 <style>
-    dialog::backdrop {
-        display: none;
-    }
+	dialog::backdrop {
+		display: none;
+	}
 </style>
diff --git a/src/lib/components/Backoffice/Modal/EditUserModal.svelte b/src/lib/components/Backoffice/Modal/EditUserModal.svelte
index d97e38c..3d3d41a 100644
--- a/src/lib/components/Backoffice/Modal/EditUserModal.svelte
+++ b/src/lib/components/Backoffice/Modal/EditUserModal.svelte
@@ -1,135 +1,130 @@
 <script lang="ts">
-    export let open = false;
-    let dialogEl: HTMLDialogElement;
-    
-    let firstName = '';
-    let lastName = '';
-    let citizenId = '';
-    let password = '';
-    let showPassword = false;
+	export let open = false;
+	let dialogEl: HTMLDialogElement;
 
-    function handleSubmit() {
-        // TODO: Implement edit user
-        open = false;
-    }
+	let firstName = '';
+	let lastName = '';
+	let citizenId = '';
+	let password = '';
 
-    function handleClose() {
-        firstName = '';
-        lastName = '';
-        citizenId = '';
-        password = '';
-        open = false;
-    }
+	function handleSubmit() {
+		// TODO: Implement edit user
+		open = false;
+	}
 
-    function handleEscape(e: KeyboardEvent) {
-        if (e.key === 'Escape') {
-            handleClose();
-        }
-    }
+	function handleClose() {
+		firstName = '';
+		lastName = '';
+		citizenId = '';
+		password = '';
+		open = false;
+	}
 
-    $: if (open && dialogEl) {
-        dialogEl.showModal();
-    } else if (dialogEl) {
-        dialogEl.close();
-    }
+	function handleEscape(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			handleClose();
+		}
+	}
+
+	$: if (open && dialogEl) {
+		dialogEl.showModal();
+	} else if (dialogEl) {
+		dialogEl.close();
+	}
 </script>
 
 {#if open}
-    <dialog 
-        bind:this={dialogEl}
-        class="bg-transparent p-0"
-        on:close={() => open = false}
-    >
-        <div 
-            role="presentation"
-            class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
-            on:click|self={handleClose}
-            on:keydown|self={handleEscape}
-        >
-            <div class="bg-white w-full max-w-md rounded-md shadow-lg">
-                <div class="p-6 space-y-6">
-                    <div class="space-y-2">
-                        <h3 id="modal-title" class="text-2xl font-bold text-sucu-dark-gray">แก้ไขผู้ใช้งาน</h3>
-                        <p class="text-sucu-gray">สามารถแก้ไขได้ทั้งจากทางคอลเซ็นเตอร์</p>
-                    </div>
+	<dialog bind:this={dialogEl} class="bg-transparent p-0" on:close={() => (open = false)}>
+		<div
+			role="presentation"
+			class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
+			on:click|self={handleClose}
+			on:keydown|self={handleEscape}
+		>
+			<div class="bg-white w-full max-w-md rounded-md shadow-lg">
+				<div class="p-6 space-y-6">
+					<div class="space-y-2">
+						<h3 id="modal-title" class="text-2xl font-bold text-sucu-dark-gray">แก้ไขผู้ใช้งาน</h3>
+						<p class="text-sucu-gray">สามารถแก้ไขได้ทั้งจากทางคอลเซ็นเตอร์</p>
+					</div>
 
-                    <form on:submit|preventDefault={handleSubmit} class="space-y-4">
-                        <div class="grid grid-cols-2 gap-4">
-                            <!-- First Name -->
-                            <div class="space-y-1">
-                                <label for="firstName" class="text-sm text-gray-700">ชื่อ</label>
-                                <input
-                                    id="firstName"
-                                    type="text"
-                                    bind:value={firstName}
-                                    placeholder="หมูเด้ง"
-                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
-                                />
-                            </div>
+					<form on:submit|preventDefault={handleSubmit} class="space-y-4">
+						<div class="grid grid-cols-2 gap-4">
+							<!-- First Name -->
+							<div class="space-y-1">
+								<label for="firstName" class="text-sm text-gray-700">ชื่อ</label>
+								<input
+									id="firstName"
+									type="text"
+									bind:value={firstName}
+									placeholder="หมูเด้ง"
+									class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
+								/>
+							</div>
 
-                            <!-- Last Name -->
-                            <div class="space-y-1">
-                                <label for="lastName" class="text-sm text-gray-700">นามสกุล</label>
-                                <input
-                                    id="lastName"
-                                    type="text"
-                                    bind:value={lastName}
-                                    placeholder="เด้งเด้ง"
-                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
-                                />
-                            </div>
-                        </div>
+							<!-- Last Name -->
+							<div class="space-y-1">
+								<label for="lastName" class="text-sm text-gray-700">นามสกุล</label>
+								<input
+									id="lastName"
+									type="text"
+									bind:value={lastName}
+									placeholder="เด้งเด้ง"
+									class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
+								/>
+							</div>
+						</div>
 
-                        <!-- Student ID -->
-                        <div class="space-y-1">
-                            <label for="citizenId" class="text-sm text-gray-700">รหัสประจำตัวนิสิต</label>
-                            <input
-                                id="citizenId"
-                                type="text"
-                                bind:value={citizenId}
-                                placeholder="6753736328"
-                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
-                            />
-                        </div>
+						<!-- Student ID -->
+						<div class="space-y-1">
+							<label for="citizenId" class="text-sm text-gray-700">รหัสประจำตัวนิสิต</label>
+							<input
+								id="citizenId"
+								type="text"
+								bind:value={citizenId}
+								placeholder="6753736328"
+								class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
+							/>
+						</div>
 
-                        <!-- Password -->
-                        <div class="space-y-1">
-                            <label for="password" class="text-sm text-gray-700">รหัสผ่าน</label>
-                            <div class="relative">
-                                <input
-                                    id="password"
-                                    type="text"
-                                    bind:value={password}
-                                    placeholder="1234567890"
-                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none pr-10"
-                                />
-                            </div>
-                        </div>
+						<!-- Password -->
+						<div class="space-y-1">
+							<label for="password" class="text-sm text-gray-700">รหัสผ่าน</label>
+							<div class="relative">
+								<input
+									id="password"
+									type="text"
+									bind:value={password}
+									placeholder="1234567890"
+									class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none pr-10"
+								/>
+							</div>
+						</div>
 
-                        <div class="flex justify-end gap-4 pt-4">
-                            <button 
-                                type="button" 
-                                class="px-4 py-2 text-sucu-gray-dark font-semibold bg-white rounded-sm border border-sucu-pink-01 hover:bg-red-500 hover:text-white transition-colors duration-300"
-                                on:click={handleClose}
-                            >
-                                ยกเลิก
-                            </button>
-                            <button 
-                                type="submit" 
-                                class="px-4 py-2 text-white font-semibold bg-sucu-pink-01 rounded-sm"
-                            >
-                                ยืนยัน
-                            </button>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </dialog>
+						<div class="flex justify-end gap-4 pt-4">
+							<button
+								type="button"
+								class="px-4 py-2 text-sucu-gray-dark font-semibold bg-white rounded-sm border border-sucu-pink-01 hover:bg-red-500 hover:text-white transition-colors duration-300"
+								on:click={handleClose}
+							>
+								ยกเลิก
+							</button>
+							<button
+								type="submit"
+								class="px-4 py-2 text-white font-semibold bg-sucu-pink-01 rounded-sm"
+							>
+								ยืนยัน
+							</button>
+						</div>
+					</form>
+				</div>
+			</div>
+		</div>
+	</dialog>
 {/if}
 
 <style>
-    dialog::backdrop {
-        display: none;
-    }
-</style> 
\ No newline at end of file
+	dialog::backdrop {
+		display: none;
+	}
+</style>
diff --git a/src/lib/components/Backoffice/Modal/FileRankingModal.svelte b/src/lib/components/Backoffice/Modal/FileRankingModal.svelte
index 4c4f415..2e6e79c 100644
--- a/src/lib/components/Backoffice/Modal/FileRankingModal.svelte
+++ b/src/lib/components/Backoffice/Modal/FileRankingModal.svelte
@@ -1,278 +1,298 @@
 <script lang="ts">
-    import { faCloudArrowUp, faXmark } from '@fortawesome/free-solid-svg-icons';
-    import Fa from 'svelte-fa';
+	import { faCloudArrowUp, faXmark } from '@fortawesome/free-solid-svg-icons';
+	import Fa from 'svelte-fa';
 
-    export let open = false;
-    export let variant: 'announcement' | 'statistic' = 'announcement';
+	export let open = false;
+	export let variant: 'announcement' | 'statistic' = 'announcement';
 
-    
-    let dialogEl: HTMLDialogElement;
-    
-    let title = '';
-    let content = '';
-    let coverFiles: File[] = [];
-    let contentFiles: File[] = [];
-    let documentFiles: File[] = [];
-    let mainCoverIndex = 0;
-    let dragOver = {
-        cover: false,
-        content: false,
-        document: false
-    };
+	let dialogEl: HTMLDialogElement;
 
-    let coverFileInput: HTMLInputElement;
-    let documentFileInput: HTMLInputElement;
+	let title = '';
+	let content = '';
+	let coverFiles: File[] = [];
+	let contentFiles: File[] = [];
+	let documentFiles: File[] = [];
+	let mainCoverIndex = 0;
+	let dragOver = {
+		cover: false,
+		content: false,
+		document: false
+	};
 
-    function handleSubmit() {
-        // TODO: Implement create logic
-        console.log('Create announcement'); 
-    }
+	let coverFileInput: HTMLInputElement;
+	let documentFileInput: HTMLInputElement;
 
-    function handleClose() {
-        title = '';
-        content = '';
-        coverFiles = [];
-        contentFiles = [];
-        documentFiles = [];
-        mainCoverIndex = 0;
-        open = false;
-    }
+	function handleSubmit() {
+		// TODO: Implement create logic
+		console.log('Create announcement');
+	}
 
-    function handleFileDrop(type: 'cover' | 'content' | 'document', e: DragEvent) {
-        e.preventDefault();
-        dragOver[type] = false;
-        const files = e.dataTransfer?.files;
-        if (files) {
-            if (type === 'cover') {
-                coverFiles = [...coverFiles, ...Array.from(files)];
-            } else if (type === 'content') {
-                contentFiles = [...contentFiles, ...Array.from(files)];
-            } else {
-                documentFiles = [...documentFiles, ...Array.from(files)];
-            }
-        }
-    }
+	function handleClose() {
+		title = '';
+		content = '';
+		coverFiles = [];
+		contentFiles = [];
+		documentFiles = [];
+		mainCoverIndex = 0;
+		open = false;
+	}
 
-    function handleFileSelect(type: 'cover' | 'document', e: Event) {
-        const input = e.target as HTMLInputElement;
-        if (input.files) {
-            if (type === 'cover') {
-                coverFiles = [...coverFiles, ...Array.from(input.files)];
-            } else {
-                documentFiles = [...documentFiles, ...Array.from(input.files)];
-            }
-        }
-    }
+	function handleFileDrop(type: 'cover' | 'content' | 'document', e: DragEvent) {
+		e.preventDefault();
+		dragOver[type] = false;
+		const files = e.dataTransfer?.files;
+		if (files) {
+			if (type === 'cover') {
+				coverFiles = [...coverFiles, ...Array.from(files)];
+			} else if (type === 'content') {
+				contentFiles = [...contentFiles, ...Array.from(files)];
+			} else {
+				documentFiles = [...documentFiles, ...Array.from(files)];
+			}
+		}
+	}
 
-    function removeFile(type: 'cover' | 'content' | 'document', index: number) {
-        if (type === 'cover') {
-            coverFiles = coverFiles.filter((_, i) => i !== index);
-            if (mainCoverIndex >= coverFiles.length) {
-                mainCoverIndex = 0;
-            }
-        } else if (type === 'content') {
-            contentFiles = contentFiles.filter((_, i) => i !== index);
-        } else {
-            documentFiles = documentFiles.filter((_, i) => i !== index);
-        }
-    }
+	function handleFileSelect(type: 'cover' | 'document', e: Event) {
+		const input = e.target as HTMLInputElement;
+		if (input.files) {
+			if (type === 'cover') {
+				coverFiles = [...coverFiles, ...Array.from(input.files)];
+			} else {
+				documentFiles = [...documentFiles, ...Array.from(input.files)];
+			}
+		}
+	}
 
-    $: if (open && dialogEl) {
-        dialogEl.showModal();
-    } else if (dialogEl) {
-        dialogEl.close();
-    }
+	function removeFile(type: 'cover' | 'content' | 'document', index: number) {
+		if (type === 'cover') {
+			coverFiles = coverFiles.filter((_, i) => i !== index);
+			if (mainCoverIndex >= coverFiles.length) {
+				mainCoverIndex = 0;
+			}
+		} else if (type === 'content') {
+			contentFiles = contentFiles.filter((_, i) => i !== index);
+		} else {
+			documentFiles = documentFiles.filter((_, i) => i !== index);
+		}
+	}
+
+	$: if (open && dialogEl) {
+		dialogEl.showModal();
+	} else if (dialogEl) {
+		dialogEl.close();
+	}
 </script>
 
 {#if open}
-    <dialog 
-        bind:this={dialogEl}
-        class="bg-transparent w-full max-h-[90vh] overflow-hidden"
-        on:close={() => open = false}
-    >
-        <div 
-            role="presentation"
-            class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
-            on:click|self={handleClose}
-            on:keydown|self={(e) => e.key === 'Escape' && handleClose()}
-        >
-            <div class="bg-white w-full max-w-3xl rounded-md shadow-lg max-h-[85vh] flex flex-col">
-                <div class="p-6 border-b">
-                    <h3 class="text-2xl font-bold text-sucu-gray-dark">แก้ไขเนื้อหา</h3>
-                    <p class="text-sucu-gray">หากทำการยืนยันเอกสารจะถูกแก้ไข และไม่สามารถย้อนกลับได้</p>
-                </div>
+	<dialog
+		bind:this={dialogEl}
+		class="bg-transparent w-full max-h-[90vh] overflow-hidden"
+		on:close={() => (open = false)}
+	>
+		<div
+			role="presentation"
+			class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
+			on:click|self={handleClose}
+			on:keydown|self={(e) => e.key === 'Escape' && handleClose()}
+		>
+			<div class="bg-white w-full max-w-3xl rounded-md shadow-lg max-h-[85vh] flex flex-col">
+				<div class="p-6 border-b">
+					<h3 class="text-2xl font-bold text-sucu-gray-dark">แก้ไขเนื้อหา</h3>
+					<p class="text-sucu-gray">หากทำการยืนยันเอกสารจะถูกแก้ไข และไม่สามารถย้อนกลับได้</p>
+				</div>
 
-                <div class="p-6 overflow-y-auto flex-1">
-                    <form on:submit|preventDefault={handleSubmit} class="space-y-6">
-                        <!-- Title -->
-                        <div class="space-y-1">
-                            <span class="text-sm text-sucu-dark-gray font-semibold">{variant === 'announcement' ? 'ชื่อประกาศ' : 'ชื่อสถิติ'}</span>
-                            <input
-                                type="text"
-                                bind:value={title}
-                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
-                                required
-                            />
-                        </div>
+				<div class="p-6 overflow-y-auto flex-1">
+					<form on:submit|preventDefault={handleSubmit} class="space-y-6">
+						<!-- Title -->
+						<div class="space-y-1">
+							<span class="text-sm text-sucu-dark-gray font-semibold"
+								>{variant === 'announcement' ? 'ชื่อประกาศ' : 'ชื่อสถิติ'}</span
+							>
+							<input
+								type="text"
+								bind:value={title}
+								class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
+								required
+							/>
+						</div>
 
-                        <!-- Content -->
-                        <div class="space-y-1">
-                            <span class="text-sm text-sucu-dark-gray font-semibold">เนื้อหา</span>
-                            <textarea
-                                bind:value={content}
-                                rows="4"
-                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
-                            />
-                        </div>
+						<!-- Content -->
+						<div class="space-y-1">
+							<span class="text-sm text-sucu-dark-gray font-semibold">เนื้อหา</span>
+							<textarea
+								bind:value={content}
+								rows="4"
+								class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
+							/>
+						</div>
 
-                        <!-- Cover Images Section -->
-                        <div class="grid grid-cols-2 gap-4">
-                            <div>
-                                <span class="text-xl text-sucu-dark-gray font-semibold">{variant === 'announcement' ? 'เพิ่มรูปภาพของหน้าประกาศ' : 'เพิ่มรูปปกหน้าสถิติและงบประมาณ'}</span>
-                                <input
-                                    type="file"
-                                    bind:this={coverFileInput}
-                                    accept="image/jpeg,image/png"
-                                    class="hidden"
-                                    multiple
-                                    on:change={(e) => handleFileSelect('cover', e)}
-                                />
-                                <div 
-                                    role="presentation"
-                                    class="mt-1 border-2 border-dashed rounded-md p-6 text-center transition-colors cursor-pointer"
-                                    class:border-blue-500={dragOver.cover}
-                                    class:border-gray-300={!dragOver.cover}
-                                    on:dragenter|preventDefault={() => dragOver.cover = true}
-                                    on:dragleave|preventDefault={() => dragOver.cover = false}
-                                    on:dragover|preventDefault
-                                    on:drop|preventDefault={(e) => handleFileDrop('cover', e)}
-                                    on:click={() => coverFileInput.click()}
-                                >
-                                    <Fa icon={faCloudArrowUp} class="mx-auto h-12 w-12 text-gray-400" />
-                                    <p class="mt-1 text-sm text-gray-600">Click or drag file to this area to upload</p>
-                                    <p class="mt-1 text-xs text-gray-500">ประเภทไฟล์ที่รองรับ: .jpg .jpeg and .png</p>
-                                </div>
-                            </div>
-                            <div class="space-y-2 max-h-40 overflow-y-auto">
-                                {#each coverFiles as file, i}
-                                    <div class="flex items-center justify-between p-2 bg-gray-50 rounded-md">
-                                        <div class="flex items-center gap-2">
-                                            <span class="flex items-center gap-2">
-                                                <span class="text-sm font-medium text-gray-600">{i + 1}</span>
-                                                <span class="text-sm text-gray-600">{file.name}</span>
-                                            </span>
-                                            {#if i === mainCoverIndex}
-                                                <span class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded">Main</span>
-                                            {/if}
-                                        </div>
-                                        <button 
-                                            type="button"
-                                            class="text-gray-400 hover:text-gray-600"
-                                            on:click={() => removeFile('cover', i)}
-                                        >
-                                            <Fa icon={faXmark} class="w-5 h-5" />
-                                        </button>
-                                    </div>
-                                {/each}
-                            </div>
-                        </div>
-                        <!-- Image Ranking Section -->
-                        <div class="bg-sucu-pink-04 p-4">
-                            <div class="space-y-2 flex flex-col">
-                                <span class="text-md text-sucu-dark-gray font-semibold">เลือกรูปที่จะถูกตั้งเป็นรูปแรก</span>
-                                <span class="text-sm text-sucu-gray">ลำดับของรูปภาพจะถูกเรียงตามเวลาที่อัปโหลด สามารถเลือกรูปภาพตามลำดับที่เพื่อตั้งให้อยู่เป็นอันดับแรก</span>
-                                <select 
-                                    bind:value={mainCoverIndex}
-                                    class="w-1/3 px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
-                                >
-                                    {#each coverFiles as _, i}
-                                        <option value={i}>รูปที่ {i + 1}</option>
-                                    {/each}
-                                </select>
-                            </div>
-                        </div>
+						<!-- Cover Images Section -->
+						<div class="grid grid-cols-2 gap-4">
+							<div>
+								<span class="text-xl text-sucu-dark-gray font-semibold"
+									>{variant === 'announcement'
+										? 'เพิ่มรูปภาพของหน้าประกาศ'
+										: 'เพิ่มรูปปกหน้าสถิติและงบประมาณ'}</span
+								>
+								<input
+									type="file"
+									bind:this={coverFileInput}
+									accept="image/jpeg,image/png"
+									class="hidden"
+									multiple
+									on:change={(e) => handleFileSelect('cover', e)}
+								/>
+								<div
+									role="presentation"
+									class="mt-1 border-2 border-dashed rounded-md p-6 text-center transition-colors cursor-pointer"
+									class:border-blue-500={dragOver.cover}
+									class:border-gray-300={!dragOver.cover}
+									on:dragenter|preventDefault={() => (dragOver.cover = true)}
+									on:dragleave|preventDefault={() => (dragOver.cover = false)}
+									on:dragover|preventDefault
+									on:drop|preventDefault={(e) => handleFileDrop('cover', e)}
+									on:click={() => coverFileInput.click()}
+								>
+									<Fa icon={faCloudArrowUp} class="mx-auto h-12 w-12 text-gray-400" />
+									<p class="mt-1 text-sm text-gray-600">
+										Click or drag file to this area to upload
+									</p>
+									<p class="mt-1 text-xs text-gray-500">ประเภทไฟล์ที่รองรับ: .jpg .jpeg and .png</p>
+								</div>
+							</div>
+							<div class="space-y-2 max-h-40 overflow-y-auto">
+								{#each coverFiles as file, i}
+									<div class="flex items-center justify-between p-2 bg-gray-50 rounded-md">
+										<div class="flex items-center gap-2">
+											<span class="flex items-center gap-2">
+												<span class="text-sm font-medium text-gray-600">{i + 1}</span>
+												<span class="text-sm text-gray-600">{file.name}</span>
+											</span>
+											{#if i === mainCoverIndex}
+												<span class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded"
+													>Main</span
+												>
+											{/if}
+										</div>
+										<button
+											type="button"
+											class="text-gray-400 hover:text-gray-600"
+											on:click={() => removeFile('cover', i)}
+										>
+											<Fa icon={faXmark} class="w-5 h-5" />
+										</button>
+									</div>
+								{/each}
+							</div>
+						</div>
+						<!-- Image Ranking Section -->
+						<div class="bg-sucu-pink-04 p-4">
+							<div class="space-y-2 flex flex-col">
+								<span class="text-md text-sucu-dark-gray font-semibold"
+									>เลือกรูปที่จะถูกตั้งเป็นรูปแรก</span
+								>
+								<span class="text-sm text-sucu-gray"
+									>ลำดับของรูปภาพจะถูกเรียงตามเวลาที่อัปโหลด
+									สามารถเลือกรูปภาพตามลำดับที่เพื่อตั้งให้อยู่เป็นอันดับแรก</span
+								>
+								<select
+									bind:value={mainCoverIndex}
+									class="w-1/3 px-3 py-2 border border-gray-300 rounded-md focus:outline-none"
+								>
+									{#each coverFiles as _, i}
+										<option value={i}>รูปที่ {i + 1}</option>
+									{/each}
+								</select>
+							</div>
+						</div>
 
-                        <!-- Documents Section -->
-                        <div class="grid grid-cols-2 gap-4">
-                            <div>
-                                <span class="text-sm text-sucu-dark-gray font-semibold text-xl">{variant === 'announcement' ? 'เพิ่มเอกสารในหน้าประกาศ' : 'เพิ่มเอกสารในหน้าสถิติและงบประมาณ'}</span>
-                                <input
-                                    type="file"
-                                    bind:this={documentFileInput}
-                                    accept=".pdf,.doc,.docx"
-                                    class="hidden"
-                                    multiple
-                                    on:change={(e) => handleFileSelect('document', e)}
-                                />
-                                <div 
-                                    role="presentation"
-                                    class="mt-1 border-2 border-dashed rounded-md p-6 text-center transition-colors cursor-pointer"
-                                    class:border-blue-500={dragOver.document}
-                                    class:border-gray-300={!dragOver.document}
-                                    on:dragenter|preventDefault={() => dragOver.document = true}
-                                    on:dragleave|preventDefault={() => dragOver.document = false}
-                                    on:dragover|preventDefault
-                                    on:drop|preventDefault={(e) => handleFileDrop('document', e)}
-                                    on:click={() => documentFileInput.click()}
-                                >
-                                    <Fa icon={faCloudArrowUp} class="mx-auto h-12 w-12 text-gray-400" />
-                                    <p class="mt-1 text-sm text-gray-600">Click or drag file to this area to upload</p>
-                                    <p class="mt-1 text-xs text-gray-500">ประเภทไฟล์ที่รองรับ: .pdf .doc .docx</p>
-                                </div>
-                            </div>
+						<!-- Documents Section -->
+						<div class="grid grid-cols-2 gap-4">
+							<div>
+								<span class="text-sm text-sucu-dark-gray font-semibold text-xl"
+									>{variant === 'announcement'
+										? 'เพิ่มเอกสารในหน้าประกาศ'
+										: 'เพิ่มเอกสารในหน้าสถิติและงบประมาณ'}</span
+								>
+								<input
+									type="file"
+									bind:this={documentFileInput}
+									accept=".pdf,.doc,.docx"
+									class="hidden"
+									multiple
+									on:change={(e) => handleFileSelect('document', e)}
+								/>
+								<div
+									role="presentation"
+									class="mt-1 border-2 border-dashed rounded-md p-6 text-center transition-colors cursor-pointer"
+									class:border-blue-500={dragOver.document}
+									class:border-gray-300={!dragOver.document}
+									on:dragenter|preventDefault={() => (dragOver.document = true)}
+									on:dragleave|preventDefault={() => (dragOver.document = false)}
+									on:dragover|preventDefault
+									on:drop|preventDefault={(e) => handleFileDrop('document', e)}
+									on:click={() => documentFileInput.click()}
+								>
+									<Fa icon={faCloudArrowUp} class="mx-auto h-12 w-12 text-gray-400" />
+									<p class="mt-1 text-sm text-gray-600">
+										Click or drag file to this area to upload
+									</p>
+									<p class="mt-1 text-xs text-gray-500">ประเภทไฟล์ที่รองรับ: .pdf .doc .docx</p>
+								</div>
+							</div>
 
-                            <div class="space-y-2">
-                                <div class="space-y-2 max-h-40 overflow-y-auto">
-                                    {#each documentFiles as file, i}
-                                        <div class="flex items-center justify-between p-2 bg-gray-50 rounded-md">
-                                            <span class="text-sm text-gray-600">{file.name}</span>
-                                            <button 
-                                                type="button"
-                                                class="text-gray-400 hover:text-gray-600"
-                                                on:click={() => removeFile('document', i)}
-                                            >
-                                                <Fa icon={faXmark} class="w-5 h-5" />
-                                            </button>
-                                        </div>
-                                    {/each}
-                                </div>
-                            </div>
-                        </div>
-                    </form>
-                </div>
+							<div class="space-y-2">
+								<div class="space-y-2 max-h-40 overflow-y-auto">
+									{#each documentFiles as file, i}
+										<div class="flex items-center justify-between p-2 bg-gray-50 rounded-md">
+											<span class="text-sm text-gray-600">{file.name}</span>
+											<button
+												type="button"
+												class="text-gray-400 hover:text-gray-600"
+												on:click={() => removeFile('document', i)}
+											>
+												<Fa icon={faXmark} class="w-5 h-5" />
+											</button>
+										</div>
+									{/each}
+								</div>
+							</div>
+						</div>
+					</form>
+				</div>
 
-                <!-- Footer -->
-                <div class="p-6 border-t">
-                    <div class="flex justify-end gap-4">
-                        <button 
-                            type="button" 
-                            class="px-4 py-2 text-sucu-gray-dark font-semibold bg-white rounded-sm border border-sucu-pink-01 hover:bg-red-500 hover:text-white transition-colors duration-300"
-                            on:click={handleClose}
-                        >
-                            ยกเลิก
-                        </button>
-                        <button 
-                            type="submit" 
-                            class="px-4 py-2 text-white font-semibold bg-sucu-pink-01 rounded-sm"
-                            disabled={!title}
-                            on:click={handleSubmit}
-                        >
-                            ยืนยัน
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </dialog>
+				<!-- Footer -->
+				<div class="p-6 border-t">
+					<div class="flex justify-end gap-4">
+						<button
+							type="button"
+							class="px-4 py-2 text-sucu-gray-dark font-semibold bg-white rounded-sm border border-sucu-pink-01 hover:bg-red-500 hover:text-white transition-colors duration-300"
+							on:click={handleClose}
+						>
+							ยกเลิก
+						</button>
+						<button
+							type="submit"
+							class="px-4 py-2 text-white font-semibold bg-sucu-pink-01 rounded-sm"
+							disabled={!title}
+							on:click={handleSubmit}
+						>
+							ยืนยัน
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</dialog>
 {/if}
 
 <style>
-    dialog {
-        max-height: 100vh;
-        max-width: 100vw;
-    }
-    
-    dialog::backdrop {
-        display: none;
-    }
-</style> 
\ No newline at end of file
+	dialog {
+		max-height: 100vh;
+		max-width: 100vw;
+	}
+
+	dialog::backdrop {
+		display: none;
+	}
+</style>
diff --git a/src/lib/components/BackofficePlayground.svelte b/src/lib/components/BackofficePlayground.svelte
index 0f4cacc..466c854 100644
--- a/src/lib/components/BackofficePlayground.svelte
+++ b/src/lib/components/BackofficePlayground.svelte
@@ -1,98 +1,98 @@
 <script lang="ts">
-    import ChangePasswordModal from './Backoffice/Modal/ChangePasswordModal.svelte';
-    import ConfirmationModal from './Backoffice/Modal/ConfirmationModal.svelte';
-    import CreateDocumentModal from './Backoffice/Modal/CreateDocumentModal.svelte';
-    import CreateStatisticModal from './Backoffice/Modal/CreateStatisticModal.svelte';
-    import EditUserModal from './Backoffice/Modal/EditUserModal.svelte';
-    import FileRankingModal from './Backoffice/Modal/FileRankingModal.svelte';
+	import ChangePasswordModal from './Backoffice/Modal/ChangePasswordModal.svelte';
+	import ConfirmationModal from './Backoffice/Modal/ConfirmationModal.svelte';
+	import CreateDocumentModal from './Backoffice/Modal/CreateDocumentModal.svelte';
+	import CreateStatisticModal from './Backoffice/Modal/CreateStatisticModal.svelte';
+	import EditUserModal from './Backoffice/Modal/EditUserModal.svelte';
+	import FileRankingModal from './Backoffice/Modal/FileRankingModal.svelte';
 
-    let changePasswordModalOpen = false;
-    let confirmationModalOpen = false;
-    let createAnnouncementModalOpen = false;
-    let createDocumentModalOpen = false;
-    let editUserModalOpen = false;
-    let StatisticModalOpen = false;
+	let changePasswordModalOpen = false;
+	let confirmationModalOpen = false;
+	let createAnnouncementModalOpen = false;
+	let createDocumentModalOpen = false;
+	let editUserModalOpen = false;
+	let StatisticModalOpen = false;
 
-    function showConfirmationModal() {
-        confirmationModalOpen = true;
-    }
+	function showConfirmationModal() {
+		confirmationModalOpen = true;
+	}
 
-    function handleConfirm() {
-        console.log('Confirmed');
-        confirmationModalOpen = false;
-    }
+	function handleConfirm() {
+		console.log('Confirmed');
+		confirmationModalOpen = false;
+	}
 
-    function handleCancel() {
-        console.log('Cancelled');
-        confirmationModalOpen = false;
-    }
+	function handleCancel() {
+		console.log('Cancelled');
+		confirmationModalOpen = false;
+	}
 
-    function showEditUserModal() {
-        editUserModalOpen = true;
-    }
+	function showEditUserModal() {
+		editUserModalOpen = true;
+	}
 </script>
 
 <main class="h-screen p-8">
-    <section>
-        <h2 class="font-bold text-2xl mb-6">Backoffice modal</h2>
-        
-        <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8">
-            <button
-                class="px-4 py-2 bg-rose-500 text-white rounded-lg hover:bg-rose-600 transition-colors"
-                on:click={showConfirmationModal}
-            >
-                Open Confirmation Modal
-            </button>
+	<section>
+		<h2 class="font-bold text-2xl mb-6">Backoffice modal</h2>
 
-            <button
-                class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
-                on:click={() => StatisticModalOpen = true}
-            >
-                เปิดฟอร์มสถิติ
-            </button>
+		<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8">
+			<button
+				class="px-4 py-2 bg-rose-500 text-white rounded-lg hover:bg-rose-600 transition-colors"
+				on:click={showConfirmationModal}
+			>
+				Open Confirmation Modal
+			</button>
 
-            <button
-                class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
-                on:click={showEditUserModal}
-            >
-                แก้ไขผู้ใช้งาน
-            </button>
+			<button
+				class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+				on:click={() => (StatisticModalOpen = true)}
+			>
+				เปิดฟอร์มสถิติ
+			</button>
 
-            <button
-                class="px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors"
-                on:click={() => changePasswordModalOpen = true}
-            >
-                เปลี่ยนรหัสผ่าน
-            </button>
+			<button
+				class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
+				on:click={showEditUserModal}
+			>
+				แก้ไขผู้ใช้งาน
+			</button>
 
-            <button
-                class="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors" 
-                on:click={() => createDocumentModalOpen = true}
-            >
-                สร้างเอกสาร
-            </button>
+			<button
+				class="px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors"
+				on:click={() => (changePasswordModalOpen = true)}
+			>
+				เปลี่ยนรหัสผ่าน
+			</button>
 
-            <button
-                class="px-4 py-2 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition-colors"
-                on:click={() => createAnnouncementModalOpen = true}
-            >
-                สร้างประกาศ
-            </button>
-        </div>
+			<button
+				class="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors"
+				on:click={() => (createDocumentModalOpen = true)}
+			>
+				สร้างเอกสาร
+			</button>
 
-        <ConfirmationModal 
-            bind:isOpen={confirmationModalOpen} 
-            title="ยืนยันการลบเอกสาร" 
-            body="หากทำการยืนยันเอกสารที่เลือกจะถูกลบและไม่สามารถย้อนกลับได้" 
-            confirmText="ยืนยัน" 
-            cancelText="ยกเลิก" 
-            onConfirm={handleConfirm} 
-            onCancel={handleCancel}
-        />
-        <CreateStatisticModal bind:open={StatisticModalOpen} />
-        <EditUserModal bind:open={editUserModalOpen} />
-        <ChangePasswordModal bind:open={changePasswordModalOpen} />
-        <CreateDocumentModal bind:isOpen={createDocumentModalOpen} />
-        <FileRankingModal bind:open={createAnnouncementModalOpen} variant="announcement" />
-    </section>
+			<button
+				class="px-4 py-2 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition-colors"
+				on:click={() => (createAnnouncementModalOpen = true)}
+			>
+				สร้างประกาศ
+			</button>
+		</div>
+
+		<ConfirmationModal
+			bind:isOpen={confirmationModalOpen}
+			title="ยืนยันการลบเอกสาร"
+			body="หากทำการยืนยันเอกสารที่เลือกจะถูกลบและไม่สามารถย้อนกลับได้"
+			confirmText="ยืนยัน"
+			cancelText="ยกเลิก"
+			onConfirm={handleConfirm}
+			onCancel={handleCancel}
+		/>
+		<CreateStatisticModal bind:open={StatisticModalOpen} />
+		<EditUserModal bind:open={editUserModalOpen} />
+		<ChangePasswordModal bind:open={changePasswordModalOpen} />
+		<CreateDocumentModal bind:isOpen={createDocumentModalOpen} />
+		<FileRankingModal bind:open={createAnnouncementModalOpen} variant="announcement" />
+	</section>
 </main>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 34c603c..f5913c1 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,7 +2,6 @@
 	import '../styles/app.css';
 	import Footer from '$lib/components/Footer/Footer.svelte';
 	import Navbar from '$lib/components/Navbar.svelte';
-
 </script>
 
 <div>