diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index f9dca550..a91f3e8b 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,9 +1,9 @@
 ---
 name: Bug Report
 about: Create a report to help us improve
-title: '[BUG] '
-labels: ['bug', 'needs-triage']
-assignees: ''
+title: "[BUG] "
+labels: ["bug", "needs-triage"]
+assignees: ""
 ---
 
 # Bug Report
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
index b3585ba3..8982830c 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -1,9 +1,9 @@
 ---
 name: Feature Request
 about: Suggest an idea for this project
-title: '[FEATURE] '
-labels: ['enhancement', 'needs-discussion']
-assignees: ''
+title: "[FEATURE] "
+labels: ["enhancement", "needs-discussion"]
+assignees: ""
 ---
 
 # Feature Request
diff --git a/.github/prompts/analyze.prompt.md b/.github/prompts/analyze.prompt.md
index f4c1a7bd..584177af 100644
--- a/.github/prompts/analyze.prompt.md
+++ b/.github/prompts/analyze.prompt.md
@@ -20,7 +20,7 @@ Execution steps:
    - SPEC = FEATURE_DIR/spec.md
    - PLAN = FEATURE_DIR/plan.md
    - TASKS = FEATURE_DIR/tasks.md
-   Abort with an error message if any required file is missing (instruct the user to run missing prerequisite command).
+     Abort with an error message if any required file is missing (instruct the user to run missing prerequisite command).
 
 2. Load artifacts:
    - Parse spec.md sections: Overview/Context, Functional Requirements, Non-Functional Requirements, User Stories, Edge Cases (if present).
@@ -36,26 +36,26 @@ Execution steps:
 
 4. Detection passes:
    A. Duplication detection:
-      - Identify near-duplicate requirements. Mark lower-quality phrasing for consolidation.
-   B. Ambiguity detection:
-      - Flag vague adjectives (fast, scalable, secure, intuitive, robust) lacking measurable criteria.
-      - Flag unresolved placeholders (TODO, TKTK, ???, <placeholder>, etc.).
-   C. Underspecification:
-      - Requirements with verbs but missing object or measurable outcome.
-      - User stories missing acceptance criteria alignment.
-      - Tasks referencing files or components not defined in spec/plan.
-   D. Constitution alignment:
-      - Any requirement or plan element conflicting with a MUST principle.
-      - Missing mandated sections or quality gates from constitution.
-   E. Coverage gaps:
-      - Requirements with zero associated tasks.
-      - Tasks with no mapped requirement/story.
-      - Non-functional requirements not reflected in tasks (e.g., performance, security).
-   F. Inconsistency:
-      - Terminology drift (same concept named differently across files).
-      - Data entities referenced in plan but absent in spec (or vice versa).
-      - Task ordering contradictions (e.g., integration tasks before foundational setup tasks without dependency note).
-      - Conflicting requirements (e.g., one requires to use Next.js while other says to use Vue as the framework).
+   - Identify near-duplicate requirements. Mark lower-quality phrasing for consolidation.
+     B. Ambiguity detection:
+   - Flag vague adjectives (fast, scalable, secure, intuitive, robust) lacking measurable criteria.
+   - Flag unresolved placeholders (TODO, TKTK, ???, <placeholder>, etc.).
+     C. Underspecification:
+   - Requirements with verbs but missing object or measurable outcome.
+   - User stories missing acceptance criteria alignment.
+   - Tasks referencing files or components not defined in spec/plan.
+     D. Constitution alignment:
+   - Any requirement or plan element conflicting with a MUST principle.
+   - Missing mandated sections or quality gates from constitution.
+     E. Coverage gaps:
+   - Requirements with zero associated tasks.
+   - Tasks with no mapped requirement/story.
+   - Non-functional requirements not reflected in tasks (e.g., performance, security).
+     F. Inconsistency:
+   - Terminology drift (same concept named differently across files).
+   - Data entities referenced in plan but absent in spec (or vice versa).
+   - Task ordering contradictions (e.g., integration tasks before foundational setup tasks without dependency note).
+   - Conflicting requirements (e.g., one requires to use Next.js while other says to use Vue as the framework).
 
 5. Severity assignment heuristic:
    - CRITICAL: Violates constitution MUST, missing core spec artifact, or requirement with zero coverage that blocks baseline functionality.
@@ -66,9 +66,11 @@ Execution steps:
 6. Produce a Markdown report (no file writes) with sections:
 
    ### Specification Analysis Report
-   | ID | Category | Severity | Location(s) | Summary | Recommendation |
-   |----|----------|----------|-------------|---------|----------------|
-   | A1 | Duplication | HIGH | spec.md:L120-134 | Two similar requirements ... | Merge phrasing; keep clearer version |
+
+   | ID  | Category    | Severity | Location(s)      | Summary                      | Recommendation                       |
+   | --- | ----------- | -------- | ---------------- | ---------------------------- | ------------------------------------ |
+   | A1  | Duplication | HIGH     | spec.md:L120-134 | Two similar requirements ... | Merge phrasing; keep clearer version |
+
    (Add one row per finding; generate stable IDs prefixed by category initial.)
 
    Additional subsections:
@@ -77,12 +79,12 @@ Execution steps:
    - Constitution Alignment Issues (if any)
    - Unmapped Tasks (if any)
    - Metrics:
-     * Total Requirements
-     * Total Tasks
-     * Coverage % (requirements with >=1 task)
-     * Ambiguity Count
-     * Duplication Count
-     * Critical Issues Count
+     - Total Requirements
+     - Total Tasks
+     - Coverage % (requirements with >=1 task)
+     - Ambiguity Count
+     - Duplication Count
+     - Critical Issues Count
 
 7. At end of report, output a concise Next Actions block:
    - If CRITICAL issues exist: Recommend resolving before `/implement`.
@@ -92,6 +94,7 @@ Execution steps:
 8. Ask the user: "Would you like me to suggest concrete remediation edits for the top N issues?" (Do NOT apply them automatically.)
 
 Behavior rules:
+
 - NEVER modify files.
 - NEVER hallucinate missing sections—if absent, report them.
 - KEEP findings deterministic: if rerun without changes, produce consistent IDs and counts.
diff --git a/.github/prompts/clarify.prompt.md b/.github/prompts/clarify.prompt.md
index 26ff530b..941e45cb 100644
--- a/.github/prompts/clarify.prompt.md
+++ b/.github/prompts/clarify.prompt.md
@@ -77,56 +77,56 @@ Execution steps:
    - Information is better deferred to planning phase (note internally)
 
 3. Generate (internally) a prioritized queue of candidate clarification questions (maximum 5). Do NOT output them all at once. Apply these constraints:
-    - Maximum of 5 total questions across the whole session.
-    - Each question must be answerable with EITHER:
-       * A short multiple‑choice selection (2–5 distinct, mutually exclusive options), OR
-       * A one-word / short‑phrase answer (explicitly constrain: "Answer in <=5 words").
+   - Maximum of 5 total questions across the whole session.
+   - Each question must be answerable with EITHER:
+     - A short multiple‑choice selection (2–5 distinct, mutually exclusive options), OR
+     - A one-word / short‑phrase answer (explicitly constrain: "Answer in <=5 words").
    - Only include questions whose answers materially impact architecture, data modeling, task decomposition, test design, UX behavior, operational readiness, or compliance validation.
    - Ensure category coverage balance: attempt to cover the highest impact unresolved categories first; avoid asking two low-impact questions when a single high-impact area (e.g., security posture) is unresolved.
    - Exclude questions already answered, trivial stylistic preferences, or plan-level execution details (unless blocking correctness).
    - Favor clarifications that reduce downstream rework risk or prevent misaligned acceptance tests.
-   - If more than 5 categories remain unresolved, select the top 5 by (Impact * Uncertainty) heuristic.
+   - If more than 5 categories remain unresolved, select the top 5 by (Impact \* Uncertainty) heuristic.
 
 4. Sequential questioning loop (interactive):
-    - Present EXACTLY ONE question at a time.
-    - For multiple‑choice questions render options as a Markdown table:
-
-       | Option | Description |
-       |--------|-------------|
-       | A | <Option A description> |
-       | B | <Option B description> |
-       | C | <Option C description> | (add D/E as needed up to 5)
-       | Short | Provide a different short answer (<=5 words) | (Include only if free-form alternative is appropriate)
-
-    - For short‑answer style (no meaningful discrete options), output a single line after the question: `Format: Short answer (<=5 words)`.
-    - After the user answers:
-       * Validate the answer maps to one option or fits the <=5 word constraint.
-       * If ambiguous, ask for a quick disambiguation (count still belongs to same question; do not advance).
-       * Once satisfactory, record it in working memory (do not yet write to disk) and move to the next queued question.
-    - Stop asking further questions when:
-       * All critical ambiguities resolved early (remaining queued items become unnecessary), OR
-       * User signals completion ("done", "good", "no more"), OR
-       * You reach 5 asked questions.
-    - Never reveal future queued questions in advance.
-    - If no valid questions exist at start, immediately report no critical ambiguities.
+   - Present EXACTLY ONE question at a time.
+   - For multiple‑choice questions render options as a Markdown table:
+
+     | Option | Description                                  |
+     | ------ | -------------------------------------------- | ------------------------------------------------------ |
+     | A      | <Option A description>                       |
+     | B      | <Option B description>                       |
+     | C      | <Option C description>                       | (add D/E as needed up to 5)                            |
+     | Short  | Provide a different short answer (<=5 words) | (Include only if free-form alternative is appropriate) |
+
+   - For short‑answer style (no meaningful discrete options), output a single line after the question: `Format: Short answer (<=5 words)`.
+   - After the user answers:
+     - Validate the answer maps to one option or fits the <=5 word constraint.
+     - If ambiguous, ask for a quick disambiguation (count still belongs to same question; do not advance).
+     - Once satisfactory, record it in working memory (do not yet write to disk) and move to the next queued question.
+   - Stop asking further questions when:
+     - All critical ambiguities resolved early (remaining queued items become unnecessary), OR
+     - User signals completion ("done", "good", "no more"), OR
+     - You reach 5 asked questions.
+   - Never reveal future queued questions in advance.
+   - If no valid questions exist at start, immediately report no critical ambiguities.
 
 5. Integration after EACH accepted answer (incremental update approach):
-    - Maintain in-memory representation of the spec (loaded once at start) plus the raw file contents.
-    - For the first integrated answer in this session:
-       * Ensure a `## Clarifications` section exists (create it just after the highest-level contextual/overview section per the spec template if missing).
-       * Under it, create (if not present) a `### Session YYYY-MM-DD` subheading for today.
-    - Append a bullet line immediately after acceptance: `- Q: <question> → A: <final answer>`.
-    - Then immediately apply the clarification to the most appropriate section(s):
-       * Functional ambiguity → Update or add a bullet in Functional Requirements.
-       * User interaction / actor distinction → Update User Stories or Actors subsection (if present) with clarified role, constraint, or scenario.
-       * Data shape / entities → Update Data Model (add fields, types, relationships) preserving ordering; note added constraints succinctly.
-       * Non-functional constraint → Add/modify measurable criteria in Non-Functional / Quality Attributes section (convert vague adjective to metric or explicit target).
-       * Edge case / negative flow → Add a new bullet under Edge Cases / Error Handling (or create such subsection if template provides placeholder for it).
-       * Terminology conflict → Normalize term across spec; retain original only if necessary by adding `(formerly referred to as "X")` once.
-    - If the clarification invalidates an earlier ambiguous statement, replace that statement instead of duplicating; leave no obsolete contradictory text.
-    - Save the spec file AFTER each integration to minimize risk of context loss (atomic overwrite).
-    - Preserve formatting: do not reorder unrelated sections; keep heading hierarchy intact.
-    - Keep each inserted clarification minimal and testable (avoid narrative drift).
+   - Maintain in-memory representation of the spec (loaded once at start) plus the raw file contents.
+   - For the first integrated answer in this session:
+     - Ensure a `## Clarifications` section exists (create it just after the highest-level contextual/overview section per the spec template if missing).
+     - Under it, create (if not present) a `### Session YYYY-MM-DD` subheading for today.
+   - Append a bullet line immediately after acceptance: `- Q: <question> → A: <final answer>`.
+   - Then immediately apply the clarification to the most appropriate section(s):
+     - Functional ambiguity → Update or add a bullet in Functional Requirements.
+     - User interaction / actor distinction → Update User Stories or Actors subsection (if present) with clarified role, constraint, or scenario.
+     - Data shape / entities → Update Data Model (add fields, types, relationships) preserving ordering; note added constraints succinctly.
+     - Non-functional constraint → Add/modify measurable criteria in Non-Functional / Quality Attributes section (convert vague adjective to metric or explicit target).
+     - Edge case / negative flow → Add a new bullet under Edge Cases / Error Handling (or create such subsection if template provides placeholder for it).
+     - Terminology conflict → Normalize term across spec; retain original only if necessary by adding `(formerly referred to as "X")` once.
+   - If the clarification invalidates an earlier ambiguous statement, replace that statement instead of duplicating; leave no obsolete contradictory text.
+   - Save the spec file AFTER each integration to minimize risk of context loss (atomic overwrite).
+   - Preserve formatting: do not reorder unrelated sections; keep heading hierarchy intact.
+   - Keep each inserted clarification minimal and testable (avoid narrative drift).
 
 6. Validation (performed after EACH write plus final pass):
    - Clarifications session contains exactly one bullet per accepted answer (no duplicates).
@@ -147,12 +147,13 @@ Execution steps:
    - Suggested next command.
 
 Behavior rules:
+
 - If no meaningful ambiguities found (or all potential questions would be low-impact), respond: "No critical ambiguities detected worth formal clarification." and suggest proceeding.
 - If spec file missing, instruct user to run `/specify` first (do not create a new spec here).
 - Never exceed 5 total asked questions (clarification retries for a single question do not count as new questions).
 - Avoid speculative tech stack questions unless the absence blocks functional clarity.
 - Respect user early termination signals ("stop", "done", "proceed").
- - If no questions asked due to full coverage, output a compact coverage summary (all categories Clear) then suggest advancing.
- - If quota reached with unresolved high-impact categories remaining, explicitly flag them under Deferred with rationale.
+- If no questions asked due to full coverage, output a compact coverage summary (all categories Clear) then suggest advancing.
+- If quota reached with unresolved high-impact categories remaining, explicitly flag them under Deferred with rationale.
 
 Context for prioritization: $ARGUMENTS
diff --git a/.github/prompts/constitution.prompt.md b/.github/prompts/constitution.prompt.md
index 765867e6..c0e8191c 100644
--- a/.github/prompts/constitution.prompt.md
+++ b/.github/prompts/constitution.prompt.md
@@ -14,16 +14,16 @@ Follow this execution flow:
 
 1. Load the existing constitution template at `.specify/memory/constitution.md`.
    - Identify every placeholder token of the form `[ALL_CAPS_IDENTIFIER]`.
-   **IMPORTANT**: The user might require less or more principles than the ones used in the template. If a number is specified, respect that - follow the general template. You will update the doc accordingly.
+     **IMPORTANT**: The user might require less or more principles than the ones used in the template. If a number is specified, respect that - follow the general template. You will update the doc accordingly.
 
 2. Collect/derive values for placeholders:
    - If user input (conversation) supplies a value, use it.
    - Otherwise infer from existing repo context (README, docs, prior constitution versions if embedded).
    - For governance dates: `RATIFICATION_DATE` is the original adoption date (if unknown ask or mark TODO), `LAST_AMENDED_DATE` is today if changes are made, otherwise keep previous.
    - `CONSTITUTION_VERSION` must increment according to semantic versioning rules:
-     * MAJOR: Backward incompatible governance/principle removals or redefinitions.
-     * MINOR: New principle/section added or materially expanded guidance.
-     * PATCH: Clarifications, wording, typo fixes, non-semantic refinements.
+     - MAJOR: Backward incompatible governance/principle removals or redefinitions.
+     - MINOR: New principle/section added or materially expanded guidance.
+     - PATCH: Clarifications, wording, typo fixes, non-semantic refinements.
    - If version bump type ambiguous, propose reasoning before finalizing.
 
 3. Draft the updated constitution content:
@@ -61,6 +61,7 @@ Follow this execution flow:
    - Suggested commit message (e.g., `docs: amend constitution to vX.Y.Z (principle additions + governance update)`).
 
 Formatting & Style Requirements:
+
 - Use Markdown headings exactly as in the template (do not demote/promote levels).
 - Wrap long rationale lines to keep readability (<100 chars ideally) but do not hard enforce with awkward breaks.
 - Keep a single blank line between sections.
diff --git a/.github/prompts/implement.prompt.md b/.github/prompts/implement.prompt.md
index 003dce91..c0294270 100644
--- a/.github/prompts/implement.prompt.md
+++ b/.github/prompts/implement.prompt.md
@@ -26,7 +26,7 @@ $ARGUMENTS
 
 4. Execute implementation following the task plan:
    - **Phase-by-phase execution**: Complete each phase before moving to the next
-   - **Respect dependencies**: Run sequential tasks in order, parallel tasks [P] can run together  
+   - **Respect dependencies**: Run sequential tasks in order, parallel tasks [P] can run together
    - **Follow TDD approach**: Execute test tasks before their corresponding implementation tasks
    - **File-based coordination**: Tasks affecting the same files must run sequentially
    - **Validation checkpoints**: Verify each phase completion before proceeding
diff --git a/.github/prompts/plan.prompt.md b/.github/prompts/plan.prompt.md
index 23c020ac..9ebf40c2 100644
--- a/.github/prompts/plan.prompt.md
+++ b/.github/prompts/plan.prompt.md
@@ -27,9 +27,9 @@ Given the implementation details provided as an argument, do this:
    - The template is self-contained and executable
    - Follow error handling and gate checks as specified
    - Let the template guide artifact generation in $SPECS_DIR:
-     * Phase 0 generates research.md
-     * Phase 1 generates data-model.md, contracts/, quickstart.md
-     * Phase 2 generates tasks.md
+     - Phase 0 generates research.md
+     - Phase 1 generates data-model.md, contracts/, quickstart.md
+     - Phase 2 generates tasks.md
    - Incorporate user-provided details from arguments into Technical Context: $ARGUMENTS
    - Update Progress Tracking as you complete each phase
 
diff --git a/.github/prompts/specify.prompt.md b/.github/prompts/specify.prompt.md
index 0f92105a..dfb32db8 100644
--- a/.github/prompts/specify.prompt.md
+++ b/.github/prompts/specify.prompt.md
@@ -13,7 +13,7 @@ The text the user typed after `/specify` in the triggering message **is** the fe
 Given that feature description, do this:
 
 1. Run the script `.specify/scripts/bash/create-new-feature.sh --json "$ARGUMENTS"` from repo root and parse its JSON output for BRANCH_NAME and SPEC_FILE. All file paths must be absolute.
-  **IMPORTANT** You must only ever run this script once. The JSON is provided in the terminal as output - always refer to it to get the actual content you're looking for.
+   **IMPORTANT** You must only ever run this script once. The JSON is provided in the terminal as output - always refer to it to get the actual content you're looking for.
 2. Load `.specify/templates/spec-template.md` to understand required sections.
 3. Write the specification to SPEC_FILE using the template structure, replacing placeholders with concrete details derived from the feature description (arguments) while preserving section order and headings.
 4. Report completion with branch name, spec file path, and readiness for the next phase.
diff --git a/.github/prompts/tasks.prompt.md b/.github/prompts/tasks.prompt.md
index a026e93f..96a91a81 100644
--- a/.github/prompts/tasks.prompt.md
+++ b/.github/prompts/tasks.prompt.md
@@ -24,11 +24,11 @@ $ARGUMENTS
 3. Generate tasks following the template:
    - Use `.specify/templates/tasks-template.md` as the base
    - Replace example tasks with actual tasks based on:
-     * **Setup tasks**: Project init, dependencies, linting
-     * **Test tasks [P]**: One per contract, one per integration scenario
-     * **Core tasks**: One per entity, service, CLI command, endpoint
-     * **Integration tasks**: DB connections, middleware, logging
-     * **Polish tasks [P]**: Unit tests, performance, docs
+     - **Setup tasks**: Project init, dependencies, linting
+     - **Test tasks [P]**: One per contract, one per integration scenario
+     - **Core tasks**: One per entity, service, CLI command, endpoint
+     - **Integration tasks**: DB connections, middleware, logging
+     - **Polish tasks [P]**: Unit tests, performance, docs
 
 4. Task generation rules:
    - Each contract file → contract test task marked [P]
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 8978decc..d70a85ef 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -4,7 +4,7 @@ name: Build
 
 on:
   push:
-    branches: ['main']
+    branches: ["main"]
   release:
     types: [published]
   workflow_dispatch:
@@ -15,7 +15,7 @@ permissions:
   id-token: write
 
 concurrency:
-  group: 'pages'
+  group: "pages"
   cancel-in-progress: false
 
 jobs:
@@ -51,7 +51,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '22'
+          node-version: "22"
           cache: ${{ steps.detect-package-manager.outputs.manager }}
       - name: Install dependencies
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
diff --git a/.github/workflows/quality.yml b/.github/workflows/quality.yml
index 862fc980..5b1657f6 100644
--- a/.github/workflows/quality.yml
+++ b/.github/workflows/quality.yml
@@ -352,14 +352,7 @@ jobs:
   quality-summary:
     name: 📋 Quality Summary
     runs-on: ubuntu-latest
-    needs:
-      [
-        formatting,
-        typescript,
-        dependencies,
-        complexity,
-        documentation,
-      ]
+    needs: [formatting, typescript, dependencies, complexity, documentation]
     if: always()
 
     steps:
diff --git a/AGENTS.md b/AGENTS.md
index e119f417..4ebfbb4e 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -142,6 +142,7 @@ Break complex work into 3–5 stages. Document in `IMPLEMENTATION_PLAN.md` **onl
 
 ```markdown
 ## Stage N: [Name]
+
 **Goal**: [Specific deliverable]
 **Success Criteria**: [Testable outcomes]
 **Tests**: [Specific test cases]
diff --git a/app/(auth)/auth/login/page.tsx b/app/(auth)/auth/login/page.tsx
index 2bbbc292..17063aa4 100644
--- a/app/(auth)/auth/login/page.tsx
+++ b/app/(auth)/auth/login/page.tsx
@@ -38,7 +38,7 @@ function LoginPageContent() {
 
   useEffect(() => {
     if (isAuthenticated) {
-      router.replace(buildRoute("/browser"))
+      router.replace(buildRoute("/"))
     }
   }, [isAuthenticated, router])
 
@@ -52,15 +52,14 @@ function LoginPageContent() {
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault()
 
-    const credentials =
-      method === "accessKeyAndSecretKey" ? accessKeyAndSecretKey : sts
+    const credentials = method === "accessKeyAndSecretKey" ? accessKeyAndSecretKey : sts
 
     try {
       const currentConfig = await configManager.loadConfig()
       await login(credentials, currentConfig)
 
       message.success(t("Login Success"))
-      window.location.href = buildRoute("/browser")
+      window.location.href = buildRoute("/")
     } catch {
       message.error(t("Login Failed"))
     }
diff --git a/app/(auth)/config/page.tsx b/app/(auth)/config/page.tsx
index e4fbc8ac..d0074e06 100644
--- a/app/(auth)/config/page.tsx
+++ b/app/(auth)/config/page.tsx
@@ -6,12 +6,7 @@ import Image from "next/image"
 import { useRouter } from "next/navigation"
 import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldLabel,
-} from "@/components/ui/field"
+import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
 import { ThemeSwitcher } from "@/components/theme-switcher"
 import { LanguageSwitcher } from "@/components/language-switcher"
@@ -35,7 +30,7 @@ function ConfigPageContent() {
   const message = useMessage()
 
   const [serverHost, setServerHost] = useState(() =>
-    typeof window !== "undefined" ? localStorage.getItem("rustfs-server-host") ?? "" : ""
+    typeof window !== "undefined" ? (localStorage.getItem("rustfs-server-host") ?? "") : "",
   )
 
   const validateAndSave = async (e: React.FormEvent) => {
@@ -50,9 +45,7 @@ function ConfigPageContent() {
 
         new URL(urlToValidate)
 
-        const urlToSave = serverHost.match(/^https?:\/\//)
-          ? serverHost
-          : urlToValidate
+        const urlToSave = serverHost.match(/^https?:\/\//) ? serverHost : urlToValidate
         localStorage.setItem("rustfs-server-host", urlToSave)
 
         if (!serverHost.match(/^https?:\/\//)) {
@@ -70,11 +63,7 @@ function ConfigPageContent() {
         window.location.href = getLoginRoute()
       }, 200)
     } catch (error) {
-      message.error(
-        t("Invalid server address format") +
-          ": " +
-          (error as Error).message
-      )
+      message.error(t("Invalid server address format") + ": " + (error as Error).message)
     }
   }
 
@@ -107,17 +96,9 @@ function ConfigPageContent() {
         </div>
         <div className="flex w-full flex-col items-center justify-center bg-white dark:border-neutral-700 dark:bg-neutral-900 lg:w-1/2">
           <div className="max-w-sm w-full space-y-6 p-4 sm:p-7">
-            <Image
-              src={logoImage}
-              alt="RustFS"
-              width={112}
-              height={24}
-              className="max-w-28"
-            />
+            <Image src={logoImage} alt="RustFS" width={112} height={24} className="max-w-28" />
             <div className="py-6">
-              <h1 className="block text-2xl font-bold text-gray-800 dark:text-white">
-                {t("Server Configuration")}
-              </h1>
+              <h1 className="block text-2xl font-bold text-gray-800 dark:text-white">{t("Server Configuration")}</h1>
               <p className="mt-2 text-sm text-gray-600 dark:text-neutral-400">
                 {t("Please configure your RustFS server address")}
               </p>
@@ -127,27 +108,19 @@ function ConfigPageContent() {
               <form onSubmit={validateAndSave} autoComplete="off">
                 <div className="grid gap-y-6">
                   <Field>
-                    <FieldLabel htmlFor="serverHost">
-                      {t("Server Address")}
-                    </FieldLabel>
-                    <FieldDescription>
-                      {t("Leave empty to use current host as default")}
-                    </FieldDescription>
+                    <FieldLabel htmlFor="serverHost">{t("Server Address")}</FieldLabel>
+                    <FieldDescription>{t("Leave empty to use current host as default")}</FieldDescription>
                     <FieldContent>
                       <Input
                         id="serverHost"
                         value={serverHost}
                         onChange={(e) => setServerHost(e.target.value)}
                         type="text"
-                        placeholder={t(
-                          "Please enter server address (e.g., http://localhost:9000)"
-                        )}
+                        placeholder={t("Please enter server address (e.g., http://localhost:9000)")}
                       />
                     </FieldContent>
                     <FieldDescription>
-                      {t(
-                        "Example: http://localhost:9000 or https://your-domain.com"
-                      )}
+                      {t("Example: http://localhost:9000 or https://your-domain.com")}
                     </FieldDescription>
                   </Field>
 
@@ -156,19 +129,11 @@ function ConfigPageContent() {
                       {t("Save Configuration")}
                     </Button>
 
-                    <Button
-                      type="button"
-                      variant="outline"
-                      onClick={resetToCurrentHost}
-                    >
+                    <Button type="button" variant="outline" onClick={resetToCurrentHost}>
                       {t("Reset")}
                     </Button>
 
-                    <Button
-                      type="button"
-                      variant="outline"
-                      onClick={skipConfig}
-                    >
+                    <Button type="button" variant="outline" onClick={skipConfig}>
                       {t("Skip")}
                     </Button>
                   </div>
@@ -179,10 +144,7 @@ function ConfigPageContent() {
             <div className="my-8">
               <p className="text-sm text-gray-600 dark:text-neutral-400">
                 {t("Need help?")}{" "}
-                <Link
-                  href="https://docs.rustfs.com"
-                  className="text-blue-600 hover:underline"
-                >
+                <Link href="https://docs.rustfs.com" className="text-blue-600 hover:underline">
                   {t("View Documentation")}
                 </Link>
               </p>
diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
index 29a48d64..bb664d41 100644
--- a/app/(auth)/layout.tsx
+++ b/app/(auth)/layout.tsx
@@ -1,7 +1,3 @@
-export default function AuthLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
   return <div className="min-h-screen">{children}</div>
 }
diff --git a/app/(dashboard)/403/page.tsx b/app/(dashboard)/403/page.tsx
index e2d1f11a..93430c2e 100644
--- a/app/(dashboard)/403/page.tsx
+++ b/app/(dashboard)/403/page.tsx
@@ -2,14 +2,7 @@
 
 import { useRouter } from "next/navigation"
 import { useTranslation } from "react-i18next"
-import {
-  Empty,
-  EmptyContent,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-  EmptyDescription,
-} from "@/components/ui/empty"
+import { Empty, EmptyContent, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from "@/components/ui/empty"
 import { Button } from "@/components/ui/button"
 
 export default function ForbiddenPage() {
@@ -26,19 +19,8 @@ export default function ForbiddenPage() {
         <EmptyContent className="max-w-sm text-center">
           <EmptyHeader>
             <EmptyMedia variant="icon" className="mx-auto">
-              <svg
-                viewBox="0 0 48 48"
-                fill="none"
-                className="h-12 w-12"
-              >
-                <circle
-                  cx="24"
-                  cy="24"
-                  r="22"
-                  fill="#F3F4F6"
-                  stroke="#E5E7EB"
-                  strokeWidth="2"
-                />
+              <svg viewBox="0 0 48 48" fill="none" className="h-12 w-12">
+                <circle cx="24" cy="24" r="22" fill="#F3F4F6" stroke="#E5E7EB" strokeWidth="2" />
                 <path
                   d="M16 21V19a8 8 0 0116 0v2"
                   stroke="#A3A3A3"
@@ -46,28 +28,14 @@ export default function ForbiddenPage() {
                   strokeLinecap="round"
                   strokeLinejoin="round"
                 />
-                <rect
-                  x="16"
-                  y="28"
-                  width="16"
-                  height="4"
-                  rx="2"
-                  fill="#A3A3A3"
-                />
-                <rect
-                  x="22"
-                  y="32"
-                  width="4"
-                  height="4"
-                  rx="2"
-                  fill="#A3A3A3"
-                />
+                <rect x="16" y="28" width="16" height="4" rx="2" fill="#A3A3A3" />
+                <rect x="22" y="32" width="4" height="4" rx="2" fill="#A3A3A3" />
               </svg>
             </EmptyMedia>
             <EmptyTitle>{t("Access Denied")}</EmptyTitle>
             <EmptyDescription>
               {t(
-                "You do not have permission to access this page. This may be due to insufficient permissions or not being logged in."
+                "You do not have permission to access this page. This may be due to insufficient permissions or not being logged in.",
               )}
             </EmptyDescription>
           </EmptyHeader>
diff --git a/app/(dashboard)/_components/performance-backend-card.tsx b/app/(dashboard)/_components/performance-backend-card.tsx
index ec46f432..6415dc1d 100644
--- a/app/(dashboard)/_components/performance-backend-card.tsx
+++ b/app/(dashboard)/_components/performance-backend-card.tsx
@@ -1,12 +1,6 @@
 "use client"
 
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 
 export interface BackendInfoItem {
   icon: React.ComponentType<{ className?: string; "aria-hidden"?: boolean | "true" | "false" }>
@@ -14,45 +8,25 @@ export interface BackendInfoItem {
   value?: string
 }
 
-export function PerformanceBackendCard({
-  items,
-  t,
-}: {
-  items: BackendInfoItem[]
-  t: (key: string) => string
-}) {
+export function PerformanceBackendCard({ items, t }: { items: BackendInfoItem[]; t: (key: string) => string }) {
   return (
     <Card className="shadow-none">
       <CardHeader>
         <CardTitle>{items.length ? t("Backend Services") : ""}</CardTitle>
         <CardDescription>
-          {items.length
-            ? t(
-                "Key services and configuration values reported by the cluster."
-              )
-            : ""}
+          {items.length ? t("Key services and configuration values reported by the cluster.") : ""}
         </CardDescription>
       </CardHeader>
       <CardContent>
         <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
           {items.map((item) => (
-            <Card
-              key={item.title}
-              className="border bg-muted/40 shadow-none"
-            >
+            <Card key={item.title} className="border bg-muted/40 shadow-none">
               <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium text-muted-foreground">
-                  {item.title}
-                </CardTitle>
-                <item.icon
-                  className="size-5 text-muted-foreground"
-                  aria-hidden
-                />
+                <CardTitle className="text-sm font-medium text-muted-foreground">{item.title}</CardTitle>
+                <item.icon className="size-5 text-muted-foreground" aria-hidden />
               </CardHeader>
               <CardContent>
-                <p className="text-xl font-semibold text-foreground">
-                  {item.value ?? "-"}
-                </p>
+                <p className="text-xl font-semibold text-foreground">{item.value ?? "-"}</p>
               </CardContent>
             </Card>
           ))}
diff --git a/app/(dashboard)/_components/performance-infrastructure-card.tsx b/app/(dashboard)/_components/performance-infrastructure-card.tsx
index e0188a10..dc9d81e7 100644
--- a/app/(dashboard)/_components/performance-infrastructure-card.tsx
+++ b/app/(dashboard)/_components/performance-infrastructure-card.tsx
@@ -1,12 +1,6 @@
 "use client"
 
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 
 export function PerformanceInfrastructureCard({
   onlineServers,
@@ -25,57 +19,33 @@ export function PerformanceInfrastructureCard({
     <Card className="shadow-none">
       <CardHeader className="pb-3">
         <CardTitle>{t("Infrastructure Health")}</CardTitle>
-        <CardDescription>
-          {t(
-            "Real-time status of cluster servers and backend storage devices."
-          )}
-        </CardDescription>
+        <CardDescription>{t("Real-time status of cluster servers and backend storage devices.")}</CardDescription>
       </CardHeader>
       <CardContent>
         <div className="grid gap-4 lg:grid-cols-2">
           <div className="rounded-lg border bg-muted/40 p-4">
-            <p className="text-sm font-medium text-muted-foreground">
-              {t("Servers")}
-            </p>
+            <p className="text-sm font-medium text-muted-foreground">{t("Servers")}</p>
             <div className="mt-4 grid gap-3 sm:grid-cols-2">
               <div className="rounded-md border bg-background p-3">
-                <p className="text-xs text-muted-foreground">
-                  {t("Online")}
-                </p>
-                <p className="mt-1 text-xl font-semibold text-foreground">
-                  {onlineServers}
-                </p>
+                <p className="text-xs text-muted-foreground">{t("Online")}</p>
+                <p className="mt-1 text-xl font-semibold text-foreground">{onlineServers}</p>
               </div>
               <div className="rounded-md border bg-background p-3">
-                <p className="text-xs text-muted-foreground">
-                  {t("Offline")}
-                </p>
-                <p className="mt-1 text-xl font-semibold text-foreground">
-                  {offlineServers}
-                </p>
+                <p className="text-xs text-muted-foreground">{t("Offline")}</p>
+                <p className="mt-1 text-xl font-semibold text-foreground">{offlineServers}</p>
               </div>
             </div>
           </div>
           <div className="rounded-lg border bg-muted/40 p-4">
-            <p className="text-sm font-medium text-muted-foreground">
-              {t("Disks")}
-            </p>
+            <p className="text-sm font-medium text-muted-foreground">{t("Disks")}</p>
             <div className="mt-4 grid gap-3 sm:grid-cols-2">
               <div className="rounded-md border bg-background p-3">
-                <p className="text-xs text-muted-foreground">
-                  {t("Online")}
-                </p>
-                <p className="mt-1 text-xl font-semibold text-foreground">
-                  {onlineDisks}
-                </p>
+                <p className="text-xs text-muted-foreground">{t("Online")}</p>
+                <p className="mt-1 text-xl font-semibold text-foreground">{onlineDisks}</p>
               </div>
               <div className="rounded-md border bg-background p-3">
-                <p className="text-xs text-muted-foreground">
-                  {t("Offline")}
-                </p>
-                <p className="mt-1 text-xl font-semibold text-foreground">
-                  {offlineDisks}
-                </p>
+                <p className="text-xs text-muted-foreground">{t("Offline")}</p>
+                <p className="mt-1 text-xl font-semibold text-foreground">{offlineDisks}</p>
               </div>
             </div>
           </div>
diff --git a/app/(dashboard)/_components/performance-server-list.tsx b/app/(dashboard)/_components/performance-server-list.tsx
index 0240ed78..526094c7 100644
--- a/app/(dashboard)/_components/performance-server-list.tsx
+++ b/app/(dashboard)/_components/performance-server-list.tsx
@@ -1,18 +1,7 @@
 "use client"
 
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Progress } from "@/components/ui/progress"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { niceBytes } from "@/lib/functions"
@@ -28,27 +17,17 @@ function countOnlineDrives(server: ServerInfo, type: string) {
 }
 
 function countOnlineNetworks(server: ServerInfo, type: string) {
-  return Object.values(server?.network || {}).filter(
-    (state) => state === type
-  ).length
+  return Object.values(server?.network || {}).filter((state) => state === type).length
 }
 
-export function PerformanceServerList({
-  servers,
-  t,
-}: {
-  servers: ServerInfo[]
-  t: (key: string) => string
-}) {
+export function PerformanceServerList({ servers, t }: { servers: ServerInfo[]; t: (key: string) => string }) {
   return (
     <Card className="shadow-none">
       <CardHeader className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <CardTitle>{t("Server List")}</CardTitle>
           <CardDescription>
-            {t(
-              "Inspect individual server health, disk utilization, and network status."
-            )}
+            {t("Inspect individual server health, disk utilization, and network status.")}
           </CardDescription>
         </div>
         <span className="text-sm text-muted-foreground">
@@ -58,43 +37,29 @@ export function PerformanceServerList({
       <CardContent>
         <Accordion type="single" collapsible className="space-y-2">
           {servers.map((server, index) => (
-            <AccordionItem
-              key={server.endpoint ?? index}
-              value={String(index)}
-            >
+            <AccordionItem key={server.endpoint ?? index} value={String(index)}>
               <AccordionTrigger>
                 <div className="flex flex-col gap-2 text-left sm:flex-row sm:items-center sm:gap-4">
                   <div className="flex items-center gap-2">
                     <span
                       className={cn(
                         "inline-flex h-2 w-2 rounded-full",
-                        server.state === "online"
-                          ? "bg-emerald-500"
-                          : "bg-rose-500"
+                        server.state === "online" ? "bg-emerald-500" : "bg-rose-500",
                       )}
                     />
-                    <span className="font-semibold">
-                      {server.endpoint ?? "--"}
-                    </span>
+                    <span className="font-semibold">{server.endpoint ?? "--"}</span>
                   </div>
                   <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
                     <span>
-                      {t("Disks")}:{" "}
-                      {countOnlineDrives(server, "ok")} /{" "}
-                      {server.drives?.length ?? 0}
+                      {t("Disks")}: {countOnlineDrives(server, "ok")} / {server.drives?.length ?? 0}
                     </span>
                     <span>
-                      {t("Network")}:{" "}
-                      {countOnlineNetworks(server, "online")} /{" "}
+                      {t("Network")}: {countOnlineNetworks(server, "online")} /{" "}
                       {Object.keys(server.network ?? {}).length}
                     </span>
                     <span>
                       {t("Uptime")}:{" "}
-                      {server.uptime != null
-                        ? dayjs()
-                            .subtract(server.uptime, "second")
-                            .fromNow()
-                        : "--"}
+                      {server.uptime != null ? dayjs().subtract(server.uptime, "second").fromNow() : "--"}
                     </span>
                   </div>
                 </div>
@@ -106,27 +71,18 @@ export function PerformanceServerList({
                 <ScrollArea className="w-full">
                   <div className="flex gap-4 pb-2">
                     {(server.drives || []).map((drive) => (
-                      <Card
-                        key={drive.uuid ?? drive.drive_path}
-                        className="min-w-[260px] shadow-none"
-                      >
+                      <Card key={drive.uuid ?? drive.drive_path} className="min-w-[260px] shadow-none">
                         <CardHeader className="pb-2">
                           <CardTitle className="text-sm font-medium text-muted-foreground">
                             {drive.drive_path ?? "--"}
                           </CardTitle>
                           <CardDescription className="text-xs">
-                            {niceBytes(String(drive.usedspace ?? 0))} /{" "}
-                            {niceBytes(String(drive.totalspace ?? 0))}
+                            {niceBytes(String(drive.usedspace ?? 0))} / {niceBytes(String(drive.totalspace ?? 0))}
                           </CardDescription>
                         </CardHeader>
                         <CardContent>
                           <Progress
-                            value={
-                              drive.totalspace
-                                ? ((drive.usedspace ?? 0) / drive.totalspace) *
-                                  100
-                                : 0
-                            }
+                            value={drive.totalspace ? ((drive.usedspace ?? 0) / drive.totalspace) * 100 : 0}
                             className="mb-3 h-2"
                           />
                           <div className="space-y-1 text-xs text-muted-foreground">
diff --git a/app/(dashboard)/_components/performance-summary-cards.tsx b/app/(dashboard)/_components/performance-summary-cards.tsx
index b571e13a..a7174fcb 100644
--- a/app/(dashboard)/_components/performance-summary-cards.tsx
+++ b/app/(dashboard)/_components/performance-summary-cards.tsx
@@ -2,12 +2,7 @@
 
 import * as React from "react"
 import Link from "next/link"
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { cn } from "@/lib/utils"
 
 export interface SummaryMetric {
@@ -18,41 +13,23 @@ export interface SummaryMetric {
   href?: string
 }
 
-export function PerformanceSummaryCards({
-  metrics,
-}: {
-  metrics: SummaryMetric[]
-}) {
+export function PerformanceSummaryCards({ metrics }: { metrics: SummaryMetric[] }) {
   return (
     <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
       {metrics.map((metric) => {
         const cardContent = (
           <Card
             key={metric.label}
-            className={cn(
-              "shadow-none",
-              metric.href && "cursor-pointer transition-colors hover:bg-muted/50"
-            )}
+            className={cn("shadow-none", metric.href && "cursor-pointer transition-colors hover:bg-muted/50")}
           >
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium text-muted-foreground">
-                {metric.label}
-              </CardTitle>
-              <metric.icon
-                className="size-5 text-muted-foreground"
-                aria-hidden
-              />
+              <CardTitle className="text-sm font-medium text-muted-foreground">{metric.label}</CardTitle>
+              <metric.icon className="size-5 text-muted-foreground" aria-hidden />
             </CardHeader>
             <CardContent>
               <div className="flex items-baseline justify-between gap-4">
-                <p className="text-2xl font-semibold text-foreground">
-                  {metric.display}
-                </p>
-                {metric.caption ? (
-                  <p className="shrink-0 text-xs text-muted-foreground">
-                    {metric.caption}
-                  </p>
-                ) : null}
+                <p className="text-2xl font-semibold text-foreground">{metric.display}</p>
+                {metric.caption ? <p className="shrink-0 text-xs text-muted-foreground">{metric.caption}</p> : null}
               </div>
             </CardContent>
           </Card>
diff --git a/app/(dashboard)/_components/performance-usage-card.tsx b/app/(dashboard)/_components/performance-usage-card.tsx
index 8e4c6f78..1799149a 100644
--- a/app/(dashboard)/_components/performance-usage-card.tsx
+++ b/app/(dashboard)/_components/performance-usage-card.tsx
@@ -1,13 +1,7 @@
 "use client"
 
 import { RiDatabase2Line } from "@remixicon/react"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Progress } from "@/components/ui/progress"
 import { niceBytes } from "@/lib/functions"
 
@@ -38,48 +32,28 @@ export function PerformanceUsageCard({
             {t("Last Scan Activity")}: {lastUpdatedLabel}
           </span>
         </div>
-        <CardDescription>
-          {t(
-            "Monitor overall storage usage and recent scanner activity at a glance."
-          )}
-        </CardDescription>
+        <CardDescription>{t("Monitor overall storage usage and recent scanner activity at a glance.")}</CardDescription>
       </CardHeader>
       <CardContent className="space-y-6">
         <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
           <div className="flex items-center gap-4">
-            <RiDatabase2Line
-              className="size-6 text-primary"
-              aria-hidden
-            />
+            <RiDatabase2Line className="size-6 text-primary" aria-hidden />
             <div>
-              <p className="text-sm text-muted-foreground">
-                {t("Used Capacity")}
-              </p>
-              <p className="text-2xl font-semibold text-foreground">
-                {niceBytes(String(totalUsedCapacity))}
-              </p>
+              <p className="text-sm text-muted-foreground">{t("Used Capacity")}</p>
+              <p className="text-2xl font-semibold text-foreground">{niceBytes(String(totalUsedCapacity))}</p>
             </div>
           </div>
           <div className="w-full max-w-xs space-y-2">
             <Progress value={usedPercent} className="h-2" />
-            <p className="text-right text-xs text-muted-foreground">
-              {usedPercent.toFixed(0)}%
-            </p>
+            <p className="text-right text-xs text-muted-foreground">{usedPercent.toFixed(0)}%</p>
           </div>
         </div>
 
         <div className="grid gap-3 sm:grid-cols-3">
           {usageStats.map((item) => (
-            <div
-              key={item.label}
-              className="rounded-lg border bg-muted/40 p-4"
-            >
-              <p className="text-xs uppercase text-muted-foreground">
-                {item.label}
-              </p>
-              <p className="mt-2 text-sm font-medium text-foreground">
-                {item.value}
-              </p>
+            <div key={item.label} className="rounded-lg border bg-muted/40 p-4">
+              <p className="text-xs uppercase text-muted-foreground">{item.label}</p>
+              <p className="mt-2 text-sm font-medium text-foreground">{item.value}</p>
             </div>
           ))}
         </div>
diff --git a/app/(dashboard)/access-keys/page.tsx b/app/(dashboard)/access-keys/page.tsx
index ca3b9a7b..c1c98fcb 100644
--- a/app/(dashboard)/access-keys/page.tsx
+++ b/app/(dashboard)/access-keys/page.tsx
@@ -42,7 +42,10 @@ export default function AccessKeysPage() {
   const [editItemOpen, setEditItemOpen] = useState(false)
   const [editItemRow, setEditItemRow] = useState<RowData | null>(null)
   const [noticeOpen, setNoticeOpen] = useState(false)
-  const [noticeData, setNoticeData] = useState<{ credentials?: { accessKey?: string; secretKey?: string }; url?: string } | null>(null)
+  const [noticeData, setNoticeData] = useState<{
+    credentials?: { accessKey?: string; secretKey?: string }
+    url?: string
+  } | null>(null)
 
   const listUserAccounts = async () => {
     setLoading(true)
@@ -72,16 +75,13 @@ export default function AccessKeysPage() {
     {
       accessorKey: "accessKey",
       header: () => t("Access Key"),
-      cell: ({ row }) => (
-        <span className="font-mono text-sm">{row.original.accessKey}</span>
-      ),
+      cell: ({ row }) => <span className="font-mono text-sm">{row.original.accessKey}</span>,
     },
     {
       accessorKey: "expiration",
       header: () => t("Expiration"),
       cell: ({ row }) =>
-        row.original.expiration &&
-        row.original.expiration !== "9999-01-01T00:00:00Z"
+        row.original.expiration && row.original.expiration !== "9999-01-01T00:00:00Z"
           ? dayjs(row.original.expiration).format("YYYY-MM-DD HH:mm")
           : "-",
     },
@@ -89,14 +89,8 @@ export default function AccessKeysPage() {
       accessorKey: "accountStatus",
       header: () => t("Status"),
       cell: ({ row }) => (
-        <Badge
-          variant={
-            row.original.accountStatus === "on" ? "secondary" : "destructive"
-          }
-        >
-          {row.original.accountStatus === "on"
-            ? t("Available")
-            : t("Disabled")}
+        <Badge variant={row.original.accountStatus === "on" ? "secondary" : "destructive"}>
+          {row.original.accountStatus === "on" ? t("Available") : t("Disabled")}
         </Badge>
       ),
     },
@@ -118,19 +112,11 @@ export default function AccessKeysPage() {
       meta: { width: 200 },
       cell: ({ row }) => (
         <div className="flex justify-center gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => openEditItem(row.original)}
-          >
+          <Button variant="outline" size="sm" onClick={() => openEditItem(row.original)}>
             <RiEdit2Line className="size-4" />
             <span>{t("Edit")}</span>
           </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => confirmDeleteSingle(row.original)}
-          >
+          <Button variant="outline" size="sm" onClick={() => confirmDeleteSingle(row.original)}>
             <RiDeleteBin5Line className="size-4" />
             <span>{t("Delete")}</span>
           </Button>
@@ -222,11 +208,7 @@ export default function AccessKeysPage() {
               className="max-w-xs"
             />
             {selectedKeys.length > 0 && (
-              <Button
-                variant="outline"
-                disabled={!selectedKeys.length}
-                onClick={deleteSelected}
-              >
+              <Button variant="outline" disabled={!selectedKeys.length} onClick={deleteSelected}>
                 <RiDeleteBin5Line className="size-4" />
                 <span>{t("Delete Selected")}</span>
               </Button>
@@ -267,12 +249,7 @@ export default function AccessKeysPage() {
         onSuccess={listUserAccounts}
       />
 
-      <UserNotice
-        open={noticeOpen}
-        onOpenChange={setNoticeOpen}
-        data={noticeData}
-        onClose={handleNoticeClose}
-      />
+      <UserNotice open={noticeOpen} onOpenChange={setNoticeOpen} data={noticeData} onClose={handleNoticeClose} />
     </Page>
   )
 }
diff --git a/app/(dashboard)/browser/[bucket]/[[...key]]/page.tsx b/app/(dashboard)/browser/[bucket]/[[...key]]/page.tsx
index bde2a3ec..3ea3dd47 100644
--- a/app/(dashboard)/browser/[bucket]/[[...key]]/page.tsx
+++ b/app/(dashboard)/browser/[bucket]/[[...key]]/page.tsx
@@ -59,10 +59,7 @@ export default function BucketBrowserPage({ params }: PageProps) {
       })
   }, [bucketName, headBucket, message, router, t])
 
-  const bucketPath = React.useCallback(
-    (path?: string | string[]) => buildBucketPath(bucketName, path),
-    [bucketName]
-  )
+  const bucketPath = React.useCallback((path?: string | string[]) => buildBucketPath(bucketName, path), [bucketName])
 
   const handlePathClick = (path: string) => {
     router.push(bucketPath(path))
@@ -99,11 +96,7 @@ export default function BucketBrowserPage({ params }: PageProps) {
           >
             {bucketName}
           </h1>
-          <ObjectPathLinks
-            objectKey={keyPath}
-            bucketName={bucketName}
-            onClick={handlePathClick}
-          />
+          <ObjectPathLinks objectKey={keyPath} bucketName={bucketName} onClick={handlePathClick} />
         </div>
       </PageHeader>
 
@@ -118,10 +111,7 @@ export default function BucketBrowserPage({ params }: PageProps) {
             refreshTrigger={refreshTrigger}
           />
         ) : (
-          <ObjectView
-            bucketName={bucketName}
-            objectKey={keyPath}
-          />
+          <ObjectView bucketName={bucketName} objectKey={keyPath} />
         )}
       </div>
 
diff --git a/app/(dashboard)/browser/page.tsx b/app/(dashboard)/browser/page.tsx
index 7feef339..03506424 100644
--- a/app/(dashboard)/browser/page.tsx
+++ b/app/(dashboard)/browser/page.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useState, useEffect, useCallback, useMemo, useRef } from "react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
 import { useTranslation } from "react-i18next"
@@ -12,6 +12,7 @@ import { PageHeader } from "@/components/page-header"
 import { DataTable } from "@/components/data-table/data-table"
 import { useDataTable } from "@/hooks/use-data-table"
 import { BucketNewForm } from "@/components/buckets/new-form"
+import { Spinner } from "@/components/ui/spinner"
 import { useBucket } from "@/hooks/use-bucket"
 import { useObject } from "@/hooks/use-object"
 import { useSystem } from "@/hooks/use-system"
@@ -38,68 +39,107 @@ export default function BrowserPage() {
   const dialog = useDialog()
   const { isAdmin } = useAuth()
   const { listBuckets, deleteBucket } = useBucket()
-  const systemApi = useSystem()
+  const { getDataUsageInfo } = useSystem()
 
   const [formVisible, setFormVisible] = useState(false)
   const [searchTerm, setSearchTerm] = useState("")
   const [data, setData] = useState<BucketRow[]>([])
   const [pending, setPending] = useState(true)
+  const [usageLoading, setUsageLoading] = useState(false)
+  const fetchIdRef = useRef(0)
 
-  const fetchBuckets = async () => {
-    setPending(true)
-    try {
-      const response = await listBuckets()
-      let bucketUsage: BucketUsageMap = {}
-
-      if (isAdmin) {
-        try {
-          const usage = (await systemApi.getDataUsageInfo()) as { buckets_usage?: BucketUsageMap }
-          bucketUsage = usage?.buckets_usage ?? {}
-        } catch {
-          // Non-admin or API not available
-        }
+  const loadBucketUsage = useCallback(
+    async (fetchId: number, bucketNames: string[]) => {
+      if (!isAdmin || bucketNames.length === 0) {
+        setUsageLoading(false)
+        return
       }
 
-      const buckets = ((response as { Buckets?: Array<{ Name?: string; CreationDate?: string }> })?.Buckets ?? [])
-        .map((item) => {
-          const name = item?.Name
-          if (!name) return null
+      try {
+        const usage = (await getDataUsageInfo()) as { buckets_usage?: BucketUsageMap }
+        if (fetchId !== fetchIdRef.current) return
+        const bucketUsage = usage?.buckets_usage ?? {}
 
-          const bucketRow: BucketRow = {
-            Name: name,
-            CreationDate: item?.CreationDate ? new Date(item.CreationDate).toISOString() : "",
-          }
-
-          if (isAdmin) {
-            const stats = bucketUsage[name]
+        setData((prev) =>
+          prev.map((row) => {
+            const stats = bucketUsage[row.Name]
             const objectsCount = typeof stats?.objects_count === "number" ? stats.objects_count : 0
             const totalSize = typeof stats?.size === "number" ? stats.size : 0
-            bucketRow.Count = objectsCount
-            bucketRow.Size = niceBytes(String(totalSize))
-          }
-
-          return bucketRow
-        })
-        .filter((bucket): bucket is BucketRow => bucket !== null)
-        .sort((a, b) => a.Name.localeCompare(b.Name))
-
-      setData(buckets)
-    } catch (error) {
-      console.error("Failed to fetch buckets:", error)
-      setData([])
-    } finally {
-      setPending(false)
-    }
-  }
+            return {
+              ...row,
+              Count: objectsCount,
+              Size: niceBytes(String(totalSize)),
+            }
+          }),
+        )
+      } catch {
+        if (fetchId !== fetchIdRef.current) return
+      } finally {
+        if (fetchId === fetchIdRef.current) {
+          setUsageLoading(false)
+        }
+      }
+    },
+    [getDataUsageInfo, isAdmin],
+  )
+
+  const fetchBuckets = useCallback(
+    async (options?: { force?: boolean }) => {
+      const fetchId = fetchIdRef.current + 1
+      fetchIdRef.current = fetchId
+      setPending(true)
+      try {
+        const response = await listBuckets(options)
+        if (fetchId !== fetchIdRef.current) return
+
+        const buckets = ((response as { Buckets?: Array<{ Name?: string; CreationDate?: string }> })?.Buckets ?? [])
+          .map((item) => {
+            const name = item?.Name
+            if (!name) return null
+
+            const bucketRow: BucketRow = {
+              Name: name,
+              CreationDate: item?.CreationDate ? new Date(item.CreationDate).toISOString() : "",
+            }
+
+            return bucketRow
+          })
+          .filter((bucket): bucket is BucketRow => bucket !== null)
+          .sort((a, b) => a.Name.localeCompare(b.Name))
+
+        setData(buckets)
+        setPending(false)
+
+        if (isAdmin) {
+          setUsageLoading(true)
+          void loadBucketUsage(
+            fetchId,
+            buckets.map((bucket) => bucket.Name),
+          )
+        } else {
+          setUsageLoading(false)
+        }
+      } catch (error) {
+        if (fetchId !== fetchIdRef.current) return
+        console.error("Failed to fetch buckets:", error)
+        setData([])
+      } finally {
+        if (fetchId === fetchIdRef.current) {
+          setPending(false)
+        }
+      }
+    },
+    [isAdmin, listBuckets, loadBucketUsage],
+  )
 
   useEffect(() => {
     fetchBuckets()
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- run when isAdmin changes
-  }, [isAdmin])
+  }, [fetchBuckets])
 
-  const filteredData = searchTerm
-    ? data.filter((bucket) => bucket.Name.toLowerCase().includes(searchTerm.toLowerCase()))
-    : data
+  const filteredData = useMemo(
+    () => (searchTerm ? data.filter((bucket) => bucket.Name.toLowerCase().includes(searchTerm.toLowerCase())) : data),
+    [data, searchTerm],
+  )
 
   const objectApi = useObject("")
 
@@ -120,8 +160,7 @@ export default function BrowserPage() {
     {
       header: () => t("Creation Date"),
       accessorKey: "CreationDate",
-      cell: ({ row }) =>
-        dayjs(row.original.CreationDate).format("YYYY-MM-DD HH:mm:ss"),
+      cell: ({ row }) => dayjs(row.original.CreationDate).format("YYYY-MM-DD HH:mm:ss"),
     },
   ]
 
@@ -130,12 +169,21 @@ export default function BrowserPage() {
       {
         header: () => t("Object Count"),
         accessorKey: "Count",
-        cell: ({ row }) => row.original.Count?.toLocaleString() ?? "0",
+        cell: ({ row }) =>
+          typeof row.original.Count === "number" ? (
+            row.original.Count.toLocaleString()
+          ) : usageLoading ? (
+            <Spinner className="size-3 text-muted-foreground" />
+          ) : (
+            "--"
+          ),
       },
       {
         header: () => t("Size"),
         accessorKey: "Size",
-      }
+        cell: ({ row }) =>
+          row.original.Size ?? (usageLoading ? <Spinner className="size-3 text-muted-foreground" /> : "--"),
+      },
     )
   }
 
@@ -149,18 +197,12 @@ export default function BrowserPage() {
         <Button
           variant="outline"
           size="sm"
-          onClick={() =>
-            router.push(`/buckets/${encodeURIComponent(row.original.Name)}`)
-          }
+          onClick={() => router.push(`/buckets/${encodeURIComponent(row.original.Name)}`)}
         >
           <RiSettings5Line className="size-4" />
           <span>{t("Settings")}</span>
         </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => confirmDelete(row.original)}
-        >
+        <Button variant="outline" size="sm" onClick={() => confirmDelete(row.original)}>
           <RiDeleteBin5Line className="size-4" />
           <span>{t("Delete")}</span>
         </Button>
@@ -177,7 +219,7 @@ export default function BrowserPage() {
 
   const handleFormClosed = (value: boolean) => {
     setFormVisible(value)
-    if (!value) fetchBuckets()
+    if (!value) fetchBuckets({ force: true })
   }
 
   const confirmDelete = (row: BucketRow) => {
@@ -204,9 +246,11 @@ export default function BrowserPage() {
     try {
       await deleteBucket(row.Name)
       message.success(t("Delete Success"))
-      await fetchBuckets()
+      await fetchBuckets({ force: true })
     } catch (error: unknown) {
-      message.error((error as { response?: { data?: { message?: string } } })?.response?.data?.message || t("Delete Failed"))
+      message.error(
+        (error as { response?: { data?: { message?: string } } })?.response?.data?.message || t("Delete Failed"),
+      )
     }
   }
 
@@ -226,7 +270,7 @@ export default function BrowserPage() {
               <RiAddLine className="size-4" />
               <span>{t("Create Bucket")}</span>
             </Button>
-            <Button variant="outline" onClick={() => fetchBuckets()}>
+            <Button variant="outline" onClick={() => fetchBuckets({ force: true })}>
               <RiRefreshLine className="size-4" />
               <span>{t("Refresh")}</span>
             </Button>
diff --git a/app/(dashboard)/buckets/[key]/page.tsx b/app/(dashboard)/buckets/[key]/page.tsx
index f368c837..ba65ad13 100644
--- a/app/(dashboard)/buckets/[key]/page.tsx
+++ b/app/(dashboard)/buckets/[key]/page.tsx
@@ -64,25 +64,19 @@ export default function BucketSettingsPage() {
 
         {canViewLifecycle && (
           <TabsContent value="lifecycle" className="space-y-4 outline-none">
-            {bucketName ? (
-              <BucketLifecycleTab bucketName={bucketName} />
-            ) : null}
+            {bucketName ? <BucketLifecycleTab bucketName={bucketName} /> : null}
           </TabsContent>
         )}
 
         {canViewReplication && (
           <TabsContent value="replication" className="space-y-4 outline-none">
-            {bucketName ? (
-              <BucketReplicationTab bucketName={bucketName} />
-            ) : null}
+            {bucketName ? <BucketReplicationTab bucketName={bucketName} /> : null}
           </TabsContent>
         )}
 
         {canViewEvents && (
           <TabsContent value="events" className="space-y-4 outline-none">
-            {bucketName ? (
-              <BucketEventsTab bucketName={bucketName} />
-            ) : null}
+            {bucketName ? <BucketEventsTab bucketName={bucketName} /> : null}
           </TabsContent>
         )}
       </Tabs>
diff --git a/app/(dashboard)/events-target/page.tsx b/app/(dashboard)/events-target/page.tsx
index 94a46b09..2595fc31 100644
--- a/app/(dashboard)/events-target/page.tsx
+++ b/app/(dashboard)/events-target/page.tsx
@@ -3,11 +3,7 @@
 import * as React from "react"
 import { useState, useEffect, useCallback, useMemo } from "react"
 import { useTranslation } from "react-i18next"
-import {
-  RiAddLine,
-  RiRefreshLine,
-  RiDeleteBin5Line,
-} from "@remixicon/react"
+import { RiAddLine, RiRefreshLine, RiDeleteBin5Line } from "@remixicon/react"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { Page } from "@/components/page"
@@ -59,9 +55,7 @@ export default function EventsTargetPage() {
     if (!searchTerm) return data
     const term = searchTerm.toLowerCase()
     return data.filter(
-      (row) =>
-        row.account_id?.toLowerCase().includes(term) ||
-        row.service?.toLowerCase().includes(term)
+      (row) => row.account_id?.toLowerCase().includes(term) || row.service?.toLowerCase().includes(term),
     )
   }, [data, searchTerm])
 
@@ -70,31 +64,19 @@ export default function EventsTargetPage() {
       {
         accessorKey: "account_id",
         header: () => t("Event Destinations"),
-        cell: ({ row }) => (
-          <span className="font-mono text-sm">
-            {row.original.account_id}
-          </span>
-        ),
+        cell: ({ row }) => <span className="font-mono text-sm">{row.original.account_id}</span>,
       },
       {
         accessorKey: "service",
         header: () => t("Type"),
-        cell: ({ row }) => (
-          <span>{row.original.service}</span>
-        ),
+        cell: ({ row }) => <span>{row.original.service}</span>,
       },
       {
         accessorKey: "status",
         header: () => t("Status"),
         cell: ({ row }) => (
-          <Badge
-            variant={
-              row.original.status === "enable" ? "secondary" : "outline"
-            }
-          >
-            {row.original.status === "enable"
-              ? t("Enabled")
-              : row.original.status || "-"}
+          <Badge variant={row.original.status === "enable" ? "secondary" : "outline"}>
+            {row.original.status === "enable" ? t("Enabled") : row.original.status || "-"}
           </Badge>
         ),
       },
@@ -106,11 +88,7 @@ export default function EventsTargetPage() {
         meta: { width: 90 },
         cell: ({ row }) => (
           <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => confirmDelete(row.original)}
-            >
+            <Button variant="outline" size="sm" onClick={() => confirmDelete(row.original)}>
               <RiDeleteBin5Line className="size-4" aria-hidden />
               <span>{t("Delete")}</span>
             </Button>
@@ -119,7 +97,7 @@ export default function EventsTargetPage() {
       },
     ],
     // eslint-disable-next-line react-hooks/exhaustive-deps -- confirmDelete used in cell, stable ref
-    [t]
+    [t],
   )
 
   const { table } = useDataTable<RowData>({
@@ -163,10 +141,7 @@ export default function EventsTargetPage() {
                 className="w-full"
               />
             </div>
-            <Button
-              variant="outline"
-              onClick={() => setNewFormOpen(true)}
-            >
+            <Button variant="outline" onClick={() => setNewFormOpen(true)}>
               <RiAddLine className="size-4" aria-hidden />
               <span>{t("Add Event Destination")}</span>
             </Button>
@@ -177,25 +152,17 @@ export default function EventsTargetPage() {
           </>
         }
       >
-        <h1 className="text-2xl font-bold">
-          {t("Event Destinations")}
-        </h1>
+        <h1 className="text-2xl font-bold">{t("Event Destinations")}</h1>
       </PageHeader>
 
       <DataTable
         table={table}
         isLoading={loading}
         emptyTitle={t("No Destinations")}
-        emptyDescription={t(
-          "Create an event destination to forward notifications."
-        )}
+        emptyDescription={t("Create an event destination to forward notifications.")}
       />
 
-      <EventsTargetNewForm
-        open={newFormOpen}
-        onOpenChange={setNewFormOpen}
-        onSuccess={loadData}
-      />
+      <EventsTargetNewForm open={newFormOpen} onOpenChange={setNewFormOpen} onSuccess={loadData} />
     </Page>
   )
 }
diff --git a/app/(dashboard)/events/page.tsx b/app/(dashboard)/events/page.tsx
index 0375d5df..0ea76ada 100644
--- a/app/(dashboard)/events/page.tsx
+++ b/app/(dashboard)/events/page.tsx
@@ -47,26 +47,28 @@ export default function EventsPage() {
           Filter?: { Key?: { FilterRules?: Array<{ Name: string; Value: string }> } }
         }>,
         type: NotificationItem["type"],
-        arnKey: "LambdaFunctionArn" | "QueueArn" | "TopicArn"
+        arnKey: "LambdaFunctionArn" | "QueueArn" | "TopicArn",
       ) => {
-        ;(configs ?? []).forEach((config: { Id?: string; Filter?: { Key?: { FilterRules?: Array<{ Name: string; Value: string }> } }; Events?: string[] }) => {
-          const prefix = config.Filter?.Key?.FilterRules?.find(
-            (r) => r.Name === "Prefix"
-          )?.Value
-          const suffix = config.Filter?.Key?.FilterRules?.find(
-            (r) => r.Name === "Suffix"
-          )?.Value
-          const arn = (config as Record<string, string>)[arnKey]
-          notifications.push({
-            id: config.Id ?? "",
-            type,
-            arn: arn ?? "",
-            events: config.Events ?? [],
-            prefix,
-            suffix,
-            filterRules: config.Filter?.Key?.FilterRules ?? [],
-          })
-        })
+        ;(configs ?? []).forEach(
+          (config: {
+            Id?: string
+            Filter?: { Key?: { FilterRules?: Array<{ Name: string; Value: string }> } }
+            Events?: string[]
+          }) => {
+            const prefix = config.Filter?.Key?.FilterRules?.find((r) => r.Name === "Prefix")?.Value
+            const suffix = config.Filter?.Key?.FilterRules?.find((r) => r.Name === "Suffix")?.Value
+            const arn = (config as Record<string, string>)[arnKey]
+            notifications.push({
+              id: config.Id ?? "",
+              type,
+              arn: arn ?? "",
+              events: config.Events ?? [],
+              prefix,
+              suffix,
+              filterRules: config.Filter?.Key?.FilterRules ?? [],
+            })
+          },
+        )
       }
 
       const r = response as {
@@ -75,21 +77,9 @@ export default function EventsPage() {
         TopicConfigurations?: unknown[]
       }
 
-      addFromConfig(
-        (r?.LambdaFunctionConfigurations ?? []) as never[],
-        "Lambda",
-        "LambdaFunctionArn"
-      )
-      addFromConfig(
-        (r?.QueueConfigurations ?? []) as never[],
-        "SQS",
-        "QueueArn"
-      )
-      addFromConfig(
-        (r?.TopicConfigurations ?? []) as never[],
-        "SNS",
-        "TopicArn"
-      )
+      addFromConfig((r?.LambdaFunctionConfigurations ?? []) as never[], "Lambda", "LambdaFunctionArn")
+      addFromConfig((r?.QueueConfigurations ?? []) as never[], "SQS", "QueueArn")
+      addFromConfig((r?.TopicConfigurations ?? []) as never[], "SNS", "TopicArn")
 
       setData(notifications)
     } catch (error) {
@@ -109,9 +99,7 @@ export default function EventsPage() {
       const confirmed = await new Promise<boolean>((resolve) => {
         dialog.warning({
           title: t("Confirm Delete"),
-          content: t(
-            "Are you sure you want to delete this notification configuration?"
-          ),
+          content: t("Are you sure you want to delete this notification configuration?"),
           positiveText: t("Delete"),
           negativeText: t("Cancel"),
           onPositiveClick: () => resolve(true),
@@ -124,10 +112,7 @@ export default function EventsPage() {
       try {
         setLoading(true)
         const currentResponse = await listBucketNotifications(bucketName)
-        const currentNotifications = (currentResponse ?? {}) as unknown as Record<
-          string,
-          unknown[]
-        >
+        const currentNotifications = (currentResponse ?? {}) as unknown as Record<string, unknown[]>
 
         const configKey =
           row.type === "Lambda"
@@ -135,9 +120,7 @@ export default function EventsPage() {
             : row.type === "SQS"
               ? "QueueConfigurations"
               : "TopicConfigurations"
-        const configs = (
-          currentNotifications as Record<string, Array<{ Id?: string }>>
-        )[configKey]
+        const configs = (currentNotifications as Record<string, Array<{ Id?: string }>>)[configKey]
         const updated = configs?.filter((c) => c.Id !== row.id) ?? []
 
         const newConfig = {
@@ -154,28 +137,15 @@ export default function EventsPage() {
         loadData()
       } catch (error) {
         console.error(t("Delete Failed"), error)
-        message.error(
-          `${t("Delete Failed")}: ${(error as Error).message ?? error}`
-        )
+        message.error(`${t("Delete Failed")}: ${(error as Error).message ?? error}`)
       } finally {
         setLoading(false)
       }
     },
-    [
-      bucketName,
-      dialog,
-      listBucketNotifications,
-      loadData,
-      message,
-      putBucketNotifications,
-      t,
-    ]
+    [bucketName, dialog, listBucketNotifications, loadData, message, putBucketNotifications, t],
   )
 
-  const columns = useMemo(
-    () => getEventsColumns(t, handleRowDelete),
-    [t, handleRowDelete]
-  )
+  const columns = useMemo(() => getEventsColumns(t, handleRowDelete), [t, handleRowDelete])
 
   const { table } = useDataTable<NotificationItem>({
     data,
@@ -194,21 +164,11 @@ export default function EventsPage() {
               placeholder={t("Please select bucket")}
               selectorClass="w-full"
             />
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setNewFormOpen(true)}
-              disabled={!bucketName}
-            >
+            <Button type="button" variant="outline" onClick={() => setNewFormOpen(true)} disabled={!bucketName}>
               <RiAddLine className="size-4" aria-hidden />
               <span>{t("Add Event Subscription")}</span>
             </Button>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={loadData}
-              disabled={loading}
-            >
+            <Button type="button" variant="outline" onClick={loadData} disabled={loading}>
               <RiRefreshLine className="size-4" aria-hidden />
               <span>{t("Refresh")}</span>
             </Button>
@@ -226,12 +186,7 @@ export default function EventsPage() {
       />
 
       {bucketName && (
-        <EventsNewForm
-          open={newFormOpen}
-          onOpenChange={setNewFormOpen}
-          bucketName={bucketName}
-          onSuccess={loadData}
-        />
+        <EventsNewForm open={newFormOpen} onOpenChange={setNewFormOpen} bucketName={bucketName} onSuccess={loadData} />
       )}
     </Page>
   )
diff --git a/app/(dashboard)/import-export/page.tsx b/app/(dashboard)/import-export/page.tsx
index e4f1f7a5..ca6c82a4 100644
--- a/app/(dashboard)/import-export/page.tsx
+++ b/app/(dashboard)/import-export/page.tsx
@@ -16,19 +16,8 @@ import { Button } from "@/components/ui/button"
 import { Page } from "@/components/page"
 import { PageHeader } from "@/components/page-header"
 import { UploadZone } from "@/components/upload-zone"
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@/components/ui/alert"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { useImportExport } from "@/hooks/use-import-export"
 import { useMessage } from "@/lib/feedback/message"
@@ -59,7 +48,7 @@ export default function ImportExportPage() {
       { key: "export" as const, label: t("Export") },
       { key: "import" as const, label: t("Import") },
     ],
-    [t]
+    [t],
   )
 
   const exportHighlights = useMemo(
@@ -73,7 +62,7 @@ export default function ImportExportPage() {
       },
       { label: "AK/SK", icon: RiKeyLine, iconClass: "text-orange-500" },
     ],
-    []
+    [],
   )
 
   const MAX_SIZE = 10 * 1024 * 1024
@@ -86,9 +75,7 @@ export default function ImportExportPage() {
   const validateFile = (file: File | null) => {
     if (!file) return false
     if (!file.name.toLowerCase().endsWith(".zip")) {
-      setUploadError(
-        t("Only ZIP files are supported, and file size should not exceed 10MB")
-      )
+      setUploadError(t("Only ZIP files are supported, and file size should not exceed 10MB"))
       return false
     }
     if (file.size > MAX_SIZE) {
@@ -144,11 +131,7 @@ export default function ImportExportPage() {
         >
           <TabsList className="justify-start overflow-x-auto">
             {tabs.map((tab) => (
-              <TabsTrigger
-                key={tab.key}
-                value={tab.key}
-                className="capitalize"
-              >
+              <TabsTrigger key={tab.key} value={tab.key} className="capitalize">
                 {tab.label}
               </TabsTrigger>
             ))}
@@ -159,25 +142,15 @@ export default function ImportExportPage() {
               <CardHeader className="space-y-1">
                 <CardTitle>{t("IAM Configuration Export")}</CardTitle>
                 <CardDescription>
-                  {t(
-                    "Export all IAM configurations including users, groups, policies, and access keys in a ZIP file."
-                  )}
+                  {t("Export all IAM configurations including users, groups, policies, and access keys in a ZIP file.")}
                 </CardDescription>
               </CardHeader>
               <CardContent className="space-y-6">
                 <div className="grid gap-4 sm:grid-cols-2">
                   {exportHighlights.map((item) => (
-                    <div
-                      key={item.label}
-                      className="flex items-center gap-3 rounded-md border bg-muted/40 p-3"
-                    >
-                      <item.icon
-                        className={`size-5 ${item.iconClass}`}
-                        aria-hidden
-                      />
-                      <span className="text-sm font-medium text-foreground">
-                        {t(item.label)}
-                      </span>
+                    <div key={item.label} className="flex items-center gap-3 rounded-md border bg-muted/40 p-3">
+                      <item.icon className={`size-5 ${item.iconClass}`} aria-hidden />
+                      <span className="text-sm font-medium text-foreground">{t(item.label)}</span>
                     </div>
                   ))}
                 </div>
@@ -186,9 +159,7 @@ export default function ImportExportPage() {
                   <RiInformationLine className="size-4" aria-hidden />
                   <AlertTitle>{t("Notice")}</AlertTitle>
                   <AlertDescription>
-                    {t(
-                      "The exported file contains sensitive information. Please keep it secure."
-                    )}
+                    {t("The exported file contains sensitive information. Please keep it secure.")}
                   </AlertDescription>
                 </Alert>
               </CardContent>
@@ -196,16 +167,9 @@ export default function ImportExportPage() {
                 <div className="text-sm text-muted-foreground">
                   {t("Download complete IAM configuration as ZIP file")}
                 </div>
-                <Button
-                  variant="default"
-                  size="lg"
-                  disabled={isLoading}
-                  onClick={handleExportIam}
-                >
+                <Button variant="default" size="lg" disabled={isLoading} onClick={handleExportIam}>
                   <RiDownload2Line className="size-4" aria-hidden />
-                  <span>
-                    {isLoading ? t("Exporting...") : t("Export Now")}
-                  </span>
+                  <span>{isLoading ? t("Exporting...") : t("Export Now")}</span>
                 </Button>
               </CardFooter>
             </Card>
@@ -215,50 +179,26 @@ export default function ImportExportPage() {
             <Card className="shadow-none">
               <CardHeader className="space-y-1">
                 <CardTitle>{t("IAM Configuration Import")}</CardTitle>
-                <CardDescription>
-                  {t(
-                    "Import IAM configurations from a previously exported ZIP file."
-                  )}
-                </CardDescription>
+                <CardDescription>{t("Import IAM configurations from a previously exported ZIP file.")}</CardDescription>
               </CardHeader>
               <CardContent className="space-y-4">
                 <div className="space-y-3">
-                  <UploadZone
-                    accept=".zip"
-                    disabled={isLoading}
-                    className="border-dashed"
-                    onChange={handleFileSelect}
-                  >
-                    <p className="text-base font-medium">
-                      {t("Click or drag ZIP file to this area to upload")}
-                    </p>
+                  <UploadZone accept=".zip" disabled={isLoading} className="border-dashed" onChange={handleFileSelect}>
+                    <p className="text-base font-medium">{t("Click or drag ZIP file to this area to upload")}</p>
                     <p className="text-sm text-muted-foreground">
-                      {t(
-                        "Only ZIP files are supported, and file size should not exceed 10MB"
-                      )}
+                      {t("Only ZIP files are supported, and file size should not exceed 10MB")}
                     </p>
                   </UploadZone>
-                  {uploadError && (
-                    <p className="text-sm text-destructive">{uploadError}</p>
-                  )}
+                  {uploadError && <p className="text-sm text-destructive">{uploadError}</p>}
 
                   {selectedFile && (
                     <Card className="border-dashed bg-muted/30 shadow-none">
                       <CardContent className="flex items-start justify-between gap-3 py-4">
                         <div>
-                          <p className="text-sm font-medium text-foreground">
-                            {selectedFile.name}
-                          </p>
-                          <p className="text-xs text-muted-foreground">
-                            {formatSize(selectedFile.size)}
-                          </p>
+                          <p className="text-sm font-medium text-foreground">{selectedFile.name}</p>
+                          <p className="text-xs text-muted-foreground">{formatSize(selectedFile.size)}</p>
                         </div>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className="text-destructive"
-                          onClick={clearSelectedFile}
-                        >
+                        <Button variant="ghost" size="icon" className="text-destructive" onClick={clearSelectedFile}>
                           <RiCloseLine className="size-4" aria-hidden />
                         </Button>
                       </CardContent>
@@ -274,16 +214,9 @@ export default function ImportExportPage() {
                       })
                     : t("Please select a ZIP file to import")}
                 </div>
-                <Button
-                  variant="default"
-                  size="lg"
-                  disabled={isLoading || !selectedFile}
-                  onClick={handleImportIam}
-                >
+                <Button variant="default" size="lg" disabled={isLoading || !selectedFile} onClick={handleImportIam}>
                   <RiUpload2Line className="size-4" aria-hidden />
-                  <span>
-                    {isLoading ? t("Importing...") : t("Import Now")}
-                  </span>
+                  <span>{isLoading ? t("Importing...") : t("Import Now")}</span>
                 </Button>
               </CardFooter>
             </Card>
diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx
index a3c3f436..2c6690e8 100644
--- a/app/(dashboard)/layout.tsx
+++ b/app/(dashboard)/layout.tsx
@@ -6,11 +6,7 @@ import { DashboardAuthGuard } from "@/components/dashboard-auth-guard"
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
 
-export default async function DashboardLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
   const cookieStore = await cookies()
   const sidebarState = cookieStore.get(SIDEBAR_COOKIE_NAME)?.value
   const defaultOpen = sidebarState !== "false"
diff --git a/app/(dashboard)/lifecycle/page.tsx b/app/(dashboard)/lifecycle/page.tsx
index 7450955a..9f7d76ef 100644
--- a/app/(dashboard)/lifecycle/page.tsx
+++ b/app/(dashboard)/lifecycle/page.tsx
@@ -1,94 +1,87 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import { useState, useEffect, useCallback, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { RiAddLine, RiRefreshLine, RiDeleteBin5Line } from "@remixicon/react";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Page } from "@/components/page";
-import { PageHeader } from "@/components/page-header";
-import { BucketSelector } from "@/components/buckets/selector";
-import { DataTable } from "@/components/data-table/data-table";
-import { useDataTable } from "@/hooks/use-data-table";
-import { useBucket } from "@/hooks/use-bucket";
-import { LifecycleNewForm } from "@/components/lifecycle/new-form";
-import { useDialog } from "@/lib/feedback/dialog";
-import { useMessage } from "@/lib/feedback/message";
-import type { ColumnDef } from "@tanstack/react-table";
+import * as React from "react"
+import { useState, useEffect, useCallback, useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { RiAddLine, RiRefreshLine, RiDeleteBin5Line } from "@remixicon/react"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Page } from "@/components/page"
+import { PageHeader } from "@/components/page-header"
+import { BucketSelector } from "@/components/buckets/selector"
+import { DataTable } from "@/components/data-table/data-table"
+import { useDataTable } from "@/hooks/use-data-table"
+import { useBucket } from "@/hooks/use-bucket"
+import { LifecycleNewForm } from "@/components/lifecycle/new-form"
+import { useDialog } from "@/lib/feedback/dialog"
+import { useMessage } from "@/lib/feedback/message"
+import type { ColumnDef } from "@tanstack/react-table"
 
 interface LifecycleRule {
-  ID?: string;
-  Status?: string;
+  ID?: string
+  Status?: string
   Filter?: {
-    Prefix?: string;
-    Tag?: { Key: string; Value: string };
+    Prefix?: string
+    Tag?: { Key: string; Value: string }
     And?: {
-      Prefix?: string;
-      Tags?: Array<{ Key: string; Value: string }>;
-    };
-  };
+      Prefix?: string
+      Tags?: Array<{ Key: string; Value: string }>
+    }
+  }
   Expiration?: {
-    Days?: number;
-    Date?: string;
-    StorageClass?: string;
-    ExpiredObjectDeleteMarker?: boolean;
-  };
-  NoncurrentVersionExpiration?: { NoncurrentDays?: number };
-  Transitions?: Array<{ Days?: number; StorageClass?: string }>;
+    Days?: number
+    Date?: string
+    StorageClass?: string
+    ExpiredObjectDeleteMarker?: boolean
+  }
+  NoncurrentVersionExpiration?: { NoncurrentDays?: number }
+  Transitions?: Array<{ Days?: number; StorageClass?: string }>
   NoncurrentVersionTransitions?: Array<{
-    NoncurrentDays?: number;
-    StorageClass?: string;
-  }>;
+    NoncurrentDays?: number
+    StorageClass?: string
+  }>
 }
 
 export default function LifecyclePage() {
-  const { t } = useTranslation();
-  const message = useMessage();
-  const dialog = useDialog();
-  const {
-    getBucketLifecycleConfiguration,
-    deleteBucketLifecycle,
-    putBucketLifecycleConfiguration,
-  } = useBucket();
+  const { t } = useTranslation()
+  const message = useMessage()
+  const dialog = useDialog()
+  const { getBucketLifecycleConfiguration, deleteBucketLifecycle, putBucketLifecycleConfiguration } = useBucket()
 
-  const [bucketName, setBucketName] = useState<string | null>(null);
-  const [data, setData] = useState<LifecycleRule[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [newFormOpen, setNewFormOpen] = useState(false);
+  const [bucketName, setBucketName] = useState<string | null>(null)
+  const [data, setData] = useState<LifecycleRule[]>([])
+  const [loading, setLoading] = useState(false)
+  const [newFormOpen, setNewFormOpen] = useState(false)
 
   const loadData = useCallback(async () => {
     if (!bucketName) {
-      setData([]);
-      return;
+      setData([])
+      return
     }
-    setLoading(true);
+    setLoading(true)
     try {
-      const response = await getBucketLifecycleConfiguration(bucketName);
+      const response = await getBucketLifecycleConfiguration(bucketName)
       const rules = [...(response?.Rules ?? [])]
         .map((r) => r as LifecycleRule)
-        .sort((a, b) => (a.ID ?? "").localeCompare(b.ID ?? ""));
-      setData(rules);
+        .sort((a, b) => (a.ID ?? "").localeCompare(b.ID ?? ""))
+      setData(rules)
     } catch {
-      setData([]);
+      setData([])
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  }, [bucketName, getBucketLifecycleConfiguration]);
+  }, [bucketName, getBucketLifecycleConfiguration])
 
   useEffect(() => {
-    loadData();
-  }, [loadData]);
+    loadData()
+  }, [loadData])
 
   const columns: ColumnDef<LifecycleRule>[] = useMemo(
     () => [
       {
         id: "type",
         header: () => t("Type"),
-        accessorFn: (row) =>
-          row.Transitions || row.NoncurrentVersionTransitions
-            ? "Transition"
-            : "Expire",
+        accessorFn: (row) => (row.Transitions || row.NoncurrentVersionTransitions ? "Transition" : "Expire"),
       },
       {
         id: "version",
@@ -101,22 +94,18 @@ export default function LifecyclePage() {
       {
         id: "deleteMarker",
         header: () => t("Expiration Delete Mark"),
-        accessorFn: (row) =>
-          row.Expiration?.ExpiredObjectDeleteMarker ? t("On") : t("Off"),
+        accessorFn: (row) => (row.Expiration?.ExpiredObjectDeleteMarker ? t("On") : t("Off")),
       },
       {
         id: "tier",
         header: () => t("Tier"),
         accessorFn: (row) =>
-          row.Transitions?.[0]?.StorageClass ||
-          row.NoncurrentVersionTransitions?.[0]?.StorageClass ||
-          "--",
+          row.Transitions?.[0]?.StorageClass || row.NoncurrentVersionTransitions?.[0]?.StorageClass || "--",
       },
       {
         id: "prefix",
         header: () => t("Prefix"),
-        accessorFn: (row) =>
-          row.Filter?.Prefix || row.Filter?.And?.Prefix || "",
+        accessorFn: (row) => row.Filter?.Prefix || row.Filter?.And?.Prefix || "",
       },
       {
         id: "timeCycle",
@@ -133,11 +122,7 @@ export default function LifecyclePage() {
         header: () => t("Status"),
         accessorFn: (row) => row.Status ?? "-",
         cell: ({ row }) => (
-          <Badge
-            variant={
-              row.original.Status === "Enabled" ? "secondary" : "destructive"
-            }
-          >
+          <Badge variant={row.original.Status === "Enabled" ? "secondary" : "destructive"}>
             {row.original.Status ?? "-"}
           </Badge>
         ),
@@ -148,11 +133,7 @@ export default function LifecyclePage() {
         enableSorting: false,
         cell: ({ row }) => (
           <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => confirmDelete(row.original)}
-            >
+            <Button variant="outline" size="sm" onClick={() => confirmDelete(row.original)}>
               <RiDeleteBin5Line className="size-4" aria-hidden />
               <span>{t("Delete")}</span>
             </Button>
@@ -162,13 +143,13 @@ export default function LifecyclePage() {
     ],
     // eslint-disable-next-line react-hooks/exhaustive-deps -- confirmDelete used in cell, stable ref
     [t],
-  );
+  )
 
   const { table } = useDataTable<LifecycleRule>({
     data,
     columns,
     getRowId: (row) => row.ID ?? JSON.stringify(row),
-  });
+  })
 
   const confirmDelete = (row: LifecycleRule) => {
     dialog.error({
@@ -177,43 +158,35 @@ export default function LifecyclePage() {
       positiveText: t("Confirm"),
       negativeText: t("Cancel"),
       onPositiveClick: () => handleRowDelete(row),
-    });
-  };
+    })
+  }
 
   const handleRowDelete = async (row: LifecycleRule) => {
-    const remaining = data.filter((item) => item.ID !== row.ID);
-    if (!bucketName) return;
+    const remaining = data.filter((item) => item.ID !== row.ID)
+    if (!bucketName) return
 
     try {
       if (remaining.length === 0) {
-        await deleteBucketLifecycle(bucketName);
+        await deleteBucketLifecycle(bucketName)
       } else {
         await putBucketLifecycleConfiguration(bucketName, {
           Rules: remaining,
-        });
+        })
       }
-      message.success(t("Delete Success"));
-      loadData();
+      message.success(t("Delete Success"))
+      loadData()
     } catch (error) {
-      message.error((error as Error).message || t("Delete Failed"));
+      message.error((error as Error).message || t("Delete Failed"))
     }
-  };
+  }
 
   return (
     <Page>
       <PageHeader
         actions={
           <>
-            <BucketSelector
-              value={bucketName}
-              onChange={setBucketName}
-              placeholder={t("Please select bucket")}
-            />
-            <Button
-              variant="outline"
-              onClick={() => setNewFormOpen(true)}
-              disabled={!bucketName}
-            >
+            <BucketSelector value={bucketName} onChange={setBucketName} placeholder={t("Please select bucket")} />
+            <Button variant="outline" onClick={() => setNewFormOpen(true)} disabled={!bucketName}>
               <RiAddLine className="size-4" aria-hidden />
               <span>{t("Add Lifecycle Rule")}</span>
             </Button>
@@ -231,9 +204,7 @@ export default function LifecyclePage() {
         table={table}
         isLoading={loading}
         emptyTitle={t("No Data")}
-        emptyDescription={t(
-          "Create lifecycle rules to automate object transitions and expiration.",
-        )}
+        emptyDescription={t("Create lifecycle rules to automate object transitions and expiration.")}
       />
 
       {bucketName && (
@@ -245,5 +216,5 @@ export default function LifecyclePage() {
         />
       )}
     </Page>
-  );
+  )
 }
diff --git a/app/(dashboard)/page.tsx b/app/(dashboard)/page.tsx
index dc83e272..3af0145e 100644
--- a/app/(dashboard)/page.tsx
+++ b/app/(dashboard)/page.tsx
@@ -1,234 +1,5 @@
-"use client"
+import { redirect } from "next/navigation"
 
-import * as React from "react"
-import { Page } from "@/components/page"
-import { PageHeader } from "@/components/page-header"
-import { Button } from "@/components/ui/button"
-import { Spinner } from "@/components/ui/spinner"
-import { usePerformanceData } from "@/hooks/use-performance-data"
-import { niceBytes } from "@/lib/functions"
-import { RiArchiveDrawerFill, RiArchiveLine, RiHardDrive2Line, RiListSettingsFill, RiRefreshLine, RiSecurePaymentFill, RiStackLine } from "@remixicon/react"
-import dayjs from "dayjs"
-import relativeTime from "dayjs/plugin/relativeTime"
-import { useMemo } from "react"
-import { useTranslation } from "react-i18next"
-import { PerformanceSummaryCards } from "./_components/performance-summary-cards"
-import { PerformanceUsageCard } from "./_components/performance-usage-card"
-import { PerformanceInfrastructureCard } from "./_components/performance-infrastructure-card"
-import { PerformanceBackendCard } from "./_components/performance-backend-card"
-import { PerformanceServerList } from "./_components/performance-server-list"
-
-dayjs.extend(relativeTime)
-
-export default function PerformancePage() {
-  const { t } = useTranslation()
-  const {
-    systemInfo,
-    metricsInfo,
-    datausageinfo,
-    storageinfo,
-    loading,
-    error,
-    refetch,
-  } = usePerformanceData()
-
-  const numberFormatter = useMemo(() => new Intl.NumberFormat(), [])
-
-  const storageBackend = useMemo(
-    () =>
-      storageinfo?.backend ??
-      (storageinfo as { Backend?: typeof storageinfo.backend })?.Backend,
-    [storageinfo]
-  )
-
-  const usedPercent = useMemo(() => {
-    const total = Number(datausageinfo.total_capacity || 0)
-    if (!total) return 0
-    const used = Number(datausageinfo.total_used_capacity || 0)
-    return Math.min(100, Math.max(0, (used / total) * 100))
-  }, [datausageinfo])
-
-  const lastUpdatedLabel = useMemo(() => {
-    const last = metricsInfo?.aggregated?.scanner?.current_started
-    const time = dayjs(last)
-    return time.isValid() ? time.fromNow() : "--"
-  }, [metricsInfo])
-
-  const summaryMetrics = useMemo(
-    () => [
-      {
-        label: t("Buckets"),
-        display: numberFormatter.format(systemInfo?.buckets?.count ?? 0),
-        icon: RiArchiveLine,
-        caption: null as string | null,
-        href: "/browser",
-      },
-      {
-        label: t("Objects"),
-        display: numberFormatter.format(systemInfo?.objects?.count ?? 0),
-        icon: RiStackLine,
-        caption: null as string | null,
-        href: "/browser",
-      },
-      {
-        label: t("Total Capacity"),
-        display: datausageinfo.total_capacity
-          ? niceBytes(String(datausageinfo.total_capacity))
-          : "--",
-        icon: RiHardDrive2Line,
-        caption: datausageinfo.total_used_capacity
-          ? `${t("Used")}: ${niceBytes(String(datausageinfo.total_used_capacity))}`
-          : null,
-        href: undefined as string | undefined,
-      },
-    ],
-    [systemInfo, datausageinfo, numberFormatter, t]
-  )
-
-  const fromLastStartTime = useMemo(() => {
-    const times =
-      metricsInfo?.aggregated?.scanner?.cycle_complete_times || []
-    if (!times.length) return "--"
-    const start = dayjs(times[times.length - 1])
-    return dayjs().from(start)
-  }, [metricsInfo])
-
-  const fromLastScanTime = useMemo(() => {
-    const start = dayjs(metricsInfo?.aggregated?.scanner?.current_started)
-    if (!start.isValid()) return "--"
-    return dayjs().from(start)
-  }, [metricsInfo])
-
-  const lastScanTime = useMemo(() => {
-    const currentStart = dayjs(
-      metricsInfo?.aggregated?.scanner?.current_started
-    )
-    const cycleTimes =
-      metricsInfo?.aggregated?.scanner?.cycle_complete_times || []
-    if (!currentStart.isValid()) return "--"
-    const lastComplete = dayjs(cycleTimes[cycleTimes.length - 1])
-    return lastComplete.isValid() && currentStart.isBefore(lastComplete)
-      ? lastComplete.from(currentStart)
-      : dayjs().from(currentStart)
-  }, [metricsInfo])
-
-  const usageStats = useMemo(
-    () => [
-      { label: t("Last Normal Operation"), value: fromLastStartTime },
-      { label: t("Last Scan Activity"), value: fromLastScanTime },
-      { label: t("Uptime"), value: lastScanTime },
-    ],
-    [t, fromLastStartTime, fromLastScanTime, lastScanTime]
-  )
-
-  const onlineServers = useMemo(
-    () => (systemInfo?.servers || []).filter((s) => s.state === "online").length,
-    [systemInfo]
-  )
-
-  const offlineServers = useMemo(
-    () =>
-      (systemInfo?.servers || []).filter((s) => s.state === "offline").length,
-    [systemInfo]
-  )
-
-  const backendInfo = useMemo(
-    () => [
-      {
-        icon: RiArchiveDrawerFill,
-        title: t("Backend Type"),
-        value: systemInfo?.backend?.backendType,
-      },
-      {
-        icon: RiSecurePaymentFill,
-        title: t("Standard Storage Parity"),
-        value: storageBackend?.StandardSCParity,
-      },
-      {
-        icon: RiListSettingsFill,
-        title: t("Reduced Redundancy Parity"),
-        value: storageBackend?.RRSCParity,
-      },
-    ],
-    [systemInfo, storageBackend, t]
-  )
-
-  if (
-    loading &&
-    !Object.keys(systemInfo).length &&
-    !Object.keys(datausageinfo).length
-  ) {
-    return (
-      <Page>
-        <PageHeader>
-          <h1 className="text-2xl font-bold">{t("Server Information")}</h1>
-        </PageHeader>
-        <div className="flex items-center justify-center py-24">
-          <Spinner className="size-8 text-muted-foreground" />
-        </div>
-      </Page>
-    )
-  }
-
-  if (error) {
-    return (
-      <Page>
-        <PageHeader
-          actions={
-            <Button variant="outline" onClick={refetch}>
-              <RiRefreshLine className="mr-2 size-4" aria-hidden />
-              {t("Sync")}
-            </Button>
-          }
-        >
-          <h1 className="text-2xl font-bold">{t("Server Information")}</h1>
-        </PageHeader>
-        <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center">
-          <p className="text-sm text-destructive">{error}</p>
-        </div>
-      </Page>
-    )
-  }
-
-  return (
-    <Page>
-      <PageHeader
-        actions={
-          <Button variant="outline" onClick={refetch} disabled={loading}>
-            <RiRefreshLine className="mr-2 size-4" aria-hidden />
-            {t("Sync")}
-          </Button>
-        }
-      >
-        <h1 className="text-2xl font-bold">{t("Server Information")}</h1>
-      </PageHeader>
-
-      <div className="space-y-8">
-        <PerformanceSummaryCards metrics={summaryMetrics} />
-
-        <PerformanceUsageCard
-          lastUpdatedLabel={lastUpdatedLabel}
-          totalUsedCapacity={datausageinfo.total_used_capacity ?? 0}
-          usedPercent={usedPercent}
-          usageStats={usageStats}
-          t={t}
-        />
-
-        <PerformanceInfrastructureCard
-          onlineServers={onlineServers}
-          offlineServers={offlineServers}
-          onlineDisks={systemInfo?.backend?.onlineDisks ?? 0}
-          offlineDisks={systemInfo?.backend?.offlineDisks ?? 0}
-          t={t}
-        />
-
-        <PerformanceBackendCard items={backendInfo} t={t} />
-
-        <PerformanceServerList
-          servers={systemInfo?.servers ?? []}
-          t={t}
-        />
-      </div>
-    </Page>
-  )
+export default function HomePage() {
+  redirect("/browser")
 }
diff --git a/app/(dashboard)/policies/page.tsx b/app/(dashboard)/policies/page.tsx
index 48580dbe..6c2019cc 100644
--- a/app/(dashboard)/policies/page.tsx
+++ b/app/(dashboard)/policies/page.tsx
@@ -88,19 +88,11 @@ export default function PoliciesPage() {
       meta: { width: 200 },
       cell: ({ row }) => (
         <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => handleEdit(row.original)}
-          >
+          <Button variant="outline" size="sm" onClick={() => handleEdit(row.original)}>
             <RiEdit2Line className="size-4" />
             <span>{t("Edit")}</span>
           </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => confirmDelete(row.original)}
-          >
+          <Button variant="outline" size="sm" onClick={() => confirmDelete(row.original)}>
             <RiDeleteBin5Line className="size-4" />
             <span>{t("Delete")}</span>
           </Button>
@@ -168,12 +160,7 @@ export default function PoliciesPage() {
         <DataTablePagination table={table} className="px-2 py-3" />
       </div>
 
-      <PolicyForm
-        show={showPolicyForm}
-        onShowChange={handleShowChange}
-        policy={currentPolicy}
-        onSaved={listPolicies}
-      />
+      <PolicyForm show={showPolicyForm} onShowChange={handleShowChange} policy={currentPolicy} onSaved={listPolicies} />
     </Page>
   )
 }
diff --git a/app/(dashboard)/replication/page.tsx b/app/(dashboard)/replication/page.tsx
index cef39ffa..aaf75ad6 100644
--- a/app/(dashboard)/replication/page.tsx
+++ b/app/(dashboard)/replication/page.tsx
@@ -1,65 +1,61 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import { useState, useEffect, useCallback, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { RiAddLine, RiRefreshLine, RiDeleteBin7Line } from "@remixicon/react";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Page } from "@/components/page";
-import { PageHeader } from "@/components/page-header";
-import { BucketSelector } from "@/components/buckets/selector";
-import { DataTable } from "@/components/data-table/data-table";
-import { useDataTable } from "@/hooks/use-data-table";
-import { useBucket } from "@/hooks/use-bucket";
-import { ReplicationNewForm } from "@/components/replication/new-form";
-import { useDialog } from "@/lib/feedback/dialog";
-import { useMessage } from "@/lib/feedback/message";
-import type { ColumnDef } from "@tanstack/react-table";
+import * as React from "react"
+import { useState, useEffect, useCallback, useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { RiAddLine, RiRefreshLine, RiDeleteBin7Line } from "@remixicon/react"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Page } from "@/components/page"
+import { PageHeader } from "@/components/page-header"
+import { BucketSelector } from "@/components/buckets/selector"
+import { DataTable } from "@/components/data-table/data-table"
+import { useDataTable } from "@/hooks/use-data-table"
+import { useBucket } from "@/hooks/use-bucket"
+import { ReplicationNewForm } from "@/components/replication/new-form"
+import { useDialog } from "@/lib/feedback/dialog"
+import { useMessage } from "@/lib/feedback/message"
+import type { ColumnDef } from "@tanstack/react-table"
 
 interface ReplicationRule {
-  ID?: string;
-  Status?: string;
-  Priority?: number;
-  Filter?: { Prefix?: string };
-  Destination?: { Bucket?: string; StorageClass?: string };
+  ID?: string
+  Status?: string
+  Priority?: number
+  Filter?: { Prefix?: string }
+  Destination?: { Bucket?: string; StorageClass?: string }
 }
 
 export default function ReplicationPage() {
-  const { t } = useTranslation();
-  const message = useMessage();
-  const dialog = useDialog();
-  const {
-    getBucketReplication,
-    putBucketReplication,
-    deleteBucketReplication,
-    deleteRemoteReplicationTarget,
-  } = useBucket();
+  const { t } = useTranslation()
+  const message = useMessage()
+  const dialog = useDialog()
+  const { getBucketReplication, putBucketReplication, deleteBucketReplication, deleteRemoteReplicationTarget } =
+    useBucket()
 
-  const [bucketName, setBucketName] = useState<string | null>(null);
-  const [data, setData] = useState<ReplicationRule[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [newFormOpen, setNewFormOpen] = useState(false);
+  const [bucketName, setBucketName] = useState<string | null>(null)
+  const [data, setData] = useState<ReplicationRule[]>([])
+  const [loading, setLoading] = useState(false)
+  const [newFormOpen, setNewFormOpen] = useState(false)
 
   const loadData = useCallback(async () => {
     if (!bucketName) {
-      setData([]);
-      return;
+      setData([])
+      return
     }
-    setLoading(true);
+    setLoading(true)
     try {
-      const res = await getBucketReplication(bucketName);
-      setData(res?.ReplicationConfiguration?.Rules ?? []);
+      const res = await getBucketReplication(bucketName)
+      setData(res?.ReplicationConfiguration?.Rules ?? [])
     } catch {
-      setData([]);
+      setData([])
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  }, [bucketName, getBucketReplication]);
+  }, [bucketName, getBucketReplication])
 
   useEffect(() => {
-    loadData();
-  }, [loadData]);
+    loadData()
+  }, [loadData])
 
   const columns: ColumnDef<ReplicationRule>[] = useMemo(
     () => [
@@ -72,11 +68,7 @@ export default function ReplicationPage() {
         accessorKey: "Status",
         header: () => t("Status"),
         cell: ({ row }) => (
-          <Badge
-            variant={
-              row.original.Status === "Enabled" ? "secondary" : "outline"
-            }
-          >
+          <Badge variant={row.original.Status === "Enabled" ? "secondary" : "outline"}>
             {row.original.Status === "Enabled" ? t("Enabled") : t("Disabled")}
           </Badge>
         ),
@@ -95,16 +87,14 @@ export default function ReplicationPage() {
         id: "destination-bucket",
         header: () => t("Destination Bucket"),
         cell: ({ row }) => {
-          const bucketArn = row.original.Destination?.Bucket || "";
-          return <span>{bucketArn.replace(/^arn:aws:s3:::/, "") || "-"}</span>;
+          const bucketArn = row.original.Destination?.Bucket || ""
+          return <span>{bucketArn.replace(/^arn:aws:s3:::/, "") || "-"}</span>
         },
       },
       {
         id: "destination-storage",
         header: () => t("Storage Class"),
-        cell: ({ row }) => (
-          <span>{row.original.Destination?.StorageClass || "-"}</span>
-        ),
+        cell: ({ row }) => <span>{row.original.Destination?.StorageClass || "-"}</span>,
       },
       {
         id: "actions",
@@ -112,11 +102,7 @@ export default function ReplicationPage() {
         enableSorting: false,
         cell: ({ row }) => (
           <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => confirmDelete(row.original)}
-            >
+            <Button variant="outline" size="sm" onClick={() => confirmDelete(row.original)}>
               <RiDeleteBin7Line className="size-4" aria-hidden />
               <span>{t("Delete")}</span>
             </Button>
@@ -126,13 +112,13 @@ export default function ReplicationPage() {
     ],
     // eslint-disable-next-line react-hooks/exhaustive-deps -- confirmDelete used in cell, stable ref
     [t],
-  );
+  )
 
   const { table } = useDataTable<ReplicationRule>({
     data,
     columns,
     getRowId: (row) => row.ID ?? JSON.stringify(row),
-  });
+  })
 
   const confirmDelete = (rule: ReplicationRule) => {
     dialog.error({
@@ -141,37 +127,34 @@ export default function ReplicationPage() {
       positiveText: t("Confirm"),
       negativeText: t("Cancel"),
       onPositiveClick: () => handleRowDelete(rule),
-    });
-  };
+    })
+  }
 
   const handleRowDelete = async (rule: ReplicationRule) => {
-    const remaining = data.filter((item) => item !== rule);
-    if (!bucketName) return;
+    const remaining = data.filter((item) => item !== rule)
+    if (!bucketName) return
 
     try {
       if (remaining.length === 0) {
-        await deleteBucketReplication(bucketName);
-        await deleteRemoteReplicationTarget(
-          bucketName,
-          rule.Destination?.Bucket ?? "",
-        );
+        await deleteBucketReplication(bucketName)
+        await deleteRemoteReplicationTarget(bucketName, rule.Destination?.Bucket ?? "")
       } else {
-        const currentConfig = await getBucketReplication(bucketName);
-        const role = currentConfig?.ReplicationConfiguration?.Role;
+        const currentConfig = await getBucketReplication(bucketName)
+        const role = currentConfig?.ReplicationConfiguration?.Role
         if (!role) {
-          throw new Error("Replication configuration Role is missing");
+          throw new Error("Replication configuration Role is missing")
         }
         await putBucketReplication(bucketName, {
           Role: role,
           Rules: remaining,
-        });
+        })
       }
-      message.success(t("Delete Success"));
-      loadData();
+      message.success(t("Delete Success"))
+      loadData()
     } catch (error) {
-      message.error((error as Error).message || t("Delete Failed"));
+      message.error((error as Error).message || t("Delete Failed"))
     }
-  };
+  }
 
   return (
     <Page>
@@ -184,11 +167,7 @@ export default function ReplicationPage() {
               placeholder={t("Please select bucket")}
               selectorClass="sm:w-56"
             />
-            <Button
-              variant="outline"
-              onClick={() => setNewFormOpen(true)}
-              disabled={!bucketName}
-            >
+            <Button variant="outline" onClick={() => setNewFormOpen(true)} disabled={!bucketName}>
               <RiAddLine className="size-4" aria-hidden />
               <span>{t("Add Replication Rule")}</span>
             </Button>
@@ -206,9 +185,7 @@ export default function ReplicationPage() {
         table={table}
         isLoading={loading}
         emptyTitle={t("No Data")}
-        emptyDescription={t(
-          "Add replication rules to sync objects across buckets.",
-        )}
+        emptyDescription={t("Add replication rules to sync objects across buckets.")}
       />
 
       {bucketName && (
@@ -220,5 +197,5 @@ export default function ReplicationPage() {
         />
       )}
     </Page>
-  );
+  )
 }
diff --git a/app/(dashboard)/settings/page.tsx b/app/(dashboard)/settings/page.tsx
index 7b85da19..9b0b82e1 100644
--- a/app/(dashboard)/settings/page.tsx
+++ b/app/(dashboard)/settings/page.tsx
@@ -1,20 +1,11 @@
 "use client"
 
-import { useState, useEffect, useMemo } from "react"
+import { useState, useEffect, useMemo, useCallback } from "react"
 import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@/components/ui/alert"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldLabel,
-} from "@/components/ui/field"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"
 import { Page } from "@/components/page"
 import { PageHeader } from "@/components/page-header"
 import { configManager } from "@/lib/config"
@@ -38,7 +29,7 @@ export default function SettingsPage() {
   const [formData, setFormData] = useState({ serverHost: "" })
   const [loading, setLoading] = useState(false)
 
-  const loadCurrentConfig = async () => {
+  const loadCurrentConfig = useCallback(async () => {
     try {
       const config = await configManager.loadConfig()
       setCurrentConfig({
@@ -53,11 +44,11 @@ export default function SettingsPage() {
     } catch {
       message.error(t("Failed to load current configuration"))
     }
-  }
+  }, [message, t])
 
   useEffect(() => {
     loadCurrentConfig()
-  }, [])
+  }, [loadCurrentConfig])
 
   const currentItems = useMemo(
     () => [
@@ -78,7 +69,7 @@ export default function SettingsPage() {
         value: currentConfig.s3.region || t("Not configured"),
       },
     ],
-    [currentConfig, t]
+    [currentConfig, t],
   )
 
   const saveConfig = async (e: React.FormEvent) => {
@@ -96,9 +87,7 @@ export default function SettingsPage() {
       }
 
       new URL(urlToValidate)
-      const urlToSave = /^https?:\/\//.test(formData.serverHost)
-        ? formData.serverHost
-        : urlToValidate
+      const urlToSave = /^https?:\/\//.test(formData.serverHost) ? formData.serverHost : urlToValidate
 
       localStorage.setItem("rustfs-server-host", urlToSave)
 
@@ -136,18 +125,11 @@ export default function SettingsPage() {
 
       <div className="flex flex-col gap-6">
         <div className="space-y-4">
-          <h2 className="text-lg font-semibold">
-            {t("Current Configuration")}
-          </h2>
+          <h2 className="text-lg font-semibold">{t("Current Configuration")}</h2>
           <dl className="grid grid-cols-1 gap-3 md:grid-cols-2">
             {currentItems.map((item) => (
-              <div
-                key={item.label}
-                className="rounded-md border p-3"
-              >
-                <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                  {item.label}
-                </dt>
+              <div key={item.label} className="rounded-md border p-3">
+                <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{item.label}</dt>
                 <dd className="mt-1 text-sm">{item.value}</dd>
               </div>
             ))}
@@ -155,40 +137,26 @@ export default function SettingsPage() {
         </div>
 
         <div className="space-y-4">
-          <h2 className="text-lg font-semibold">
-            {t("Server Configuration")}
-          </h2>
+          <h2 className="text-lg font-semibold">{t("Server Configuration")}</h2>
           <form className="space-y-4" onSubmit={saveConfig}>
             <Field>
               <FieldLabel>{t("Server Address")}</FieldLabel>
               <FieldContent>
                 <Input
                   value={formData.serverHost}
-                  onChange={(e) =>
-                    setFormData({ serverHost: e.target.value })
-                  }
-                  placeholder={t(
-                    "Please enter server address (e.g., http://localhost:9000)"
-                  )}
+                  onChange={(e) => setFormData({ serverHost: e.target.value })}
+                  placeholder={t("Please enter server address (e.g., http://localhost:9000)")}
                   autoComplete="off"
                 />
               </FieldContent>
-              <FieldDescription>
-                {t(
-                  "Example: http://localhost:9000 or https://your-domain.com"
-                )}
-              </FieldDescription>
+              <FieldDescription>{t("Example: http://localhost:9000 or https://your-domain.com")}</FieldDescription>
             </Field>
 
             <div className="flex flex-wrap items-center gap-2">
               <Button type="submit" variant="default" disabled={loading}>
                 {t("Save Configuration")}
               </Button>
-              <Button
-                type="button"
-                variant="outline"
-                onClick={resetConfig}
-              >
+              <Button type="button" variant="outline" onClick={resetConfig}>
                 {t("Reset to Default")}
               </Button>
             </div>
@@ -199,16 +167,8 @@ export default function SettingsPage() {
             <AlertDescription>
               <ul className="list-inside list-disc space-y-1 text-sm">
                 <li>{t("Configuration is saved locally in your browser")}</li>
-                <li>
-                  {t(
-                    "Page will refresh automatically after saving configuration"
-                  )}
-                </li>
-                <li>
-                  {t(
-                    "Make sure the server address is accessible from your network"
-                  )}
-                </li>
+                <li>{t("Page will refresh automatically after saving configuration")}</li>
+                <li>{t("Make sure the server address is accessible from your network")}</li>
               </ul>
             </AlertDescription>
           </Alert>
diff --git a/app/(dashboard)/site-replication/page.tsx b/app/(dashboard)/site-replication/page.tsx
index ae67b8d0..1740fb0a 100644
--- a/app/(dashboard)/site-replication/page.tsx
+++ b/app/(dashboard)/site-replication/page.tsx
@@ -1,18 +1,18 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { RiAddLine } from "@remixicon/react";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import { Page } from "@/components/page";
-import { PageHeader } from "@/components/page-header";
-import { SiteReplicationNewForm } from "@/components/site-replication/new-form";
+import * as React from "react"
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { RiAddLine } from "@remixicon/react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Page } from "@/components/page"
+import { PageHeader } from "@/components/page-header"
+import { SiteReplicationNewForm } from "@/components/site-replication/new-form"
 
 export default function SiteReplicationPage() {
-  const { t } = useTranslation();
-  const [newFormOpen, setNewFormOpen] = useState(false);
+  const { t } = useTranslation()
+  const [newFormOpen, setNewFormOpen] = useState(false)
 
   return (
     <Page>
@@ -40,10 +40,7 @@ export default function SiteReplicationPage() {
         </Card>
       </div>
 
-      <SiteReplicationNewForm
-        open={newFormOpen}
-        onOpenChange={setNewFormOpen}
-      />
+      <SiteReplicationNewForm open={newFormOpen} onOpenChange={setNewFormOpen} />
     </Page>
-  );
+  )
 }
diff --git a/app/(dashboard)/sse/page.tsx b/app/(dashboard)/sse/page.tsx
index 2a1ed185..8f3e0286 100644
--- a/app/(dashboard)/sse/page.tsx
+++ b/app/(dashboard)/sse/page.tsx
@@ -5,13 +5,7 @@ import { useState, useEffect, useCallback } from "react"
 import { useTranslation } from "react-i18next"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Page } from "@/components/page"
 import { PageHeader } from "@/components/page-header"
 import { useSSE } from "@/hooks/use-sse"
@@ -20,13 +14,7 @@ import { useMessage } from "@/lib/feedback/message"
 export default function SSEPage() {
   const { t } = useTranslation()
   const message = useMessage()
-  const {
-    getKMSStatus,
-    clearCache,
-    getDetailedStatus,
-    startKMS,
-    stopKMS,
-  } = useSSE()
+  const { getKMSStatus, clearCache, startKMS, stopKMS } = useSSE()
 
   const [status, setStatus] = useState<{
     status?: string
@@ -136,9 +124,7 @@ export default function SSEPage() {
   const getKmsStatusDescription = () => {
     if (!status) return t("KMS server is not configured")
     if (status.status === "Running") {
-      return status.healthy
-        ? t("KMS server is running and healthy")
-        : t("KMS server is running but unhealthy")
+      return status.healthy ? t("KMS server is running and healthy") : t("KMS server is running but unhealthy")
     }
     if (status.status === "Configured") return t("KMS server is configured but not running")
     return t("KMS server status unknown")
@@ -151,31 +137,23 @@ export default function SSEPage() {
       <PageHeader
         description={
           <p className="text-gray-600 dark:text-gray-400">
-            {t(
-              "Configure server-side encryption for your objects using external key management services."
-            )}
+            {t("Configure server-side encryption for your objects using external key management services.")}
           </p>
         }
       >
-        <h1 className="text-2xl font-bold">
-          {t("Server-Side Encryption (SSE) Configuration")}
-        </h1>
+        <h1 className="text-2xl font-bold">{t("Server-Side Encryption (SSE) Configuration")}</h1>
       </PageHeader>
 
       <div className="space-y-8">
         <Card className="shadow-none">
           <CardHeader className="space-y-2">
             <div className="flex flex-wrap items-center gap-3">
-              <CardTitle className="text-base sm:text-lg">
-                {t("KMS Status Overview")}
-              </CardTitle>
+              <CardTitle className="text-base sm:text-lg">{t("KMS Status Overview")}</CardTitle>
               <Badge variant="secondary" className="text-sm uppercase">
                 {loading ? t("Loading...") : getKmsStatusText()}
               </Badge>
             </div>
-            <CardDescription>
-              {getKmsStatusDescription()}
-            </CardDescription>
+            <CardDescription>{getKmsStatusDescription()}</CardDescription>
             {status?.backend_type && (
               <CardDescription>
                 {t("Backend")}: {status.backend_type}
@@ -185,37 +163,20 @@ export default function SSEPage() {
           <CardContent className="space-y-4">
             <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
               <div className="rounded-md border bg-muted/40 p-3">
-                <p className="text-xs text-muted-foreground">
-                  {t("Backend Type")}
-                </p>
-                <p className="text-sm font-medium text-foreground">
-                  {status?.backend_type ?? t("Not configured")}
-                </p>
+                <p className="text-xs text-muted-foreground">{t("Backend Type")}</p>
+                <p className="text-sm font-medium text-foreground">{status?.backend_type ?? t("Not configured")}</p>
               </div>
               <div className="rounded-md border bg-muted/40 p-3">
-                <p className="text-xs text-muted-foreground">
-                  {t("Status")}
-                </p>
-                <p className="text-sm font-medium text-foreground">
-                  {status?.status ?? t("Not configured")}
-                </p>
+                <p className="text-xs text-muted-foreground">{t("Status")}</p>
+                <p className="text-sm font-medium text-foreground">{status?.status ?? t("Not configured")}</p>
               </div>
               <div className="rounded-md border bg-muted/40 p-3">
-                <p className="text-xs text-muted-foreground">
-                  {t("Health")}
-                </p>
-                <p className="text-sm font-medium text-foreground">
-                  {status?.healthy ? t("Healthy") : t("Unhealthy")}
-                </p>
+                <p className="text-xs text-muted-foreground">{t("Health")}</p>
+                <p className="text-sm font-medium text-foreground">{status?.healthy ? t("Healthy") : t("Unhealthy")}</p>
               </div>
             </div>
             <div className="flex flex-wrap items-center justify-end gap-2">
-              <Button
-                size="sm"
-                variant="outline"
-                disabled={refreshingStatus}
-                onClick={handleRefresh}
-              >
+              <Button size="sm" variant="outline" disabled={refreshingStatus} onClick={handleRefresh}>
                 {t("Refresh")}
               </Button>
               <Button
@@ -227,24 +188,13 @@ export default function SSEPage() {
               >
                 {t("Clear Cache")}
               </Button>
-              {hasConfiguration &&
-                (status?.status === "Configured" || status?.status === "Error") && (
-                  <Button
-                    size="sm"
-                    variant="default"
-                    onClick={handleStartKMS}
-                    aria-disabled={startingKMS}
-                  >
-                    {t("Start KMS")}
-                  </Button>
-                )}
+              {hasConfiguration && (status?.status === "Configured" || status?.status === "Error") && (
+                <Button size="sm" variant="default" onClick={handleStartKMS} aria-disabled={startingKMS}>
+                  {t("Start KMS")}
+                </Button>
+              )}
               {hasConfiguration && status?.status === "Running" && (
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={handleStopKMS}
-                  aria-disabled={stoppingKMS}
-                >
+                <Button size="sm" variant="outline" onClick={handleStopKMS} aria-disabled={stoppingKMS}>
                   {t("Stop KMS")}
                 </Button>
               )}
@@ -255,9 +205,7 @@ export default function SSEPage() {
         <Card className="shadow-none">
           <CardHeader>
             <CardTitle>{t("KMS Configuration")}</CardTitle>
-            <CardDescription>
-              {t("Full KMS configuration form - coming soon")}
-            </CardDescription>
+            <CardDescription>{t("Full KMS configuration form - coming soon")}</CardDescription>
           </CardHeader>
         </Card>
       </div>
diff --git a/app/(dashboard)/performance/page.tsx b/app/(dashboard)/status/page.tsx
similarity index 96%
rename from app/(dashboard)/performance/page.tsx
rename to app/(dashboard)/status/page.tsx
index 2f8f6eb9..6ca7020f 100644
--- a/app/(dashboard)/performance/page.tsx
+++ b/app/(dashboard)/status/page.tsx
@@ -147,7 +147,7 @@ export default function PerformancePage() {
     return (
       <Page>
         <PageHeader>
-          <h1 className="text-2xl font-bold">{t("Server Information")}</h1>
+          <h1 className="text-2xl font-bold">{t("Running Status")}</h1>
         </PageHeader>
         <div className="flex items-center justify-center py-24">
           <Spinner className="size-8 text-muted-foreground" />
@@ -167,7 +167,7 @@ export default function PerformancePage() {
             </Button>
           }
         >
-          <h1 className="text-2xl font-bold">{t("Server Information")}</h1>
+          <h1 className="text-2xl font-bold">{t("Running Status")}</h1>
         </PageHeader>
         <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center">
           <p className="text-sm text-destructive">{error}</p>
@@ -186,7 +186,7 @@ export default function PerformancePage() {
           </Button>
         }
       >
-        <h1 className="text-2xl font-bold">{t("Server Information")}</h1>
+        <h1 className="text-2xl font-bold">{t("Running Status")}</h1>
       </PageHeader>
 
       <div className="space-y-8">
diff --git a/app/(dashboard)/tiers/page.tsx b/app/(dashboard)/tiers/page.tsx
index fb0927c0..cc9e9ee2 100644
--- a/app/(dashboard)/tiers/page.tsx
+++ b/app/(dashboard)/tiers/page.tsx
@@ -69,14 +69,39 @@ export default function TiersPage() {
     loadTiers()
   }, [loadTiers])
 
+  const deleteTier = useCallback(
+    async (row: TierRow) => {
+      try {
+        const name = getConfig(row)?.name || ""
+        await removeTiers(name)
+        message.success(t("Delete Success"))
+        loadTiers()
+      } catch (error) {
+        message.error((error as Error).message || t("Delete Failed"))
+      }
+    },
+    [removeTiers, message, t, loadTiers],
+  )
+
+  const confirmDelete = useCallback(
+    (row: TierRow) => {
+      dialog.error({
+        title: t("Warning"),
+        content: t("Are you sure you want to delete this tier?"),
+        positiveText: t("Confirm"),
+        negativeText: t("Cancel"),
+        onPositiveClick: () => deleteTier(row),
+      })
+    },
+    [dialog, t, deleteTier],
+  )
+
   const columns: ColumnDef<TierRow>[] = useMemo(
     () => [
       {
         header: () => t("Tier Type"),
         accessorKey: "type",
-        cell: ({ row }) => (
-          <span className="capitalize">{row.original.type || "-"}</span>
-        ),
+        cell: ({ row }) => <span className="capitalize">{row.original.type || "-"}</span>,
       },
       {
         id: "name",
@@ -121,11 +146,7 @@ export default function TiersPage() {
               <RiKey2Line className="size-4" aria-hidden />
               <span>{t("Update Key")}</span>
             </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => confirmDelete(row.original)}
-            >
+            <Button variant="outline" size="sm" onClick={() => confirmDelete(row.original)}>
               <RiDeleteBin5Line className="size-4" aria-hidden />
               <span>{t("Delete")}</span>
             </Button>
@@ -133,7 +154,7 @@ export default function TiersPage() {
         ),
       },
     ],
-    [t]
+    [t, confirmDelete],
   )
 
   const { table } = useDataTable<TierRow>({
@@ -142,29 +163,6 @@ export default function TiersPage() {
     getRowId: (row) => `${row.type}-${getConfig(row)?.name}`,
   })
 
-  const confirmDelete = (row: TierRow) => {
-    dialog.error({
-      title: t("Warning"),
-      content: t("Are you sure you want to delete this tier?"),
-      positiveText: t("Confirm"),
-      negativeText: t("Cancel"),
-      onPositiveClick: () => deleteTier(row),
-    })
-  }
-
-  const deleteTier = async (row: TierRow) => {
-    try {
-      const name = getConfig(row)?.name || ""
-      await removeTiers(name)
-      message.success(t("Delete Success"))
-      loadTiers()
-    } catch (error) {
-      message.error(
-        (error as Error).message || t("Delete Failed")
-      )
-    }
-  }
-
   return (
     <Page>
       <PageHeader
@@ -188,16 +186,10 @@ export default function TiersPage() {
         table={table}
         isLoading={loading}
         emptyTitle={t("No Tiers")}
-        emptyDescription={t(
-          "Add tiers to configure remote storage destinations."
-        )}
+        emptyDescription={t("Add tiers to configure remote storage destinations.")}
       />
 
-      <TiersNewForm
-        open={newFormOpen}
-        onOpenChange={setNewFormOpen}
-        onSuccess={loadTiers}
-      />
+      <TiersNewForm open={newFormOpen} onOpenChange={setNewFormOpen} onSuccess={loadTiers} />
       <TiersChangeKey
         open={changeKeyOpen}
         onOpenChange={setChangeKeyOpen}
diff --git a/app/(dashboard)/user-groups/page.tsx b/app/(dashboard)/user-groups/page.tsx
index 0ab59b33..11bf6ea4 100644
--- a/app/(dashboard)/user-groups/page.tsx
+++ b/app/(dashboard)/user-groups/page.tsx
@@ -3,12 +3,7 @@
 import * as React from "react"
 import { useState, useEffect } from "react"
 import { useTranslation } from "react-i18next"
-import {
-  RiAddLine,
-  RiDeleteBin5Line,
-  RiEdit2Line,
-  RiGroup2Fill,
-} from "@remixicon/react"
+import { RiAddLine, RiDeleteBin5Line, RiEdit2Line, RiGroup2Fill } from "@remixicon/react"
 import { Button } from "@/components/ui/button"
 import { SearchInput } from "@/components/search-input"
 import { Page } from "@/components/page"
@@ -42,26 +37,25 @@ export default function UserGroupsPage() {
   const [editRow, setEditRow] = useState<GroupRow | null>(null)
   const [policiesDialogOpen, setPoliciesDialogOpen] = useState(false)
 
-  const getDataList = async () => {
+  const getDataList = React.useCallback(async () => {
     setLoading(true)
     try {
       const res = (await listGroup()) as string[] | undefined
       setData(
         (res ?? []).map((name) => ({
           name,
-        }))
+        })),
       )
     } catch {
       message.error(t("Failed to get data"))
     } finally {
       setLoading(false)
-      table.resetRowSelection()
     }
-  }
+  }, [listGroup, message, t])
 
   useEffect(() => {
     getDataList()
-  }, [])
+  }, [getDataList])
 
   const filteredData = React.useMemo(() => {
     if (!searchTerm) return data
@@ -69,14 +63,48 @@ export default function UserGroupsPage() {
     return data.filter((row) => row.name.toLowerCase().includes(term))
   }, [data, searchTerm])
 
+  const openEditItem = React.useCallback((row: GroupRow) => {
+    setEditRow(row)
+    setEditFormOpen(true)
+  }, [])
+
+  const deleteItem = React.useCallback(
+    async (row: GroupRow) => {
+      try {
+        const info = (await getGroup(row.name)) as { members?: string[] }
+        if (info?.members?.length) {
+          message.error(t("Please remove members first"))
+          return
+        }
+        await removeGroup(row.name)
+        message.success(t("Delete Success"))
+        await getDataList()
+      } catch {
+        message.error(t("Delete Failed"))
+      }
+    },
+    [getGroup, removeGroup, message, t, getDataList],
+  )
+
+  const confirmDelete = React.useCallback(
+    (row: GroupRow) => {
+      dialog.error({
+        title: t("Confirm Delete"),
+        content: "",
+        positiveText: t("Delete"),
+        negativeText: t("Cancel"),
+        onPositiveClick: () => deleteItem(row),
+      })
+    },
+    [dialog, t, deleteItem],
+  )
+
   const columns: ColumnDef<GroupRow>[] = React.useMemo(
     () => [
       {
         accessorKey: "name",
         header: () => t("Name"),
-        cell: ({ row }) => (
-          <span className="font-medium">{row.original.name}</span>
-        ),
+        cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
         filterFn: "includesString",
       },
       {
@@ -87,21 +115,11 @@ export default function UserGroupsPage() {
         meta: { width: 200 },
         cell: ({ row }) => (
           <div className="flex items-center gap-2">
-            <Button
-              type="button"
-              size="sm"
-              variant="outline"
-              onClick={() => openEditItem(row.original)}
-            >
+            <Button type="button" size="sm" variant="outline" onClick={() => openEditItem(row.original)}>
               <RiEdit2Line className="size-4" />
               <span>{t("Edit")}</span>
             </Button>
-            <Button
-              type="button"
-              size="sm"
-              variant="outline"
-              onClick={() => confirmDelete(row.original)}
-            >
+            <Button type="button" size="sm" variant="outline" onClick={() => confirmDelete(row.original)}>
               <RiDeleteBin5Line className="size-4" />
               <span>{t("Delete")}</span>
             </Button>
@@ -109,7 +127,7 @@ export default function UserGroupsPage() {
         ),
       },
     ],
-    [t]
+    [t, openEditItem, confirmDelete],
   )
 
   const { table, selectedRowIds } = useDataTable<GroupRow>({
@@ -121,35 +139,9 @@ export default function UserGroupsPage() {
 
   const selectedKeys = Array.from(selectedRowIds)
 
-  const openEditItem = (row: GroupRow) => {
-    setEditRow(row)
-    setEditFormOpen(true)
-  }
-
-  const confirmDelete = (row: GroupRow) => {
-    dialog.error({
-      title: t("Confirm Delete"),
-      content: "",
-      positiveText: t("Delete"),
-      negativeText: t("Cancel"),
-      onPositiveClick: () => deleteItem(row),
-    })
-  }
-
-  const deleteItem = async (row: GroupRow) => {
-    try {
-      const info = (await getGroup(row.name)) as { members?: string[] }
-      if (info?.members?.length) {
-        message.error(t("Please remove members first"))
-        return
-      }
-      await removeGroup(row.name)
-      message.success(t("Delete Success"))
-      await getDataList()
-    } catch {
-      message.error(t("Delete Failed"))
-    }
-  }
+  React.useEffect(() => {
+    table.resetRowSelection()
+  }, [data, table])
 
   return (
     <Page>
@@ -172,11 +164,7 @@ export default function UserGroupsPage() {
               <RiGroup2Fill className="size-4" />
               {t("Assign Policy")}
             </Button>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setNewFormOpen(true)}
-            >
+            <Button type="button" variant="outline" onClick={() => setNewFormOpen(true)}>
               <RiAddLine className="size-4" />
               {t("Add User Group")}
             </Button>
@@ -196,17 +184,8 @@ export default function UserGroupsPage() {
         />
         <DataTablePagination table={table} />
 
-        <UserGroupNewForm
-          open={newFormOpen}
-          onOpenChange={setNewFormOpen}
-          onSuccess={getDataList}
-        />
-        <UserGroupEditForm
-          open={editFormOpen}
-          onOpenChange={setEditFormOpen}
-          row={editRow}
-          onSuccess={getDataList}
-        />
+        <UserGroupNewForm open={newFormOpen} onOpenChange={setNewFormOpen} onSuccess={getDataList} />
+        <UserGroupEditForm open={editFormOpen} onOpenChange={setEditFormOpen} row={editRow} onSuccess={getDataList} />
         <UserGroupSetPoliciesMultiple
           checkedKeys={selectedKeys}
           open={policiesDialogOpen}
diff --git a/app/(dashboard)/users/page.tsx b/app/(dashboard)/users/page.tsx
index 9c4d20a3..628a9010 100644
--- a/app/(dashboard)/users/page.tsx
+++ b/app/(dashboard)/users/page.tsx
@@ -57,7 +57,7 @@ export default function UsersPage() {
   const [editFormOpen, setEditFormOpen] = useState(false)
   const [editRow, setEditRow] = useState<UserRow | null>(null)
 
-  const getDataList = async () => {
+  const getDataList = React.useCallback(async () => {
     setLoading(true)
     try {
       const res = (await listUsers()) as Record<string, Record<string, unknown>>
@@ -66,17 +66,16 @@ export default function UsersPage() {
         ...(typeof info === "object" ? info : {}),
       })) as UserRow[]
       setData(users)
-    } catch (error) {
+    } catch {
       message.error(t("Failed to get data"))
     } finally {
       setLoading(false)
-      table.resetRowSelection()
     }
-  }
+  }, [listUsers, message, t])
 
   useEffect(() => {
     getDataList()
-  }, [])
+  }, [getDataList])
 
   const filteredData = React.useMemo(() => {
     if (!searchTerm) return data
@@ -99,9 +98,7 @@ export default function UsersPage() {
       accessorKey: "status",
       header: () => t("Status"),
       cell: ({ row }) => (
-        <Badge
-          variant={row.original.status === "enabled" ? "secondary" : "outline"}
-        >
+        <Badge variant={row.original.status === "enabled" ? "secondary" : "outline"}>
           {row.original.status === "enabled" ? t("Enabled") : row.original.status}
         </Badge>
       ),
@@ -124,21 +121,11 @@ export default function UsersPage() {
       meta: { width: 200 },
       cell: ({ row }) => (
         <div className="flex items-center gap-2">
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={() => openEditItem(row.original)}
-          >
+          <Button type="button" variant="outline" size="sm" onClick={() => openEditItem(row.original)}>
             <RiEdit2Line className="size-4" />
             <span>{t("Edit")}</span>
           </Button>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={() => confirmDelete(row.original)}
-          >
+          <Button type="button" variant="outline" size="sm" onClick={() => confirmDelete(row.original)}>
             <RiDeleteBin5Line className="size-4" />
             <span>{t("Delete")}</span>
           </Button>
@@ -157,6 +144,10 @@ export default function UsersPage() {
 
   const selectedKeys = selectedRowIds
 
+  React.useEffect(() => {
+    table.resetRowSelection()
+  }, [data, table])
+
   const openEditItem = (row: UserRow) => {
     setEditRow(row)
     setEditFormOpen(true)
@@ -178,7 +169,7 @@ export default function UsersPage() {
       message.success(t("Delete Success"))
       table.resetRowSelection()
       await getDataList()
-    } catch (error) {
+    } catch {
       message.error(t("Delete Failed"))
     }
   }
@@ -196,7 +187,7 @@ export default function UsersPage() {
           message.success(t("Delete Success"))
           table.resetRowSelection()
           await getDataList()
-        } catch (error) {
+        } catch {
           message.error(t("Delete Failed"))
         }
       },
@@ -219,21 +210,11 @@ export default function UsersPage() {
               clearable
               className="max-w-xs"
             />
-            <Button
-              type="button"
-              variant="outline"
-              disabled={!selectedKeys.length}
-              onClick={deleteByList}
-            >
+            <Button type="button" variant="outline" disabled={!selectedKeys.length} onClick={deleteByList}>
               <RiDeleteBin5Line className="size-4" />
               {t("Delete Selected")}
             </Button>
-            <Button
-              type="button"
-              variant="outline"
-              disabled={!selectedKeys.length}
-              onClick={addToGroup}
-            >
+            <Button type="button" variant="outline" disabled={!selectedKeys.length} onClick={addToGroup}>
               <RiGroup2Fill className="size-4" />
               {t("Add to Group")}
             </Button>
@@ -258,12 +239,7 @@ export default function UsersPage() {
         <DataTablePagination table={table} />
 
         <UserNewForm open={newFormOpen} onOpenChange={setNewFormOpen} onSuccess={getDataList} />
-        <UserEditForm
-          open={editFormOpen}
-          onOpenChange={setEditFormOpen}
-          row={editRow}
-          onSuccess={getDataList}
-        />
+        <UserEditForm open={editFormOpen} onOpenChange={setEditFormOpen} row={editRow} onSuccess={getDataList} />
       </div>
     </Page>
   )
diff --git a/app/globals.css b/app/globals.css
index 61278720..c208fafe 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -89,7 +89,7 @@
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.87 0.00 0);
+  --primary: oklch(0.87 0 0);
   --primary-foreground: oklch(0.205 0 0);
   --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
@@ -149,4 +149,4 @@
     transform: translateY(0);
     filter: blur(0);
   }
-}
\ No newline at end of file
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 8b7876a1..0d46af13 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,6 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono, Inter } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from "next"
+import { Geist, Geist_Mono, Inter } from "next/font/google"
+import "./globals.css"
 import { ThemeProvider } from "@/components/providers/theme-provider"
 import { I18nProvider } from "@/components/providers/i18n-provider"
 import { AuthProvider } from "@/contexts/auth-context"
@@ -10,28 +10,27 @@ import { TaskProvider } from "@/contexts/task-context"
 import { PermissionsProvider } from "@/hooks/use-permissions"
 import { AppUiProvider } from "@/components/providers/app-ui-provider"
 
-const inter = Inter({subsets:['latin'],variable:'--font-sans'});
+const inter = Inter({ subsets: ["latin"], variable: "--font-sans" })
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
-});
+})
 
 const geistMono = Geist_Mono({
   variable: "--font-geist-mono",
   subsets: ["latin"],
-});
+})
 
 export const metadata: Metadata = {
   title: "RustFS",
-  description:
-    "RustFS is a distributed file system written in Rust.",
-};
+  description: "RustFS is a distributed file system written in Rust.",
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
     <html lang="en" className={inter.variable} suppressHydrationWarning>
@@ -45,7 +44,7 @@ export default function RootLayout({
                 <S3Provider>
                   <TaskProvider>
                     <PermissionsProvider>
-                    <AppUiProvider>{children}</AppUiProvider>
+                      <AppUiProvider>{children}</AppUiProvider>
                     </PermissionsProvider>
                   </TaskProvider>
                 </S3Provider>
@@ -55,5 +54,5 @@ export default function RootLayout({
         </ThemeProvider>
       </body>
     </html>
-  );
+  )
 }
diff --git a/components/access-keys/edit-item.tsx b/components/access-keys/edit-item.tsx
index 26447c50..a9ba3fc8 100644
--- a/components/access-keys/edit-item.tsx
+++ b/components/access-keys/edit-item.tsx
@@ -9,13 +9,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { Spinner } from "@/components/ui/spinner"
 import { Field, FieldContent, FieldLabel } from "@/components/ui/field"
 import { Switch } from "@/components/ui/switch"
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { DateTimePicker } from "@/components/datetime-picker"
 import { useMessage } from "@/lib/feedback/message"
 import { useAccessKeys } from "@/hooks/use-access-keys"
@@ -35,12 +29,7 @@ interface AccessKeysEditItemProps {
   onSuccess: () => void
 }
 
-export function AccessKeysEditItem({
-  open,
-  onOpenChange,
-  row,
-  onSuccess,
-}: AccessKeysEditItemProps) {
+export function AccessKeysEditItem({ open, onOpenChange, row, onSuccess }: AccessKeysEditItemProps) {
   const { t } = useTranslation()
   const message = useMessage()
   const { getServiceAccount, updateServiceAccount } = useAccessKeys()
@@ -58,20 +47,25 @@ export function AccessKeysEditItem({
   React.useEffect(() => {
     if (open && row?.accessKey) {
       getServiceAccount(row.accessKey)
-        .then((res: { policy?: unknown; expiration?: string; name?: string; description?: string; accountStatus?: string }) => {
-          setAccesskey(row.accessKey)
-          const policyValue =
-            typeof res.policy === "string" ? res.policy : JSON.stringify(res.policy ?? {}, null, 2)
-          setPolicy(policyValue)
-          setExpiry(
-            res.expiration && res.expiration !== "9999-01-01T00:00:00Z"
-              ? dayjs(res.expiration).toISOString()
-              : null
-          )
-          setName(res.name ?? "")
-          setDescription(res.description ?? "")
-          setStatus((res.accountStatus as "on" | "off") ?? "on")
-        })
+        .then(
+          (res: {
+            policy?: unknown
+            expiration?: string
+            name?: string
+            description?: string
+            accountStatus?: string
+          }) => {
+            setAccesskey(row.accessKey)
+            const policyValue = typeof res.policy === "string" ? res.policy : JSON.stringify(res.policy ?? {}, null, 2)
+            setPolicy(policyValue)
+            setExpiry(
+              res.expiration && res.expiration !== "9999-01-01T00:00:00Z" ? dayjs(res.expiration).toISOString() : null,
+            )
+            setName(res.name ?? "")
+            setDescription(res.description ?? "")
+            setStatus((res.accountStatus as "on" | "off") ?? "on")
+          },
+        )
         .catch(() => {
           message.error(t("Failed to get data"))
         })
@@ -149,10 +143,7 @@ export function AccessKeysEditItem({
             <Field orientation="responsive">
               <FieldLabel className="text-sm font-medium">{t("Status")}</FieldLabel>
               <FieldContent className="flex justify-end">
-                <Switch
-                  checked={status === "on"}
-                  onCheckedChange={(checked) => setStatus(checked ? "on" : "off")}
-                />
+                <Switch checked={status === "on"} onCheckedChange={(checked) => setStatus(checked ? "on" : "off")} />
               </FieldContent>
             </Field>
           </div>
diff --git a/components/access-keys/new-item.tsx b/components/access-keys/new-item.tsx
index 1be94d87..0a8d4038 100644
--- a/components/access-keys/new-item.tsx
+++ b/components/access-keys/new-item.tsx
@@ -8,13 +8,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { Spinner } from "@/components/ui/spinner"
 import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"
 import { Switch } from "@/components/ui/switch"
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { DateTimePicker } from "@/components/datetime-picker"
 import { useMessage } from "@/lib/feedback/message"
 import { useAccessKeys } from "@/hooks/use-access-keys"
@@ -29,12 +23,7 @@ interface AccessKeysNewItemProps {
   onNotice: (data: unknown) => void
 }
 
-export function AccessKeysNewItem({
-  visible,
-  onVisibleChange,
-  onSuccess,
-  onNotice,
-}: AccessKeysNewItemProps) {
+export function AccessKeysNewItem({ visible, onVisibleChange, onSuccess, onNotice }: AccessKeysNewItemProps) {
   const { t } = useTranslation()
   const message = useMessage()
   const api = useApi()
@@ -65,11 +54,14 @@ export function AccessKeysNewItem({
       setExpiry(null)
       setImpliedPolicy(true)
       setErrors({ accessKey: "", secretKey: "", name: "" })
-      api.get("/accountinfo").then((userInfo: { Policy?: unknown }) => {
-        setPolicy(JSON.stringify(userInfo?.Policy ?? {}, null, 2))
-      }).catch(() => {
-        setPolicy("{}")
-      })
+      api
+        .get("/accountinfo")
+        .then((userInfo: { Policy?: unknown }) => {
+          setPolicy(JSON.stringify(userInfo?.Policy ?? {}, null, 2))
+        })
+        .catch(() => {
+          setPolicy("{}")
+        })
     }
   }, [visible, api])
 
@@ -140,10 +132,7 @@ export function AccessKeysNewItem({
   return (
     <Dialog open={visible} onOpenChange={closeModal}>
       <DialogContent
-        className={cn(
-          "sm:max-w-xl",
-          !impliedPolicy && "sm:max-w-6xl"
-        )}
+        className={cn("sm:max-w-xl", !impliedPolicy && "sm:max-w-6xl")}
         onPointerDownOutside={(e) => e.preventDefault()}
         onInteractOutside={(e) => e.preventDefault()}
       >
@@ -154,7 +143,7 @@ export function AccessKeysNewItem({
         <div className="flex flex-col gap-4 lg:flex-row max-h-[80vh] overflow-auto px-2 -mx-2">
           <div
             className={cn(
-              impliedPolicy ? "flex flex-1 flex-col gap-4" : "flex w-full flex-col gap-4 lg:w-72 lg:shrink-0"
+              impliedPolicy ? "flex flex-1 flex-col gap-4" : "flex w-full flex-col gap-4 lg:w-72 lg:shrink-0",
             )}
           >
             <Field>
@@ -167,9 +156,7 @@ export function AccessKeysNewItem({
                   autoComplete="off"
                 />
               </FieldContent>
-              {errors.accessKey && (
-                <FieldDescription className="text-destructive">{errors.accessKey}</FieldDescription>
-              )}
+              {errors.accessKey && <FieldDescription className="text-destructive">{errors.accessKey}</FieldDescription>}
             </Field>
 
             <Field>
@@ -183,9 +170,7 @@ export function AccessKeysNewItem({
                   autoComplete="off"
                 />
               </FieldContent>
-              {errors.secretKey && (
-                <FieldDescription className="text-destructive">{errors.secretKey}</FieldDescription>
-              )}
+              {errors.secretKey && <FieldDescription className="text-destructive">{errors.secretKey}</FieldDescription>}
             </Field>
 
             <Field>
@@ -206,22 +191,20 @@ export function AccessKeysNewItem({
             <Field>
               <FieldLabel htmlFor="create-name">{t("Name")}</FieldLabel>
               <FieldContent>
-                <Input
-                  id="create-name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  autoComplete="off"
-                />
+                <Input id="create-name" value={name} onChange={(e) => setName(e.target.value)} autoComplete="off" />
               </FieldContent>
-              {errors.name && (
-                <FieldDescription className="text-destructive">{errors.name}</FieldDescription>
-              )}
+              {errors.name && <FieldDescription className="text-destructive">{errors.name}</FieldDescription>}
             </Field>
 
             <Field>
               <FieldLabel htmlFor="create-description">{t("Description")}</FieldLabel>
               <FieldContent>
-                <Textarea id="create-description" value={description} onChange={(e) => setDescription(e.target.value)} rows={3} />
+                <Textarea
+                  id="create-description"
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  rows={3}
+                />
               </FieldContent>
             </Field>
 
diff --git a/components/app-sidebar.tsx b/components/app-sidebar.tsx
index eda7c58d..ae5b905d 100644
--- a/components/app-sidebar.tsx
+++ b/components/app-sidebar.tsx
@@ -9,6 +9,7 @@ import { ScrollArea } from "@/components/ui/scroll-area"
 import {
   Sidebar,
   SidebarContent,
+  SidebarFooter,
   SidebarGroup,
   SidebarGroupContent,
   SidebarHeader,
@@ -28,9 +29,9 @@ import navs from "@/config/navs"
 import logoImage from "@/assets/logo.svg"
 import type { NavItem } from "@/types/app-config"
 import { usePermissions } from "@/hooks/use-permissions"
+import { SidebarVersion } from "@/components/sidebars/version"
 
 const APP_NAME = "RustFS"
-const RELEASE_VERSION = process.env.NEXT_PUBLIC_VERSION ?? ""
 
 function NavIcon({ name }: { name?: string }) {
   const Icon = getIconComponent(name)
@@ -119,7 +120,7 @@ export function AppSidebar() {
   return (
     <Sidebar collapsible="icon">
       <SidebarHeader>
-        <Link href="/browser" className="flex items-center gap-3">
+        <Link href="/" className="flex items-center gap-3">
           {isCollapsed ? (
             <div className="flex size-8 items-center justify-center rounded-lg bg-primary text-md font-semibold text-primary-foreground">
               <span>{brandInitial}</span>
@@ -127,7 +128,6 @@ export function AppSidebar() {
           ) : (
             <div className="flex min-w-0 items-baseline gap-2 px-3 py-4">
               <Image src={logoImage} alt="RustFS" width={64} height={16} className="h-4 w-auto shrink-0" />
-              {RELEASE_VERSION ? <span className="text-[10px] text-muted-foreground">v{RELEASE_VERSION}</span> : null}
             </div>
           )}
         </Link>
@@ -226,6 +226,10 @@ export function AppSidebar() {
         </ScrollArea>
       </SidebarContent>
 
+      <SidebarFooter className="mt-auto px-2 pb-2">
+        <SidebarVersion appName={APP_NAME} />
+      </SidebarFooter>
+
       <SidebarRail />
     </Sidebar>
   )
diff --git a/components/auth/heroes/hero-static.tsx b/components/auth/heroes/hero-static.tsx
index 2993c3ff..da01912c 100644
--- a/components/auth/heroes/hero-static.tsx
+++ b/components/auth/heroes/hero-static.tsx
@@ -15,17 +15,9 @@ export function AuthHeroStatic() {
   return (
     <div className="relative flex h-full w-full flex-col justify-center gap-8 overflow-hidden border-r bg-gray-50 p-16 dark:border-none dark:bg-black">
       <div className="z-10 flex max-w-7xl flex-col">
-        <Image
-          src={logoImage}
-          alt="RustFS"
-          width={112}
-          height={24}
-          className="max-w-28"
-        />
+        <Image src={logoImage} alt="RustFS" width={112} height={24} className="max-w-28" />
         <div className="my-6 px-0 text-4xl font-semibold text-primary">
-          <span className={locale !== "zh" ? "pr-1" : undefined}>
-            {t("Rust-based")}{" "}
-          </span>
+          <span className={locale !== "zh" ? "pr-1" : undefined}>{t("Rust-based")} </span>
           <FlipWords
             words={[
               t("High Performance"),
@@ -37,9 +29,7 @@ export function AuthHeroStatic() {
             duration={3000}
             className="text-4xl font-semibold text-primary"
           />
-          <div className="mt-2 text-muted-foreground">
-            {t("Reliable distributed file system")}
-          </div>
+          <div className="mt-2 text-muted-foreground">{t("Reliable distributed file system")}</div>
         </div>
       </div>
       <Link
@@ -50,12 +40,7 @@ export function AuthHeroStatic() {
         <RiArrowRightLongFill className="mr-2" />
       </Link>
       <div className="absolute inset-0 z-0 h-full">
-        <Image
-          src={buildRoute("/backgrounds/ttten.svg")}
-          alt=""
-          fill
-          className="object-cover opacity-45"
-        />
+        <Image src={buildRoute("/backgrounds/ttten.svg")} alt="" fill className="object-cover opacity-45" />
       </div>
     </div>
   )
diff --git a/components/auth/login-form.tsx b/components/auth/login-form.tsx
index 421fdb5f..e8a8bc66 100644
--- a/components/auth/login-form.tsx
+++ b/components/auth/login-form.tsx
@@ -20,9 +20,7 @@ export interface LoginFormProps {
   method: LoginMethod
   setMethod: (m: LoginMethod) => void
   accessKeyAndSecretKey: { accessKeyId: string; secretAccessKey: string }
-  setAccessKeyAndSecretKey: React.Dispatch<
-    React.SetStateAction<{ accessKeyId: string; secretAccessKey: string }>
-  >
+  setAccessKeyAndSecretKey: React.Dispatch<React.SetStateAction<{ accessKeyId: string; secretAccessKey: string }>>
   sts: {
     accessKeyId: string
     secretAccessKey: string
@@ -73,20 +71,10 @@ export function LoginForm({
           </div>
 
           <div className="max-w-sm w-full space-y-6 p-4 sm:p-7">
-            <Image
-              src={logoImage}
-              alt="RustFS"
-              width={112}
-              height={24}
-              className="max-w-28"
-            />
+            <Image src={logoImage} alt="RustFS" width={112} height={24} className="max-w-28" />
 
             <div className="space-y-4">
-              <Tabs
-                value={method}
-                onValueChange={(v) => setMethod(v as LoginMethod)}
-                className="flex flex-col gap-4"
-              >
+              <Tabs value={method} onValueChange={(v) => setMethod(v as LoginMethod)} className="flex flex-col gap-4">
                 <TabsList className="w-full">
                   <TabsTrigger className="w-1/2" value="accessKeyAndSecretKey">
                     {t("Key Login")}
@@ -101,9 +89,7 @@ export function LoginForm({
                     {method === "accessKeyAndSecretKey" ? (
                       <>
                         <Field>
-                          <FieldLabel htmlFor="accessKey">
-                            {t("Account")}
-                          </FieldLabel>
+                          <FieldLabel htmlFor="accessKey">{t("Account")}</FieldLabel>
                           <FieldContent>
                             <Input
                               id="accessKey"
@@ -142,9 +128,7 @@ export function LoginForm({
                     ) : (
                       <>
                         <Field>
-                          <FieldLabel htmlFor="stsAccessKey">
-                            {t("STS Username")}
-                          </FieldLabel>
+                          <FieldLabel htmlFor="stsAccessKey">{t("STS Username")}</FieldLabel>
                           <FieldContent>
                             <Input
                               id="stsAccessKey"
@@ -162,9 +146,7 @@ export function LoginForm({
                           </FieldContent>
                         </Field>
                         <Field>
-                          <FieldLabel htmlFor="stsSecretKey">
-                            {t("STS Key")}
-                          </FieldLabel>
+                          <FieldLabel htmlFor="stsSecretKey">{t("STS Key")}</FieldLabel>
                           <FieldContent>
                             <Input
                               id="stsSecretKey"
@@ -182,9 +164,7 @@ export function LoginForm({
                           </FieldContent>
                         </Field>
                         <Field>
-                          <FieldLabel htmlFor="sessionToken">
-                            {t("STS Session Token")}
-                          </FieldLabel>
+                          <FieldLabel htmlFor="sessionToken">{t("STS Session Token")}</FieldLabel>
                           <FieldContent>
                             <Input
                               id="sessionToken"
@@ -197,20 +177,14 @@ export function LoginForm({
                               }
                               autoComplete="new-password"
                               type="text"
-                              placeholder={t(
-                                "Please enter STS session token"
-                              )}
+                              placeholder={t("Please enter STS session token")}
                             />
                           </FieldContent>
                         </Field>
                       </>
                     )}
 
-                    <Button
-                      type="submit"
-                      variant="default"
-                      className="w-full justify-center"
-                    >
+                    <Button type="submit" variant="default" className="w-full justify-center">
                       {t("Login")}
                     </Button>
                   </div>
@@ -221,10 +195,7 @@ export function LoginForm({
             <div>
               <p className="text-sm text-gray-600 dark:text-neutral-400">
                 {t("Login Problems?")}{" "}
-                <Link
-                  href="https://www.rustfs.com"
-                  className="text-blue-600 hover:underline"
-                >
+                <Link href="https://www.rustfs.com" className="text-blue-600 hover:underline">
                   {t("Get Help")}
                 </Link>
               </p>
diff --git a/components/buckets/events-tab.tsx b/components/buckets/events-tab.tsx
index cc63fec1..6404b725 100644
--- a/components/buckets/events-tab.tsx
+++ b/components/buckets/events-tab.tsx
@@ -43,7 +43,7 @@ export function BucketEventsTab({ bucketName }: BucketEventsTabProps) {
           Filter?: { Key?: { FilterRules?: Array<{ Name: string; Value: string }> } }
         }>,
         type: NotificationItem["type"],
-        arnKey: "LambdaFunctionArn" | "QueueArn" | "TopicArn"
+        arnKey: "LambdaFunctionArn" | "QueueArn" | "TopicArn",
       ) => {
         ;(configs ?? []).forEach(
           (config: {
@@ -51,12 +51,8 @@ export function BucketEventsTab({ bucketName }: BucketEventsTabProps) {
             Filter?: { Key?: { FilterRules?: Array<{ Name: string; Value: string }> } }
             Events?: string[]
           }) => {
-            const prefix = config.Filter?.Key?.FilterRules?.find(
-              (r) => r.Name === "Prefix"
-            )?.Value
-            const suffix = config.Filter?.Key?.FilterRules?.find(
-              (r) => r.Name === "Suffix"
-            )?.Value
+            const prefix = config.Filter?.Key?.FilterRules?.find((r) => r.Name === "Prefix")?.Value
+            const suffix = config.Filter?.Key?.FilterRules?.find((r) => r.Name === "Suffix")?.Value
             const arn = (config as Record<string, string>)[arnKey]
             notifications.push({
               id: config.Id ?? "",
@@ -67,7 +63,7 @@ export function BucketEventsTab({ bucketName }: BucketEventsTabProps) {
               suffix,
               filterRules: config.Filter?.Key?.FilterRules ?? [],
             })
-          }
+          },
         )
       }
 
@@ -77,21 +73,9 @@ export function BucketEventsTab({ bucketName }: BucketEventsTabProps) {
         TopicConfigurations?: unknown[]
       }
 
-      addFromConfig(
-        (r?.LambdaFunctionConfigurations ?? []) as never[],
-        "Lambda",
-        "LambdaFunctionArn"
-      )
-      addFromConfig(
-        (r?.QueueConfigurations ?? []) as never[],
-        "SQS",
-        "QueueArn"
-      )
-      addFromConfig(
-        (r?.TopicConfigurations ?? []) as never[],
-        "SNS",
-        "TopicArn"
-      )
+      addFromConfig((r?.LambdaFunctionConfigurations ?? []) as never[], "Lambda", "LambdaFunctionArn")
+      addFromConfig((r?.QueueConfigurations ?? []) as never[], "SQS", "QueueArn")
+      addFromConfig((r?.TopicConfigurations ?? []) as never[], "SNS", "TopicArn")
 
       setData(notifications)
     } catch {
@@ -110,9 +94,7 @@ export function BucketEventsTab({ bucketName }: BucketEventsTabProps) {
       const confirmed = await new Promise<boolean>((resolve) => {
         dialog.warning({
           title: t("Confirm Delete"),
-          content: t(
-            "Are you sure you want to delete this notification configuration?"
-          ),
+          content: t("Are you sure you want to delete this notification configuration?"),
           positiveText: t("Delete"),
           negativeText: t("Cancel"),
           onPositiveClick: () => resolve(true),
@@ -125,10 +107,7 @@ export function BucketEventsTab({ bucketName }: BucketEventsTabProps) {
       try {
         setLoading(true)
         const currentResponse = await listBucketNotifications(bucketName)
-        const currentNotifications = (currentResponse ?? {}) as unknown as Record<
-          string,
-          unknown[]
-        >
+        const currentNotifications = (currentResponse ?? {}) as unknown as Record<string, unknown[]>
 
         const configKey =
           row.type === "Lambda"
@@ -136,9 +115,7 @@ export function BucketEventsTab({ bucketName }: BucketEventsTabProps) {
             : row.type === "SQS"
               ? "QueueConfigurations"
               : "TopicConfigurations"
-        const configs = (
-          currentNotifications as Record<string, Array<{ Id?: string }>>
-        )[configKey]
+        const configs = (currentNotifications as Record<string, Array<{ Id?: string }>>)[configKey]
         const updated = configs?.filter((c) => c.Id !== row.id) ?? []
 
         const newConfig = {
@@ -154,28 +131,15 @@ export function BucketEventsTab({ bucketName }: BucketEventsTabProps) {
         message.success(t("Delete Success"))
         loadData()
       } catch (error) {
-        message.error(
-          `${t("Delete Failed")}: ${(error as Error).message ?? error}`
-        )
+        message.error(`${t("Delete Failed")}: ${(error as Error).message ?? error}`)
       } finally {
         setLoading(false)
       }
     },
-    [
-      bucketName,
-      dialog,
-      listBucketNotifications,
-      loadData,
-      message,
-      putBucketNotifications,
-      t,
-    ]
+    [bucketName, dialog, listBucketNotifications, loadData, message, putBucketNotifications, t],
   )
 
-  const columns = React.useMemo(
-    () => getEventsColumns(t, handleRowDelete),
-    [t, handleRowDelete]
-  )
+  const columns = React.useMemo(() => getEventsColumns(t, handleRowDelete), [t, handleRowDelete])
 
   const { table } = useDataTable<NotificationItem>({
     data,
@@ -206,12 +170,7 @@ export function BucketEventsTab({ bucketName }: BucketEventsTabProps) {
         emptyDescription={t("Add Event Subscription to get started")}
       />
 
-      <EventsNewForm
-        open={newFormOpen}
-        onOpenChange={setNewFormOpen}
-        bucketName={bucketName}
-        onSuccess={loadData}
-      />
+      <EventsNewForm open={newFormOpen} onOpenChange={setNewFormOpen} bucketName={bucketName} onSuccess={loadData} />
     </div>
   )
 }
diff --git a/components/buckets/info.tsx b/components/buckets/info.tsx
index 0585e1e2..67261da1 100644
--- a/components/buckets/info.tsx
+++ b/components/buckets/info.tsx
@@ -5,15 +5,7 @@ import { useTranslation } from "react-i18next"
 import { RiAddLine, RiCloseLine, RiEdit2Line } from "@remixicon/react"
 import { useBucket } from "@/hooks/use-bucket"
 import { useSSE } from "@/hooks/use-sse"
-import {
-  Item,
-  ItemContent,
-  ItemDescription,
-  ItemGroup,
-  ItemHeader,
-  ItemTitle,
-  ItemActions,
-} from "@/components/ui/item"
+import { Item, ItemContent, ItemDescription, ItemGroup, ItemHeader, ItemTitle, ItemActions } from "@/components/ui/item"
 import { Button } from "@/components/ui/button"
 import { Switch } from "@/components/ui/switch"
 import { Spinner } from "@/components/ui/spinner"
@@ -21,20 +13,8 @@ import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { Field, FieldContent, FieldLabel } from "@/components/ui/field"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -67,8 +47,10 @@ interface QuotaInfo {
 
 function parseEncryptionLabel(
   enc?: {
-    ServerSideEncryptionConfiguration?: { Rules?: Array<{ ApplyServerSideEncryptionByDefault?: { SSEAlgorithm?: string } }> }
-  } | null
+    ServerSideEncryptionConfiguration?: {
+      Rules?: Array<{ ApplyServerSideEncryptionByDefault?: { SSEAlgorithm?: string } }>
+    }
+  } | null,
 ): string {
   if (!enc?.ServerSideEncryptionConfiguration?.Rules?.length) return "-"
   const rule = enc.ServerSideEncryptionConfiguration.Rules[0]
@@ -93,7 +75,7 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
   const [retentionUnit, setRetentionUnit] = React.useState<string | null>(null)
   const [loading, setLoading] = React.useState(true)
   const [versionLoading, setVersionLoading] = React.useState(false)
-  const [objectLockLoading, setObjectLockLoading] = React.useState(false)
+  const [objectLockLoading] = React.useState(false)
 
   const [showPolicyModal, setShowPolicyModal] = React.useState(false)
   const [policyFormPolicy, setPolicyFormPolicy] = React.useState<BucketPolicyType | "custom">("private")
@@ -142,7 +124,7 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
           const detected = detectBucketPolicy(
             (parsed.Statement ?? []) as Parameters<typeof detectBucketPolicy>[0],
             bucketName,
-            ""
+            "",
           )
           setPolicyType(detected === "none" ? "custom" : detected)
         } catch {
@@ -157,7 +139,7 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
         (tagResp as { TagSet?: Array<{ Key?: string; Value?: string }> })?.TagSet?.map((x) => ({
           Key: x.Key ?? "",
           Value: x.Value ?? "",
-        })) ?? []
+        })) ?? [],
       )
 
       const lockCfg = lockResp as {
@@ -210,16 +192,8 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
         JSON.parse(policyFormContent)
         await bucketApi.putBucketPolicy(bucketName, policyFormContent)
       } else {
-        const statements = setBucketPolicy(
-          [],
-          policyFormPolicy as BucketPolicyType,
-          bucketName,
-          ""
-        )
-        await bucketApi.putBucketPolicy(
-          bucketName,
-          JSON.stringify({ Version: "2012-10-17", Statement: statements })
-        )
+        const statements = setBucketPolicy([], policyFormPolicy as BucketPolicyType, bucketName, "")
+        await bucketApi.putBucketPolicy(bucketName, JSON.stringify({ Version: "2012-10-17", Statement: statements }))
       }
       message.success(t("Edit Success"))
       setShowPolicyModal(false)
@@ -255,12 +229,13 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
     if (showEncryptModal && encryptFormType === "SSE-KMS") {
       getKeyList()
         .then((keys) => {
-          const list = (keys as { keys?: Array<{ key_id?: string; tags?: { name?: string }; description?: string }> })?.keys ?? []
+          const list =
+            (keys as { keys?: Array<{ key_id?: string; tags?: { name?: string }; description?: string }> })?.keys ?? []
           setKmsKeyOptions(
             list.map((k) => ({
               label: k.tags?.name ?? k.description ?? `Key-${(k.key_id ?? "").slice(0, 8)}`,
               value: k.key_id ?? "",
-            }))
+            })),
           )
         })
         .catch(() => setKmsKeyOptions([]))
@@ -452,9 +427,7 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
           ? t("Private")
           : policyType
 
-  const encryptionLabel = parseEncryptionLabel(
-    encryption as Parameters<typeof parseEncryptionLabel>[0]
-  )
+  const encryptionLabel = parseEncryptionLabel(encryption as Parameters<typeof parseEncryptionLabel>[0])
 
   if (loading) {
     return (
@@ -488,9 +461,7 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
           <ItemHeader className="items-start">
             <div className="flex flex-col gap-1">
               <ItemTitle>{t("Encryption")}</ItemTitle>
-              <ItemDescription className="text-xs text-muted-foreground">
-                {encryptionLabel}
-              </ItemDescription>
+              <ItemDescription className="text-xs text-muted-foreground">{encryptionLabel}</ItemDescription>
             </div>
             <ItemActions>
               <Button variant="outline" size="sm" className="shrink-0" onClick={openEncryptModal}>
@@ -520,19 +491,10 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
                     key={`${tag.Key}-${index}`}
                     className="flex items-center gap-2 rounded-full border bg-muted/40 px-3 py-1 text-xs"
                   >
-                    <button
-                      type="button"
-                      className="text-left hover:underline"
-                      onClick={() => openTagModal(index)}
-                    >
+                    <button type="button" className="text-left hover:underline" onClick={() => openTagModal(index)}>
                       {tag.Key}:{tag.Value}
                     </button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-6 w-6 p-0"
-                      onClick={() => setDeleteTagIndex(index)}
-                    >
+                    <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => setDeleteTagIndex(index)}>
                       <RiCloseLine className="size-3.5" />
                     </Button>
                   </div>
@@ -547,11 +509,7 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
         {/* Object Lock & Version Control */}
         <Item variant="outline" className="flex-col items-stretch gap-4">
           <ItemHeader>
-            <ItemActions>
-              {objectLockLoading && (
-                <Spinner className="size-3 text-muted-foreground" />
-              )}
-            </ItemActions>
+            <ItemActions>{objectLockLoading && <Spinner className="size-3 text-muted-foreground" />}</ItemActions>
           </ItemHeader>
           <ItemContent className="flex flex-col gap-3">
             <div className="flex items-center justify-between gap-3">
@@ -561,9 +519,7 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
             <div className="flex items-center justify-between gap-3">
               <div className="flex items-center gap-2">
                 <p className="text-sm font-medium text-foreground">{t("Version Control")}</p>
-                {versionLoading && (
-                  <Spinner className="size-3 text-muted-foreground" />
-                )}
+                {versionLoading && <Spinner className="size-3 text-muted-foreground" />}
               </div>
               <Switch
                 checked={versioning === "Enabled"}
@@ -594,15 +550,12 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
               <div className="grid gap-3 sm:grid-cols-2">
                 <div>
                   <p className="text-xs text-muted-foreground">{t("Quota Size")}</p>
-                  <p className="text-sm text-foreground">
-                    {formatBytes(quotaInfo.quota)}
-                  </p>
+                  <p className="text-sm text-foreground">{formatBytes(quotaInfo.quota)}</p>
                 </div>
                 <div>
                   <p className="text-xs text-muted-foreground">{t("Usage")}</p>
                   <p className="text-sm text-foreground">
-                    {formatBytes(quotaInfo.size)} (
-                    {((quotaInfo.size / quotaInfo.quota) * 100).toFixed(1)}%)
+                    {formatBytes(quotaInfo.size)} ({((quotaInfo.size / quotaInfo.quota) * 100).toFixed(1)}%)
                   </p>
                 </div>
               </div>
@@ -629,15 +582,11 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
             <div className="grid gap-3 sm:grid-cols-2">
               <div>
                 <p className="text-xs text-muted-foreground">{t("Retention Mode")}</p>
-                <p className="text-sm text-foreground">
-                  {retentionMode ? t(retentionMode) : "-"}
-                </p>
+                <p className="text-sm text-foreground">{retentionMode ? t(retentionMode) : "-"}</p>
               </div>
               <div>
                 <p className="text-xs text-muted-foreground">{t("Retention Unit")}</p>
-                <p className="text-sm text-foreground">
-                  {retentionUnit ? t(retentionUnit) : "-"}
-                </p>
+                <p className="text-sm text-foreground">{retentionUnit ? t(retentionUnit) : "-"}</p>
               </div>
               <div>
                 <p className="text-xs text-muted-foreground">{t("Retention Period")}</p>
@@ -819,7 +768,7 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
                           <label
                             key={u}
                             className={cn(
-                              "flex items-start gap-3 rounded-md border border-border/50 p-3 cursor-pointer"
+                              "flex items-start gap-3 rounded-md border border-border/50 p-3 cursor-pointer",
                             )}
                           >
                             <RadioGroupItem value={u} className="mt-0.5" />
diff --git a/components/buckets/lifecycle-tab.tsx b/components/buckets/lifecycle-tab.tsx
index c93b4312..54c8a54b 100644
--- a/components/buckets/lifecycle-tab.tsx
+++ b/components/buckets/lifecycle-tab.tsx
@@ -43,11 +43,7 @@ export function BucketLifecycleTab({ bucketName }: BucketLifecycleTabProps) {
   const { t } = useTranslation()
   const message = useMessage()
   const dialog = useDialog()
-  const {
-    getBucketLifecycleConfiguration,
-    deleteBucketLifecycle,
-    putBucketLifecycleConfiguration,
-  } = useBucket()
+  const { getBucketLifecycleConfiguration, deleteBucketLifecycle, putBucketLifecycleConfiguration } = useBucket()
 
   const [data, setData] = React.useState<LifecycleRule[]>([])
   const [loading, setLoading] = React.useState(false)
@@ -72,15 +68,46 @@ export function BucketLifecycleTab({ bucketName }: BucketLifecycleTabProps) {
     loadData()
   }, [loadData])
 
+  const handleRowDelete = React.useCallback(
+    async (row: LifecycleRule) => {
+      const remaining = data.filter((item) => item.ID !== row.ID)
+
+      try {
+        if (remaining.length === 0) {
+          await deleteBucketLifecycle(bucketName)
+        } else {
+          await putBucketLifecycleConfiguration(bucketName, {
+            Rules: remaining,
+          })
+        }
+        message.success(t("Delete Success"))
+        loadData()
+      } catch (error) {
+        message.error((error as Error).message || t("Delete Failed"))
+      }
+    },
+    [data, deleteBucketLifecycle, bucketName, putBucketLifecycleConfiguration, message, t, loadData],
+  )
+
+  const confirmDelete = React.useCallback(
+    (row: LifecycleRule) => {
+      dialog.error({
+        title: t("Warning"),
+        content: t("Are you sure you want to delete this rule?"),
+        positiveText: t("Confirm"),
+        negativeText: t("Cancel"),
+        onPositiveClick: () => handleRowDelete(row),
+      })
+    },
+    [dialog, t, handleRowDelete],
+  )
+
   const columns: ColumnDef<LifecycleRule>[] = React.useMemo(
     () => [
       {
         id: "type",
         header: () => t("Type"),
-        accessorFn: (row) =>
-          row.Transitions || row.NoncurrentVersionTransitions
-            ? "Transition"
-            : "Expire",
+        accessorFn: (row) => (row.Transitions || row.NoncurrentVersionTransitions ? "Transition" : "Expire"),
       },
       {
         id: "version",
@@ -93,22 +120,18 @@ export function BucketLifecycleTab({ bucketName }: BucketLifecycleTabProps) {
       {
         id: "deleteMarker",
         header: () => t("Expiration Delete Mark"),
-        accessorFn: (row) =>
-          row.Expiration?.ExpiredObjectDeleteMarker ? t("On") : t("Off"),
+        accessorFn: (row) => (row.Expiration?.ExpiredObjectDeleteMarker ? t("On") : t("Off")),
       },
       {
         id: "tier",
         header: () => t("Tier"),
         accessorFn: (row) =>
-          row.Transitions?.[0]?.StorageClass ||
-          row.NoncurrentVersionTransitions?.[0]?.StorageClass ||
-          "--",
+          row.Transitions?.[0]?.StorageClass || row.NoncurrentVersionTransitions?.[0]?.StorageClass || "--",
       },
       {
         id: "prefix",
         header: () => t("Prefix"),
-        accessorFn: (row) =>
-          row.Filter?.Prefix || row.Filter?.And?.Prefix || "",
+        accessorFn: (row) => row.Filter?.Prefix || row.Filter?.And?.Prefix || "",
       },
       {
         id: "timeCycle",
@@ -125,11 +148,7 @@ export function BucketLifecycleTab({ bucketName }: BucketLifecycleTabProps) {
         header: () => t("Status"),
         accessorFn: (row) => row.Status ?? "-",
         cell: ({ row }) => (
-          <Badge
-            variant={
-              row.original.Status === "Enabled" ? "secondary" : "destructive"
-            }
-          >
+          <Badge variant={row.original.Status === "Enabled" ? "secondary" : "destructive"}>
             {row.original.Status ?? "-"}
           </Badge>
         ),
@@ -140,11 +159,7 @@ export function BucketLifecycleTab({ bucketName }: BucketLifecycleTabProps) {
         enableSorting: false,
         cell: ({ row }) => (
           <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => confirmDelete(row.original)}
-            >
+            <Button variant="outline" size="sm" onClick={() => confirmDelete(row.original)}>
               <RiDeleteBin5Line className="size-4" aria-hidden />
               <span>{t("Delete")}</span>
             </Button>
@@ -152,7 +167,7 @@ export function BucketLifecycleTab({ bucketName }: BucketLifecycleTabProps) {
         ),
       },
     ],
-    [t]
+    [t, confirmDelete],
   )
 
   const { table } = useDataTable<LifecycleRule>({
@@ -161,34 +176,6 @@ export function BucketLifecycleTab({ bucketName }: BucketLifecycleTabProps) {
     getRowId: (row) => row.ID ?? JSON.stringify(row),
   })
 
-  const confirmDelete = (row: LifecycleRule) => {
-    dialog.error({
-      title: t("Warning"),
-      content: t("Are you sure you want to delete this rule?"),
-      positiveText: t("Confirm"),
-      negativeText: t("Cancel"),
-      onPositiveClick: () => handleRowDelete(row),
-    })
-  }
-
-  const handleRowDelete = async (row: LifecycleRule) => {
-    const remaining = data.filter((item) => item.ID !== row.ID)
-
-    try {
-      if (remaining.length === 0) {
-        await deleteBucketLifecycle(bucketName)
-      } else {
-        await putBucketLifecycleConfiguration(bucketName, {
-          Rules: remaining,
-        })
-      }
-      message.success(t("Delete Success"))
-      loadData()
-    } catch (error) {
-      message.error((error as Error).message || t("Delete Failed"))
-    }
-  }
-
   return (
     <div className="flex flex-col gap-4">
       <div className="flex items-center justify-between">
@@ -209,17 +196,10 @@ export function BucketLifecycleTab({ bucketName }: BucketLifecycleTabProps) {
         table={table}
         isLoading={loading}
         emptyTitle={t("No Data")}
-        emptyDescription={t(
-          "Create lifecycle rules to automate object transitions and expiration."
-        )}
+        emptyDescription={t("Create lifecycle rules to automate object transitions and expiration.")}
       />
 
-      <LifecycleNewForm
-        open={newFormOpen}
-        onOpenChange={setNewFormOpen}
-        bucketName={bucketName}
-        onSuccess={loadData}
-      />
+      <LifecycleNewForm open={newFormOpen} onOpenChange={setNewFormOpen} bucketName={bucketName} onSuccess={loadData} />
     </div>
   )
 }
diff --git a/components/buckets/new-form.tsx b/components/buckets/new-form.tsx
index a9b646f8..da6083be 100644
--- a/components/buckets/new-form.tsx
+++ b/components/buckets/new-form.tsx
@@ -7,13 +7,7 @@ import { Input } from "@/components/ui/input"
 import { Field, FieldContent, FieldLabel } from "@/components/ui/field"
 import { Switch } from "@/components/ui/switch"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { useMessage } from "@/lib/feedback/message"
 import { useBucket } from "@/hooks/use-bucket"
 import { getBytes } from "@/lib/functions"
@@ -37,12 +31,7 @@ const retentionUnitOptions = [
 export function BucketNewForm({ show, onShowChange }: BucketNewFormProps) {
   const { t } = useTranslation()
   const message = useMessage()
-  const {
-    createBucket,
-    putBucketVersioning,
-    putObjectLockConfiguration,
-    putBucketQuota,
-  } = useBucket()
+  const { createBucket, putBucketVersioning, putObjectLockConfiguration, putBucketQuota } = useBucket()
 
   const [objectKey, setObjectKey] = React.useState("")
   const [version, setVersion] = React.useState(false)
@@ -57,15 +46,9 @@ export function BucketNewForm({ show, onShowChange }: BucketNewFormProps) {
   const [creating, setCreating] = React.useState(false)
 
   const trimmedBucketName = objectKey.trim()
-  const showNameError =
-    trimmedBucketName.length > 0 &&
-    (trimmedBucketName.length < 3 || trimmedBucketName.length > 63)
-  const parsedRetentionPeriod = Math.max(
-    1,
-    Number.parseInt(retentionPeriod, 10) || 1
-  )
-  const isSubmitDisabled =
-    creating || trimmedBucketName.length < 3 || trimmedBucketName.length > 63
+  const showNameError = trimmedBucketName.length > 0 && (trimmedBucketName.length < 3 || trimmedBucketName.length > 63)
+  const parsedRetentionPeriod = Math.max(1, Number.parseInt(retentionPeriod, 10) || 1)
+  const isSubmitDisabled = creating || trimmedBucketName.length < 3 || trimmedBucketName.length > 63
 
   React.useEffect(() => {
     if (objectLock) setVersion(true)
@@ -171,10 +154,7 @@ export function BucketNewForm({ show, onShowChange }: BucketNewFormProps) {
                 value={objectKey}
                 onChange={(e) => setObjectKey(e.target.value)}
                 autoComplete="off"
-                className={cn(
-                  "w-full",
-                  showNameError && "border-destructive focus-visible:ring-destructive"
-                )}
+                className={cn("w-full", showNameError && "border-destructive focus-visible:ring-destructive")}
               />
             </FieldContent>
           </Field>
@@ -218,10 +198,7 @@ export function BucketNewForm({ show, onShowChange }: BucketNewFormProps) {
                       className="grid grid-cols-2 gap-2 sm:grid-cols-4"
                     >
                       {["MiB", "GiB", "TiB", "PiB"].map((unit) => (
-                        <label
-                          key={unit}
-                          className="flex items-start gap-3 rounded-md border border-border/50 p-3"
-                        >
+                        <label key={unit} className="flex items-start gap-3 rounded-md border border-border/50 p-3">
                           <RadioGroupItem value={unit} className="mt-0.5" />
                           <span className="text-sm font-medium">{unit}</span>
                         </label>
@@ -238,10 +215,7 @@ export function BucketNewForm({ show, onShowChange }: BucketNewFormProps) {
               <Field orientation="responsive" className="items-center">
                 <FieldLabel>{t("Retention")}</FieldLabel>
                 <FieldContent className="flex justify-end">
-                  <Switch
-                    checked={retentionEnabled}
-                    onCheckedChange={setRetentionEnabled}
-                  />
+                  <Switch checked={retentionEnabled} onCheckedChange={setRetentionEnabled} />
                 </FieldContent>
               </Field>
 
@@ -261,9 +235,7 @@ export function BucketNewForm({ show, onShowChange }: BucketNewFormProps) {
                             className="flex items-start gap-3 rounded-md border border-border/50 p-3"
                           >
                             <RadioGroupItem value={option.value} className="mt-0.5" />
-                            <span className="text-sm font-medium">
-                              {t(option.label)}
-                            </span>
+                            <span className="text-sm font-medium">{t(option.label)}</span>
                           </label>
                         ))}
                       </RadioGroup>
@@ -291,9 +263,7 @@ export function BucketNewForm({ show, onShowChange }: BucketNewFormProps) {
                               className="flex items-start gap-3 rounded-md border border-border/50 p-3"
                             >
                               <RadioGroupItem value={option.value} className="mt-0.5" />
-                              <span className="text-sm font-medium">
-                                {t(option.labelKey)}
-                              </span>
+                              <span className="text-sm font-medium">{t(option.labelKey)}</span>
                             </label>
                           ))}
                         </RadioGroup>
@@ -310,11 +280,7 @@ export function BucketNewForm({ show, onShowChange }: BucketNewFormProps) {
           <Button variant="outline" onClick={closeModal}>
             {t("Cancel")}
           </Button>
-          <Button
-            variant="default"
-            disabled={isSubmitDisabled}
-            onClick={handleCreateBucket}
-          >
+          <Button variant="default" disabled={isSubmitDisabled} onClick={handleCreateBucket}>
             {creating ? (
               <span className="flex items-center gap-2">
                 <span className="size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
diff --git a/components/buckets/replication-tab.tsx b/components/buckets/replication-tab.tsx
index 4d7e300d..23700044 100644
--- a/components/buckets/replication-tab.tsx
+++ b/components/buckets/replication-tab.tsx
@@ -29,12 +29,8 @@ export function BucketReplicationTab({ bucketName }: BucketReplicationTabProps)
   const { t } = useTranslation()
   const message = useMessage()
   const dialog = useDialog()
-  const {
-    getBucketReplication,
-    putBucketReplication,
-    deleteBucketReplication,
-    deleteRemoteReplicationTarget,
-  } = useBucket()
+  const { getBucketReplication, putBucketReplication, deleteBucketReplication, deleteRemoteReplicationTarget } =
+    useBucket()
 
   const [data, setData] = React.useState<ReplicationRule[]>([])
   const [loading, setLoading] = React.useState(false)
@@ -56,6 +52,57 @@ export function BucketReplicationTab({ bucketName }: BucketReplicationTabProps)
     loadData()
   }, [loadData])
 
+  const handleRowDelete = React.useCallback(
+    async (rule: ReplicationRule) => {
+      const remaining = data.filter((item) => item !== rule)
+
+      try {
+        if (remaining.length === 0) {
+          await deleteBucketReplication(bucketName)
+          await deleteRemoteReplicationTarget(bucketName, rule.Destination?.Bucket ?? "")
+        } else {
+          const currentConfig = await getBucketReplication(bucketName)
+          const role = currentConfig?.ReplicationConfiguration?.Role
+          if (!role) {
+            throw new Error("Replication configuration Role is missing")
+          }
+          await putBucketReplication(bucketName, {
+            Role: role,
+            Rules: remaining,
+          })
+        }
+        message.success(t("Delete Success"))
+        loadData()
+      } catch (error) {
+        message.error((error as Error).message || t("Delete Failed"))
+      }
+    },
+    [
+      data,
+      deleteBucketReplication,
+      bucketName,
+      deleteRemoteReplicationTarget,
+      getBucketReplication,
+      putBucketReplication,
+      message,
+      t,
+      loadData,
+    ],
+  )
+
+  const confirmDelete = React.useCallback(
+    (rule: ReplicationRule) => {
+      dialog.error({
+        title: t("Warning"),
+        content: t("Are you sure you want to delete this replication rule?"),
+        positiveText: t("Confirm"),
+        negativeText: t("Cancel"),
+        onPositiveClick: () => handleRowDelete(rule),
+      })
+    },
+    [dialog, t, handleRowDelete],
+  )
+
   const columns: ColumnDef<ReplicationRule>[] = React.useMemo(
     () => [
       {
@@ -67,11 +114,7 @@ export function BucketReplicationTab({ bucketName }: BucketReplicationTabProps)
         accessorKey: "Status",
         header: () => t("Status"),
         cell: ({ row }) => (
-          <Badge
-            variant={
-              row.original.Status === "Enabled" ? "secondary" : "outline"
-            }
-          >
+          <Badge variant={row.original.Status === "Enabled" ? "secondary" : "outline"}>
             {row.original.Status === "Enabled" ? t("Enabled") : t("Disabled")}
           </Badge>
         ),
@@ -97,9 +140,7 @@ export function BucketReplicationTab({ bucketName }: BucketReplicationTabProps)
       {
         id: "destination-storage",
         header: () => t("Storage Class"),
-        cell: ({ row }) => (
-          <span>{row.original.Destination?.StorageClass || "-"}</span>
-        ),
+        cell: ({ row }) => <span>{row.original.Destination?.StorageClass || "-"}</span>,
       },
       {
         id: "actions",
@@ -107,11 +148,7 @@ export function BucketReplicationTab({ bucketName }: BucketReplicationTabProps)
         enableSorting: false,
         cell: ({ row }) => (
           <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => confirmDelete(row.original)}
-            >
+            <Button variant="outline" size="sm" onClick={() => confirmDelete(row.original)}>
               <RiDeleteBin7Line className="size-4" aria-hidden />
               <span>{t("Delete")}</span>
             </Button>
@@ -119,7 +156,7 @@ export function BucketReplicationTab({ bucketName }: BucketReplicationTabProps)
         ),
       },
     ],
-    [t]
+    [t, confirmDelete],
   )
 
   const { table } = useDataTable<ReplicationRule>({
@@ -128,44 +165,6 @@ export function BucketReplicationTab({ bucketName }: BucketReplicationTabProps)
     getRowId: (row) => row.ID ?? JSON.stringify(row),
   })
 
-  const confirmDelete = (rule: ReplicationRule) => {
-    dialog.error({
-      title: t("Warning"),
-      content: t("Are you sure you want to delete this replication rule?"),
-      positiveText: t("Confirm"),
-      negativeText: t("Cancel"),
-      onPositiveClick: () => handleRowDelete(rule),
-    })
-  }
-
-  const handleRowDelete = async (rule: ReplicationRule) => {
-    const remaining = data.filter((item) => item !== rule)
-
-    try {
-      if (remaining.length === 0) {
-        await deleteBucketReplication(bucketName)
-        await deleteRemoteReplicationTarget(
-          bucketName,
-          rule.Destination?.Bucket ?? ""
-        )
-      } else {
-        const currentConfig = await getBucketReplication(bucketName)
-        const role = currentConfig?.ReplicationConfiguration?.Role
-        if (!role) {
-          throw new Error("Replication configuration Role is missing")
-        }
-        await putBucketReplication(bucketName, {
-          Role: role,
-          Rules: remaining,
-        })
-      }
-      message.success(t("Delete Success"))
-      loadData()
-    } catch (error) {
-      message.error((error as Error).message || t("Delete Failed"))
-    }
-  }
-
   return (
     <div className="flex flex-col gap-4">
       <div className="flex items-center justify-between">
@@ -186,9 +185,7 @@ export function BucketReplicationTab({ bucketName }: BucketReplicationTabProps)
         table={table}
         isLoading={loading}
         emptyTitle={t("No Data")}
-        emptyDescription={t(
-          "Add replication rules to sync objects across buckets."
-        )}
+        emptyDescription={t("Add replication rules to sync objects across buckets.")}
       />
 
       <ReplicationNewForm
diff --git a/components/buckets/selector.tsx b/components/buckets/selector.tsx
index 30800e64..64475ce4 100644
--- a/components/buckets/selector.tsx
+++ b/components/buckets/selector.tsx
@@ -3,13 +3,7 @@
 import * as React from "react"
 import { useState, useEffect, useRef } from "react"
 import { useTranslation } from "react-i18next"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Spinner } from "@/components/ui/spinner"
 import { useBucket } from "@/hooks/use-bucket"
 import { cn } from "@/lib/utils"
@@ -32,7 +26,6 @@ export function BucketSelector({
   placeholder = "Please select bucket",
   disabled = false,
   selectorClass,
-  cacheKey = "bucket-selector-buckets",
   layout = "inline",
   label,
   description,
@@ -56,9 +49,7 @@ export function BucketSelector({
             label: b.Name,
             value: b.Name,
           }))
-          .sort((a: { label: string }, b: { label: string }) =>
-            a.label.localeCompare(b.label)
-          )
+          .sort((a: { label: string }, b: { label: string }) => a.label.localeCompare(b.label))
         if (!cancelled) setBuckets(list)
       } catch {
         if (!cancelled) setBuckets([])
@@ -82,59 +73,34 @@ export function BucketSelector({
   const isLoading = loading
   const displayLabel = label || t("Bucket")
 
-  const containerClasses =
-    layout === "inline"
-      ? "flex items-center gap-3"
-      : "flex flex-col gap-2"
+  const containerClasses = layout === "inline" ? "flex items-center gap-3" : "flex flex-col gap-2"
 
-  const controlWrapperClasses =
-    layout === "inline"
-      ? "flex min-w-[220px] flex-col gap-1"
-      : "flex flex-col gap-1"
+  const controlWrapperClasses = layout === "inline" ? "flex min-w-[220px] flex-col gap-1" : "flex flex-col gap-1"
 
   return (
     <div className={cn(containerClasses)}>
       <div className={controlWrapperClasses}>
-        <Select
-          value={value ?? ""}
-          onValueChange={(v) => onChange(v || null)}
-          disabled={disabled || isLoading}
-        >
-          <SelectTrigger
-            className={cn("min-w-[200px]", selectorClass)}
-          >
+        <Select value={value ?? ""} onValueChange={(v) => onChange(v || null)} disabled={disabled || isLoading}>
+          <SelectTrigger className={cn("min-w-[200px]", selectorClass)}>
             <SelectValue placeholder={t(placeholder)}>
-              {value
-                ? `${displayLabel}: ${buckets.find((b) => b.value === value)?.label ?? value}`
-                : null}
+              {value ? `${displayLabel}: ${buckets.find((b) => b.value === value)?.label ?? value}` : null}
             </SelectValue>
           </SelectTrigger>
           <SelectContent>
             {buckets.length ? (
               buckets.map((opt) => (
-                <SelectItem
-                  key={opt.value}
-                  value={opt.value}
-                >
+                <SelectItem key={opt.value} value={opt.value}>
                   {opt.label}
                 </SelectItem>
               ))
             ) : (
-              <div className="px-2 py-3 text-sm text-muted-foreground">
-                {t("No options available")}
-              </div>
+              <div className="px-2 py-3 text-sm text-muted-foreground">{t("No options available")}</div>
             )}
           </SelectContent>
         </Select>
-        {description && (
-          <p className="text-xs text-muted-foreground">
-            {description}
-          </p>
-        )}
+        {description && <p className="text-xs text-muted-foreground">{description}</p>}
       </div>
-      {isLoading && layout === "inline" && (
-        <Spinner className="size-4 text-muted-foreground" />
-      )}
+      {isLoading && layout === "inline" && <Spinner className="size-4 text-muted-foreground" />}
     </div>
   )
 }
diff --git a/components/dashboard-auth-guard.tsx b/components/dashboard-auth-guard.tsx
index 64bb93fc..9fffed6f 100644
--- a/components/dashboard-auth-guard.tsx
+++ b/components/dashboard-auth-guard.tsx
@@ -1,16 +1,19 @@
 "use client"
 
 import { useEffect } from "react"
-import { useRouter } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation"
 import { useAuth } from "@/contexts/auth-context"
 import { useApiReady } from "@/contexts/api-context"
 import { useS3Ready } from "@/contexts/s3-context"
+import { usePermissions } from "@/hooks/use-permissions"
 
 export function DashboardAuthGuard({ children }: { children: React.ReactNode }) {
   const router = useRouter()
+  const pathname = usePathname()
   const { isAuthenticated } = useAuth()
   const { isReady: apiReady } = useApiReady()
   const { isReady: s3Ready } = useS3Ready()
+  const { isAdmin, userPolicy, isLoading, hasFetchedPolicy, fetchUserPolicy, canAccessPath } = usePermissions()
 
   const isReady = apiReady && s3Ready
 
@@ -20,11 +23,30 @@ export function DashboardAuthGuard({ children }: { children: React.ReactNode })
     }
   }, [isAuthenticated, isReady, router])
 
-  if (!isReady) {
+  useEffect(() => {
+    if (!isReady || !isAuthenticated || isAdmin) return
+    if (!userPolicy && !isLoading) {
+      void fetchUserPolicy()
+    }
+  }, [isReady, isAuthenticated, isAdmin, userPolicy, isLoading, fetchUserPolicy])
+
+  useEffect(() => {
+    if (!isReady || !isAuthenticated || isAdmin) return
+    if (isLoading || !hasFetchedPolicy) return
+    if (!canAccessPath(pathname)) {
+      router.replace("/403")
+    }
+  }, [isReady, isAuthenticated, isAdmin, isLoading, userPolicy, hasFetchedPolicy, canAccessPath, pathname, router])
+
+  if (!isReady || !isAuthenticated) {
+    return null
+  }
+
+  if (!isAdmin && (isLoading || !hasFetchedPolicy)) {
     return null
   }
 
-  if (!isAuthenticated) {
+  if (!isAdmin && !canAccessPath(pathname)) {
     return null
   }
 
diff --git a/components/data-table/data-table-pagination.tsx b/components/data-table/data-table-pagination.tsx
index f7e9794d..51a48062 100644
--- a/components/data-table/data-table-pagination.tsx
+++ b/components/data-table/data-table-pagination.tsx
@@ -4,13 +4,7 @@ import * as React from "react"
 import { useTranslation } from "react-i18next"
 import type { Table } from "@tanstack/react-table"
 import { Button } from "@/components/ui/button"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { cn } from "@/lib/utils"
 
 interface DataTablePaginationProps<TData> {
@@ -39,18 +33,10 @@ export function DataTablePagination<TData>({
   }
 
   return (
-    <div
-      className={cn(
-        "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
-        className
-      )}
-    >
+    <div className={cn("flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", className)}>
       <div className="flex items-center gap-3">
         <span className="text-sm text-muted-foreground">{t("Rows per page")}</span>
-        <Select
-          value={String(pagination.pageSize)}
-          onValueChange={handlePageSizeChange}
-        >
+        <Select value={String(pagination.pageSize)} onValueChange={handlePageSizeChange}>
           <SelectTrigger className="w-24">
             <SelectValue />
           </SelectTrigger>
@@ -72,28 +58,13 @@ export function DataTablePagination<TData>({
           })}
         </span>
         <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            disabled={!canPrevious}
-            onClick={() => table.setPageIndex(0)}
-          >
+          <Button variant="outline" size="sm" disabled={!canPrevious} onClick={() => table.setPageIndex(0)}>
             {t("First")}
           </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            disabled={!canPrevious}
-            onClick={() => table.previousPage()}
-          >
+          <Button variant="outline" size="sm" disabled={!canPrevious} onClick={() => table.previousPage()}>
             {t("Prev")}
           </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            disabled={!canNext}
-            onClick={() => table.nextPage()}
-          >
+          <Button variant="outline" size="sm" disabled={!canNext} onClick={() => table.nextPage()}>
             {t("Next")}
           </Button>
           <Button
diff --git a/components/data-table/data-table.tsx b/components/data-table/data-table.tsx
index afb888a4..726e4ea8 100644
--- a/components/data-table/data-table.tsx
+++ b/components/data-table/data-table.tsx
@@ -4,14 +4,7 @@ import * as React from "react"
 import { flexRender, type Column, type Table } from "@tanstack/react-table"
 import { RiArrowUpDownLine, RiArrowUpSLine, RiArrowDownSLine } from "@remixicon/react"
 import { ScrollArea } from "@/components/ui/scroll-area"
-import {
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Table as UiTable,
-} from "@/components/ui/table"
+import { TableBody, TableCell, TableHead, TableHeader, TableRow, Table as UiTable } from "@/components/ui/table"
 import { Spinner } from "@/components/ui/spinner"
 import { EmptyState } from "@/components/empty-state"
 import { cn } from "@/lib/utils"
@@ -28,7 +21,9 @@ interface DataTableProps<TData> {
 }
 
 function getColumnStyles<TData>(column: Column<TData, unknown>) {
-  const meta = column.columnDef.meta as { width?: number | string; minWidth?: number | string; maxWidth?: number | string } | undefined
+  const meta = column.columnDef.meta as
+    | { width?: number | string; minWidth?: number | string; maxWidth?: number | string }
+    | undefined
   if (!meta) return undefined
 
   const styles: React.CSSProperties = {}
@@ -77,10 +72,7 @@ export function DataTable<TData>({
     <UiTable className={cn(bodyHeight ? tableClass : "border rounded-md", tableClass)}>
       <TableHeader className={stickyHeader ? "sticky top-0 z-10 bg-muted/40 backdrop-blur" : ""}>
         {table.getHeaderGroups().map((headerGroup) => (
-          <TableRow
-            key={headerGroup.id}
-            className={stickyHeader ? "bg-muted/40 backdrop-blur" : undefined}
-          >
+          <TableRow key={headerGroup.id} className={stickyHeader ? "bg-muted/40 backdrop-blur" : undefined}>
             {headerGroup.headers.map((header) => (
               <TableHead
                 key={header.id}
@@ -156,9 +148,7 @@ export function DataTable<TData>({
   return (
     <div className={cn("flex flex-col gap-4", className)}>
       {bodyHeight ? (
-        <ScrollArea className={cn("rounded-md border", bodyHeight)}>
-          {tableContent}
-        </ScrollArea>
+        <ScrollArea className={cn("rounded-md border", bodyHeight)}>{tableContent}</ScrollArea>
       ) : (
         tableContent
       )}
diff --git a/components/datetime-picker.tsx b/components/datetime-picker.tsx
index 2a8493ca..1e4cd500 100644
--- a/components/datetime-picker.tsx
+++ b/components/datetime-picker.tsx
@@ -4,8 +4,7 @@ import * as React from "react"
 import dayjs from "dayjs"
 import { cn } from "@/lib/utils"
 
-interface DateTimePickerProps
-  extends Omit<React.ComponentProps<"input">, "value" | "onChange"> {
+interface DateTimePickerProps extends Omit<React.ComponentProps<"input">, "value" | "onChange"> {
   value?: string | null
   onChange?: (value: string | null) => void
   placeholder?: string
@@ -13,17 +12,8 @@ interface DateTimePickerProps
   max?: string
 }
 
-export function DateTimePicker({
-  value,
-  onChange,
-  placeholder,
-  min,
-  max,
-  className,
-  ...props
-}: DateTimePickerProps) {
-  const inputValue =
-    value && dayjs(value).isValid() ? dayjs(value).format("YYYY-MM-DDTHH:mm") : ""
+export function DateTimePicker({ value, onChange, placeholder, min, max, className, ...props }: DateTimePickerProps) {
+  const inputValue = value && dayjs(value).isValid() ? dayjs(value).format("YYYY-MM-DDTHH:mm") : ""
 
   const minValue = min && dayjs(min).isValid() ? dayjs(min).format("YYYY-MM-DDTHH:mm") : undefined
   const maxValue = max && dayjs(max).isValid() ? dayjs(max).format("YYYY-MM-DDTHH:mm") : undefined
@@ -48,7 +38,7 @@ export function DateTimePicker({
       max={maxValue}
       className={cn(
         "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />
diff --git a/components/dialog-host.tsx b/components/dialog-host.tsx
index bd661089..073490d9 100644
--- a/components/dialog-host.tsx
+++ b/components/dialog-host.tsx
@@ -22,7 +22,7 @@ function positiveButtonVariant(dialog: DialogInstance) {
 function handleAction(
   controller: ReturnType<typeof useDialogController>,
   dialog: DialogInstance,
-  action?: DialogInstance["onPositiveClick"] | DialogInstance["onNegativeClick"]
+  action?: DialogInstance["onPositiveClick"] | DialogInstance["onNegativeClick"],
 ) {
   if (!action) {
     controller.close(dialog.id)
@@ -49,17 +49,11 @@ export function DialogHost() {
   return (
     <>
       {dialogs.map((dialog) => (
-        <AlertDialog
-          key={dialog.id}
-          open={dialog.open}
-          onOpenChange={(value) => controller.setOpen(dialog.id, value)}
-        >
+        <AlertDialog key={dialog.id} open={dialog.open} onOpenChange={(value) => controller.setOpen(dialog.id, value)}>
           <AlertDialogContent className="sm:max-w-md">
             <AlertDialogHeader>
               {dialog.title && <AlertDialogTitle>{dialog.title}</AlertDialogTitle>}
-              {dialog.content && (
-                <AlertDialogDescription>{dialog.content}</AlertDialogDescription>
-              )}
+              {dialog.content && <AlertDialogDescription>{dialog.content}</AlertDialogDescription>}
             </AlertDialogHeader>
             <AlertDialogFooter>
               {dialog.negativeText && (
@@ -82,7 +76,7 @@ export function DialogHost() {
                   className={cn(
                     buttonVariants({ variant: positiveButtonVariant(dialog) }),
                     "w-full sm:w-auto",
-                    positiveButtonVariant(dialog) === "destructive" && "text-white"
+                    positiveButtonVariant(dialog) === "destructive" && "text-white",
                   )}
                   onClick={(e) => {
                     e.preventDefault()
diff --git a/components/empty-state.tsx b/components/empty-state.tsx
index 60190601..5fcf2341 100644
--- a/components/empty-state.tsx
+++ b/components/empty-state.tsx
@@ -1,13 +1,6 @@
 "use client"
 
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/components/ui/empty"
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
 import { cn } from "@/lib/utils"
 
 interface EmptyStateProps {
@@ -18,19 +11,16 @@ interface EmptyStateProps {
   className?: string
 }
 
-export function EmptyState({
-  title,
-  description,
-  icon,
-  children,
-  className,
-}: EmptyStateProps) {
+export function EmptyState({ title, description, icon, children, className }: EmptyStateProps) {
   return (
     <Empty className={cn("py-10", className)}>
       <EmptyContent className="max-w-sm text-center">
         <EmptyHeader>
           {icon && (
-            <EmptyMedia variant="icon" className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+            <EmptyMedia
+              variant="icon"
+              className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted"
+            >
               {icon}
             </EmptyMedia>
           )}
diff --git a/components/events-target/new-form.tsx b/components/events-target/new-form.tsx
index ac9b47a7..0010c754 100644
--- a/components/events-target/new-form.tsx
+++ b/components/events-target/new-form.tsx
@@ -5,13 +5,7 @@ import Image from "next/image"
 import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"
 import { useEventTarget } from "@/hooks/use-event-target"
 import { useMessage } from "@/lib/feedback/message"
@@ -24,10 +18,7 @@ interface EventsTargetNewFormProps {
   onSuccess?: () => void
 }
 
-const CONFIG_OPTIONS: Record<
-  string,
-  Array<{ label: string; name: string; type: "text" | "password" | "number" }>
-> = {
+const CONFIG_OPTIONS: Record<string, Array<{ label: string; name: string; type: "text" | "password" | "number" }>> = {
   MQTT: [
     { label: "MQTT_BROKER", name: "broker", type: "text" },
     { label: "MQTT_TOPIC", name: "topic", type: "text" },
@@ -64,11 +55,7 @@ const TYPE_OPTIONS = [
   },
 ] as const
 
-export function EventsTargetNewForm({
-  open,
-  onOpenChange,
-  onSuccess,
-}: EventsTargetNewFormProps) {
+export function EventsTargetNewForm({ open, onOpenChange, onSuccess }: EventsTargetNewFormProps) {
   const { t } = useTranslation()
   const message = useMessage()
   const { updateEventTarget } = useEventTarget()
@@ -133,9 +120,7 @@ export function EventsTargetNewForm({
       message.error(nameError)
       return false
     }
-    const hasConfig = Object.values(config).some(
-      (v) => v !== "" && v !== null && v !== undefined,
-    )
+    const hasConfig = Object.values(config).some((v) => v !== "" && v !== null && v !== undefined)
     if (!hasConfig) {
       message.error(t("Please fill in at least one configuration item"))
       return false
@@ -176,9 +161,7 @@ export function EventsTargetNewForm({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-lg">
         <DialogHeader>
-          <DialogTitle>
-            {type ? t("Add {type} Destination", { type }) : t("Add Event Destination")}
-          </DialogTitle>
+          <DialogTitle>{type ? t("Add {type} Destination", { type }) : t("Add Event Destination")}</DialogTitle>
         </DialogHeader>
         <div className="space-y-6">
           {!type ? (
@@ -188,9 +171,7 @@ export function EventsTargetNewForm({
                   key={option.value}
                   type="button"
                   onClick={() => setType(option.value)}
-                  className={cn(
-                    "cursor-pointer border border-border/70 text-left transition hover:border-primary",
-                  )}
+                  className={cn("cursor-pointer border border-border/70 text-left transition hover:border-primary")}
                 >
                   <div className="flex items-center gap-3 p-4">
                     <Image
@@ -225,9 +206,7 @@ export function EventsTargetNewForm({
                   />
                 )}
                 <div className="flex flex-col">
-                  <span className="text-sm text-muted-foreground">
-                    {t("Selected Type")}
-                  </span>
+                  <span className="text-sm text-muted-foreground">{t("Selected Type")}</span>
                   <span className="text-base font-semibold">{type}</span>
                 </div>
               </button>
@@ -244,11 +223,7 @@ export function EventsTargetNewForm({
                       autoComplete="off"
                     />
                   </FieldContent>
-                  {nameError && (
-                    <FieldDescription className="text-destructive">
-                      {nameError}
-                    </FieldDescription>
-                  )}
+                  {nameError && <FieldDescription className="text-destructive">{nameError}</FieldDescription>}
                 </Field>
 
                 {currentConfigOptions.map((cfg) => (
@@ -261,10 +236,7 @@ export function EventsTargetNewForm({
                         onChange={(e) =>
                           setConfig((prev) => ({
                             ...prev,
-                            [cfg.name]:
-                              cfg.type === "number"
-                                ? Number(e.target.value) || 0
-                                : e.target.value,
+                            [cfg.name]: cfg.type === "number" ? Number(e.target.value) || 0 : e.target.value,
                           }))
                         }
                         type={cfg.type === "password" ? "password" : "text"}
diff --git a/components/events/columns.tsx b/components/events/columns.tsx
index 18dc004f..3a741ea4 100644
--- a/components/events/columns.tsx
+++ b/components/events/columns.tsx
@@ -3,37 +3,25 @@
 import { RiDeleteBin7Line } from "@remixicon/react"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
-import {
-  TYPE_BADGE_CLASSES,
-  getDisplayEvents,
-  type NotificationItem,
-} from "@/lib/events"
+import { TYPE_BADGE_CLASSES, getDisplayEvents, type NotificationItem } from "@/lib/events"
 import type { ColumnDef } from "@tanstack/react-table"
 import type { TFunction } from "i18next"
 
 export function getEventsColumns(
   t: TFunction,
-  onDelete: (row: NotificationItem) => void
+  onDelete: (row: NotificationItem) => void,
 ): ColumnDef<NotificationItem>[] {
   return [
     {
       id: "type",
       header: () => t("Type"),
-      cell: ({ row }) => (
-        <Badge className={TYPE_BADGE_CLASSES[row.original.type] ?? ""}>
-          {row.original.type}
-        </Badge>
-      ),
+      cell: ({ row }) => <Badge className={TYPE_BADGE_CLASSES[row.original.type] ?? ""}>{row.original.type}</Badge>,
       meta: { maxWidth: "7rem" },
     },
     {
       id: "arn",
       header: () => t("ARN"),
-      cell: ({ row }) => (
-        <span className="line-clamp-2 break-all font-medium">
-          {row.original.arn}
-        </span>
-      ),
+      cell: ({ row }) => <span className="line-clamp-2 break-all font-medium">{row.original.arn}</span>,
       meta: { maxWidth: "180px" },
     },
     {
@@ -53,17 +41,13 @@ export function getEventsColumns(
     {
       id: "prefix",
       header: () => t("Prefix"),
-      cell: ({ row }) => (
-        <span>{row.original.prefix ?? "-"}</span>
-      ),
+      cell: ({ row }) => <span>{row.original.prefix ?? "-"}</span>,
       meta: { maxWidth: "9rem" },
     },
     {
       id: "suffix",
       header: () => t("Suffix"),
-      cell: ({ row }) => (
-        <span>{row.original.suffix ?? "-"}</span>
-      ),
+      cell: ({ row }) => <span>{row.original.suffix ?? "-"}</span>,
       meta: { maxWidth: "9rem" },
     },
     {
diff --git a/components/events/new-form.tsx b/components/events/new-form.tsx
index 249602d7..b3e71fad 100644
--- a/components/events/new-form.tsx
+++ b/components/events/new-form.tsx
@@ -6,19 +6,8 @@ import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Checkbox } from "@/components/ui/checkbox"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { useBucket } from "@/hooks/use-bucket"
@@ -40,8 +29,7 @@ const EVENT_OPTIONS = [
   { value: "RESTORE", labelKey: "ILM - Object converted" },
   {
     value: "SCANNER",
-    labelKey:
-      "SCANNER - Object has too many versions/prefix has too many subfolders",
+    labelKey: "SCANNER - Object has too many versions/prefix has too many subfolders",
   },
 ] as const
 
@@ -54,12 +42,7 @@ const EVENT_MAPPING: Record<string, string[]> = {
   SCANNER: ["s3:Scanner:ManyVersions", "s3:Scanner:BigPrefix"],
 }
 
-export function EventsNewForm({
-  open,
-  onOpenChange,
-  bucketName,
-  onSuccess,
-}: EventsNewFormProps) {
+export function EventsNewForm({ open, onOpenChange, bucketName, onSuccess }: EventsNewFormProps) {
   const { t } = useTranslation()
   const message = useMessage()
   const { getEventTargetArnList } = useEventTarget()
@@ -104,11 +87,7 @@ export function EventsNewForm({
   const handleEventChecked = (eventValue: string, checked: boolean | "indeterminate") => {
     const isChecked = checked === true || checked === "indeterminate"
     setEvents((prev) =>
-      isChecked
-        ? prev.includes(eventValue)
-          ? prev
-          : [...prev, eventValue]
-        : prev.filter((e) => e !== eventValue)
+      isChecked ? (prev.includes(eventValue) ? prev : [...prev, eventValue]) : prev.filter((e) => e !== eventValue),
     )
   }
 
@@ -156,28 +135,17 @@ export function EventsNewForm({
             ? {
                 Key: {
                   FilterRules: [
-                    ...(prefix
-                      ? [{ Name: "Prefix" as const, Value: prefix }]
-                      : []),
-                    ...(suffix
-                      ? [{ Name: "Suffix" as const, Value: suffix }]
-                      : []),
+                    ...(prefix ? [{ Name: "Prefix" as const, Value: prefix }] : []),
+                    ...(suffix ? [{ Name: "Suffix" as const, Value: suffix }] : []),
                   ],
                 },
               }
             : undefined,
       }
 
-      const newLambda = arn.includes(":lambda:")
-        ? [{ ...baseConfig, LambdaFunctionArn: arn }]
-        : []
-      const newQueue = arn.includes(":sqs:")
-        ? [{ ...baseConfig, QueueArn: arn }]
-        : []
-      const newTopic =
-        !arn.includes(":lambda:") && !arn.includes(":sqs:")
-          ? [{ ...baseConfig, TopicArn: arn }]
-          : []
+      const newLambda = arn.includes(":lambda:") ? [{ ...baseConfig, LambdaFunctionArn: arn }] : []
+      const newQueue = arn.includes(":sqs:") ? [{ ...baseConfig, QueueArn: arn }] : []
+      const newTopic = !arn.includes(":lambda:") && !arn.includes(":sqs:") ? [{ ...baseConfig, TopicArn: arn }] : []
 
       const merged = {
         ...currentNotifications,
@@ -185,14 +153,8 @@ export function EventsNewForm({
           ...((currentNotifications.LambdaFunctionConfigurations as unknown[]) ?? []),
           ...newLambda,
         ],
-        QueueConfigurations: [
-          ...((currentNotifications.QueueConfigurations as unknown[]) ?? []),
-          ...newQueue,
-        ],
-        TopicConfigurations: [
-          ...((currentNotifications.TopicConfigurations as unknown[]) ?? []),
-          ...newTopic,
-        ],
+        QueueConfigurations: [...((currentNotifications.QueueConfigurations as unknown[]) ?? []), ...newQueue],
+        TopicConfigurations: [...((currentNotifications.TopicConfigurations as unknown[]) ?? []), ...newTopic],
       }
 
       await putBucketNotifications(bucketName, merged)
@@ -230,19 +192,11 @@ export function EventsNewForm({
 
         <div className="space-y-6">
           <Field>
-            <FieldLabel htmlFor="event-resource-name">
-              {t("Amazon Resource Name")}
-            </FieldLabel>
+            <FieldLabel htmlFor="event-resource-name">{t("Amazon Resource Name")}</FieldLabel>
             <FieldContent>
-              <Select
-                value={resourceName}
-                onValueChange={setResourceName}
-                disabled={!arnList.length}
-              >
+              <Select value={resourceName} onValueChange={setResourceName} disabled={!arnList.length}>
                 <SelectTrigger id="event-resource-name">
-                  <SelectValue
-                    placeholder={t("Please select resource name")}
-                  />
+                  <SelectValue placeholder={t("Please select resource name")} />
                 </SelectTrigger>
                 <SelectContent>
                   {arnList.map((item) => (
@@ -253,11 +207,7 @@ export function EventsNewForm({
                 </SelectContent>
               </Select>
             </FieldContent>
-            {resourceNameError && (
-              <FieldDescription className="text-destructive">
-                {resourceNameError}
-              </FieldDescription>
-            )}
+            {resourceNameError && <FieldDescription className="text-destructive">{resourceNameError}</FieldDescription>}
           </Field>
 
           <Field>
@@ -290,15 +240,10 @@ export function EventsNewForm({
               <ScrollArea className="max-h-64 rounded-md border">
                 <div className="flex flex-col gap-2 p-4">
                   {EVENT_OPTIONS.map((event) => (
-                    <label
-                      key={event.value}
-                      className="flex cursor-pointer items-start gap-3"
-                    >
+                    <label key={event.value} className="flex cursor-pointer items-start gap-3">
                       <Checkbox
                         checked={events.includes(event.value)}
-                        onCheckedChange={(v) =>
-                          handleEventChecked(event.value, v)
-                        }
+                        onCheckedChange={(v) => handleEventChecked(event.value, v)}
                         className="mt-1"
                       />
                       <span>{t(event.labelKey)}</span>
@@ -307,11 +252,7 @@ export function EventsNewForm({
                 </div>
               </ScrollArea>
             </FieldContent>
-            {eventsError && (
-              <FieldDescription className="text-destructive">
-                {eventsError}
-              </FieldDescription>
-            )}
+            {eventsError && <FieldDescription className="text-destructive">{eventsError}</FieldDescription>}
           </Field>
         </div>
 
diff --git a/components/language-switcher.tsx b/components/language-switcher.tsx
index 65004692..c84e818d 100644
--- a/components/language-switcher.tsx
+++ b/components/language-switcher.tsx
@@ -3,18 +3,10 @@
 import { useTranslation } from "react-i18next"
 import { RiTranslate2 } from "@remixicon/react"
 import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { LOCALE_CODES, type Locale } from "@/lib/i18n"
 
-const languageConfig: Record<
-  string,
-  { text: string; icon: typeof RiTranslate2 }
-> = {
+const languageConfig: Record<string, { text: string; icon: typeof RiTranslate2 }> = {
   en: { text: "English", icon: RiTranslate2 },
   zh: { text: "中文", icon: RiTranslate2 },
   fr: { text: "Français", icon: RiTranslate2 },
@@ -50,10 +42,7 @@ export function LanguageSwitcher() {
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-40" align="start">
         {options.map(({ label, key }) => (
-          <DropdownMenuItem
-            key={key}
-            onSelect={() => i18n.changeLanguage(key)}
-          >
+          <DropdownMenuItem key={key} onSelect={() => i18n.changeLanguage(key)}>
             {label}
           </DropdownMenuItem>
         ))}
diff --git a/components/license/article.tsx b/components/license/article.tsx
index 92406946..8103f3c5 100644
--- a/components/license/article.tsx
+++ b/components/license/article.tsx
@@ -5,10 +5,7 @@ import { useTranslation } from "react-i18next"
 import { buildRoute } from "@/lib/routes"
 import { Page } from "@/components/page"
 import { PageHeader } from "@/components/page-header"
-import {
-  Card,
-  CardContent,
-} from "@/components/ui/card"
+import { Card, CardContent } from "@/components/ui/card"
 import { ScrollArea } from "@/components/ui/scroll-area"
 
 export function LicenseArticle() {
@@ -32,9 +29,7 @@ export function LicenseArticle() {
         <CardContent className="space-y-4">
           <div className="text-center">
             <h2 className="text-2xl font-bold">{t("Apache License")}</h2>
-            <p className="mt-2 text-sm text-muted-foreground">
-              {t("Version 2.0, January 2004")}
-            </p>
+            <p className="mt-2 text-sm text-muted-foreground">{t("Version 2.0, January 2004")}</p>
           </div>
           <ScrollArea className="h-[70vh] rounded-lg border">
             <pre className="whitespace-pre-wrap p-6 text-sm leading-6 text-muted-foreground">
diff --git a/components/license/enterprise-section.tsx b/components/license/enterprise-section.tsx
index a3dc3f26..b1a38ebf 100644
--- a/components/license/enterprise-section.tsx
+++ b/components/license/enterprise-section.tsx
@@ -2,10 +2,7 @@
 
 import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
-import {
-  RiUploadFill,
-  RiCustomerService2Line,
-} from "@remixicon/react"
+import { RiUploadFill, RiCustomerService2Line } from "@remixicon/react"
 import dayjs from "dayjs"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -39,7 +36,7 @@ export function LicenseEnterpriseSection() {
         value: `${t("Enterprise")} (7x24x365)`,
       },
     ],
-    [t]
+    [t],
   )
 
   const serviceInfo = useMemo(
@@ -67,7 +64,7 @@ export function LicenseEnterpriseSection() {
         value: t("One-hour Response"),
       },
     ],
-    [t]
+    [t],
   )
 
   const permissions = useMemo<PermissionItem[]>(
@@ -75,26 +72,26 @@ export function LicenseEnterpriseSection() {
       {
         name: t("Single Machine Multiple Disks"),
         description: t(
-          "Supports managing multiple storage disks on a single server to improve storage resource utilization and simplify management and maintenance"
+          "Supports managing multiple storage disks on a single server to improve storage resource utilization and simplify management and maintenance",
         ),
         status: t("Enabled"),
       },
       {
         name: t("Advanced Monitoring"),
         description: t(
-          "Provides detailed performance monitoring and alerting mechanisms to help administrators understand system status in real-time and ensure system stability and reliability"
+          "Provides detailed performance monitoring and alerting mechanisms to help administrators understand system status in real-time and ensure system stability and reliability",
         ),
         status: t("Enabled"),
       },
       {
         name: t("Metrics"),
         description: t(
-          "Collects and displays key performance indicators (such as CPU, memory, disk I/O, etc.) through visualized charts to help users understand system operation status and performance bottlenecks"
+          "Collects and displays key performance indicators (such as CPU, memory, disk I/O, etc.) through visualized charts to help users understand system operation status and performance bottlenecks",
         ),
         status: t("Enabled"),
       },
     ],
-    [t]
+    [t],
   )
 
   const permissionsColumns: ColumnDef<PermissionItem>[] = useMemo(
@@ -102,28 +99,20 @@ export function LicenseEnterpriseSection() {
       {
         id: "name",
         header: () => t("Name"),
-        cell: ({ row }) => (
-          <span className="font-medium">{row.original.name}</span>
-        ),
+        cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
       },
       {
         id: "description",
         header: () => t("Description"),
-        cell: ({ row }) => (
-          <span className="text-muted-foreground">
-            {row.original.description}
-          </span>
-        ),
+        cell: ({ row }) => <span className="text-muted-foreground">{row.original.description}</span>,
       },
       {
         id: "status",
         header: () => t("Status"),
-        cell: ({ row }) => (
-          <Badge variant="default">{row.original.status}</Badge>
-        ),
+        cell: ({ row }) => <Badge variant="default">{row.original.status}</Badge>,
       },
     ],
-    [t]
+    [t],
   )
 
   const { table: permissionsTable } = useDataTable<PermissionItem>({
@@ -215,13 +204,13 @@ export function LicenseEnterpriseSection() {
       { label: t("Bitrot"), value: t("Supported") },
       { label: t("Version Control"), value: t("Supported") },
     ],
-    [t]
+    [t],
   )
 
   const contactSupport = () => {
     window.open(
       "https://ww18.53kf.com/webCompany.php?arg=11003151&kf_sign=DA4MDMTc0Ng4MjE1MjEzODAyNDkyMDAyNzMwMDMxNTE%253D&style=2",
-      "_blank"
+      "_blank",
     )
   }
 
@@ -241,20 +230,13 @@ export function LicenseEnterpriseSection() {
             <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
               <div className="flex flex-col gap-2">
                 <div className="flex items-center gap-3">
-                  <Badge
-                    variant={hasValidLicense ? "default" : "destructive"}
-                  >
-                    {t("Enterprise License")}
-                  </Badge>
+                  <Badge variant={hasValidLicense ? "default" : "destructive"}>{t("Enterprise License")}</Badge>
                   <span
                     className={
-                      hasValidLicense
-                        ? "text-sm font-medium text-emerald-600"
-                        : "text-sm font-medium text-rose-500"
+                      hasValidLicense ? "text-sm font-medium text-emerald-600" : "text-sm font-medium text-rose-500"
                     }
                   >
-                    {t("Status")}：
-                    {hasValidLicense ? t("Normal") : t("Expired")}
+                    {t("Status")}：{hasValidLicense ? t("Normal") : t("Expired")}
                   </span>
                 </div>
                 <p className="text-sm text-muted-foreground">
@@ -268,10 +250,7 @@ export function LicenseEnterpriseSection() {
                   {t("Update License")}
                 </Button>
                 <Button variant="outline" onClick={contactSupport}>
-                  <RiCustomerService2Line
-                    className="mr-2 size-4"
-                    aria-hidden
-                  />
+                  <RiCustomerService2Line className="mr-2 size-4" aria-hidden />
                   {t("Contact Support")}
                 </Button>
               </div>
@@ -282,21 +261,12 @@ export function LicenseEnterpriseSection() {
         <div className="grid gap-6 lg:grid-cols-2">
           <Card className="shadow-none">
             <CardContent className="space-y-4">
-              <p className="text-base font-semibold">
-                {t("License Details")}
-              </p>
+              <p className="text-base font-semibold">{t("License Details")}</p>
               <dl className="grid gap-4 sm:grid-cols-2">
                 {licenseDetails.map((item) => (
-                  <div
-                    key={item.label}
-                    className="space-y-1"
-                  >
-                    <dt className="text-xs font-medium uppercase text-muted-foreground">
-                      {item.label}
-                    </dt>
-                    <dd className="text-sm text-foreground">
-                      {item.value}
-                    </dd>
+                  <div key={item.label} className="space-y-1">
+                    <dt className="text-xs font-medium uppercase text-muted-foreground">{item.label}</dt>
+                    <dd className="text-sm text-foreground">{item.value}</dd>
                   </div>
                 ))}
               </dl>
@@ -305,21 +275,12 @@ export function LicenseEnterpriseSection() {
 
           <Card className="shadow-none">
             <CardContent className="space-y-4">
-              <p className="text-base font-semibold">
-                {t("Customer Service")}
-              </p>
+              <p className="text-base font-semibold">{t("Customer Service")}</p>
               <dl className="grid gap-4 sm:grid-cols-2">
                 {serviceInfo.map((item) => (
-                  <div
-                    key={item.label}
-                    className="space-y-1"
-                  >
-                    <dt className="text-xs font-medium uppercase text-muted-foreground">
-                      {item.label}
-                    </dt>
-                    <dd className="text-sm text-foreground">
-                      {item.value}
-                    </dd>
+                  <div key={item.label} className="space-y-1">
+                    <dt className="text-xs font-medium uppercase text-muted-foreground">{item.label}</dt>
+                    <dd className="text-sm text-foreground">{item.value}</dd>
                   </div>
                 ))}
               </dl>
@@ -329,27 +290,19 @@ export function LicenseEnterpriseSection() {
 
         <Card className="shadow-none">
           <CardContent className="space-y-4">
-            <p className="text-base font-semibold">
-              {t("Feature Permissions")}
-            </p>
+            <p className="text-base font-semibold">{t("Feature Permissions")}</p>
             <DataTable table={permissionsTable} />
           </CardContent>
         </Card>
 
         <Card className="shadow-none">
           <CardContent className="space-y-4">
-            <p className="text-base font-semibold">
-              {t("Technical Parameters")}
-            </p>
+            <p className="text-base font-semibold">{t("Technical Parameters")}</p>
             <dl className="grid gap-4 sm:grid-cols-2">
               {technicalParameters.map((item) => (
                 <div key={item.label} className="space-y-1">
-                  <dt className="text-xs font-medium uppercase text-muted-foreground">
-                    {item.label}
-                  </dt>
-                  <dd className="text-sm text-foreground">
-                    {item.value}
-                  </dd>
+                  <dt className="text-xs font-medium uppercase text-muted-foreground">{item.label}</dt>
+                  <dd className="text-sm text-foreground">{item.value}</dd>
                 </div>
               ))}
             </dl>
diff --git a/components/lifecycle/new-form.tsx b/components/lifecycle/new-form.tsx
index 44c2f088..cb9bb861 100644
--- a/components/lifecycle/new-form.tsx
+++ b/components/lifecycle/new-form.tsx
@@ -1,76 +1,48 @@
-"use client";
-
-import * as React from "react";
-import { useState, useEffect, useCallback, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { RiAddLine, RiDeleteBinLine } from "@remixicon/react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Switch } from "@/components/ui/switch";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldLabel,
-} from "@/components/ui/field";
-import { useBucket } from "@/hooks/use-bucket";
-import { useTiers, type TierRow } from "@/hooks/use-tiers";
-import { useMessage } from "@/lib/feedback/message";
+"use client"
+
+import * as React from "react"
+import { useState, useEffect, useCallback, useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { RiAddLine, RiDeleteBinLine } from "@remixicon/react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Switch } from "@/components/ui/switch"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"
+import { useBucket } from "@/hooks/use-bucket"
+import { useTiers, type TierRow } from "@/hooks/use-tiers"
+import { useMessage } from "@/lib/feedback/message"
 
 interface LifecycleNewFormProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  bucketName: string | null;
-  onSuccess?: () => void;
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  bucketName: string | null
+  onSuccess?: () => void
 }
 
 interface Tag {
-  key: string;
-  value: string;
+  key: string
+  value: string
 }
 
-export function LifecycleNewForm({
-  open,
-  onOpenChange,
-  bucketName,
-  onSuccess,
-}: LifecycleNewFormProps) {
-  const { t } = useTranslation();
-  const message = useMessage();
-  const {
-    putBucketLifecycleConfiguration,
-    getBucketVersioning,
-    getBucketLifecycleConfiguration,
-  } = useBucket();
-  const { listTiers } = useTiers();
-
-  const [activeTab, setActiveTab] = useState<"expire" | "transition">("expire");
-  const [versionType, setVersionType] = useState("current");
-  const [days, setDays] = useState(1);
-  const [storageType, setStorageType] = useState("");
-  const [prefix, setPrefix] = useState("");
-  const [expiredDeleteMark, setExpiredDeleteMark] = useState(false);
-  const [tags, setTags] = useState<Tag[]>([{ key: "", value: "" }]);
-  const [tiers, setTiers] = useState<Array<{ label: string; value: string }>>(
-    [],
-  );
-  const [versioningStatus, setVersioningStatus] = useState(false);
-  const [submitting, setSubmitting] = useState(false);
+export function LifecycleNewForm({ open, onOpenChange, bucketName, onSuccess }: LifecycleNewFormProps) {
+  const { t } = useTranslation()
+  const message = useMessage()
+  const { putBucketLifecycleConfiguration, getBucketVersioning, getBucketLifecycleConfiguration } = useBucket()
+  const { listTiers } = useTiers()
+
+  const [activeTab, setActiveTab] = useState<"expire" | "transition">("expire")
+  const [versionType, setVersionType] = useState("current")
+  const [days, setDays] = useState(1)
+  const [storageType, setStorageType] = useState("")
+  const [prefix, setPrefix] = useState("")
+  const [expiredDeleteMark, setExpiredDeleteMark] = useState(false)
+  const [tags, setTags] = useState<Tag[]>([{ key: "", value: "" }])
+  const [tiers, setTiers] = useState<Array<{ label: string; value: string }>>([])
+  const [versioningStatus, setVersioningStatus] = useState(false)
+  const [submitting, setSubmitting] = useState(false)
 
   const versionOptions = useMemo(
     () => [
@@ -78,183 +50,177 @@ export function LifecycleNewForm({
       { label: t("Non-current Version"), value: "non-current" },
     ],
     [t],
-  );
+  )
 
   const loadTiers = useCallback(async () => {
     try {
-      const res = await listTiers();
+      const res = await listTiers()
       if (res) {
         const tierOptions = res.map((item: TierRow) => {
-          const config = item[item.type] as { name?: string } | undefined;
+          const config = item[item.type] as { name?: string } | undefined
           return {
             label: config?.name ?? "",
             value: config?.name ?? "",
-          };
-        });
-        setTiers(tierOptions);
+          }
+        })
+        setTiers(tierOptions)
         if (!storageType && tierOptions.length > 0) {
-          setStorageType(tierOptions[0].value);
+          setStorageType(tierOptions[0].value)
         }
       }
     } catch {
-      setTiers([]);
+      setTiers([])
     }
-  }, [listTiers, storageType]);
+  }, [listTiers, storageType])
 
   const loadVersioningStatus = useCallback(async () => {
     if (!bucketName) {
-      setVersioningStatus(false);
-      return;
+      setVersioningStatus(false)
+      return
     }
     try {
-      const resp = await getBucketVersioning(bucketName);
-      setVersioningStatus(resp.Status === "Enabled");
+      const resp = await getBucketVersioning(bucketName)
+      setVersioningStatus(resp.Status === "Enabled")
     } catch {
-      setVersioningStatus(false);
+      setVersioningStatus(false)
     }
-  }, [bucketName, getBucketVersioning]);
+  }, [bucketName, getBucketVersioning])
 
   useEffect(() => {
     if (open) {
-      loadTiers();
-      loadVersioningStatus();
+      loadTiers()
+      loadVersioningStatus()
     }
-  }, [open, loadTiers, loadVersioningStatus]);
+  }, [open, loadTiers, loadVersioningStatus])
 
   const resetForm = useCallback(() => {
-    setActiveTab("expire");
-    setVersionType("current");
-    setDays(1);
-    setStorageType(tiers[0]?.value ?? "");
-    setPrefix("");
-    setExpiredDeleteMark(false);
-    setTags([{ key: "", value: "" }]);
-  }, [tiers]);
+    setActiveTab("expire")
+    setVersionType("current")
+    setDays(1)
+    setStorageType(tiers[0]?.value ?? "")
+    setPrefix("")
+    setExpiredDeleteMark(false)
+    setTags([{ key: "", value: "" }])
+  }, [tiers])
 
   useEffect(() => {
     if (open) {
-      resetForm();
+      resetForm()
     }
-  }, [open, resetForm]);
+  }, [open, resetForm])
 
   const addTag = () => {
-    setTags((prev) => [...prev, { key: "", value: "" }]);
-  };
+    setTags((prev) => [...prev, { key: "", value: "" }])
+  }
 
   const removeTag = (index: number) => {
-    if (tags.length === 1) return;
-    setTags((prev) => prev.filter((_, i) => i !== index));
-  };
+    if (tags.length === 1) return
+    setTags((prev) => prev.filter((_, i) => i !== index))
+  }
 
   const updateTag = (index: number, field: "key" | "value", value: string) => {
-    setTags((prev) =>
-      prev.map((tag, i) => (i === index ? { ...tag, [field]: value } : tag)),
-    );
-  };
+    setTags((prev) => prev.map((tag, i) => (i === index ? { ...tag, [field]: value } : tag)))
+  }
 
   const validate = () => {
     if (!days || days < 1) {
-      message.error(t("Please enter valid days"));
-      return false;
+      message.error(t("Please enter valid days"))
+      return false
     }
     if (activeTab === "transition" && !storageType) {
-      message.error(t("Please select storage type"));
-      return false;
+      message.error(t("Please select storage type"))
+      return false
     }
-    return true;
-  };
+    return true
+  }
 
   const buildFilter = () => {
-    const validTags = tags.filter((tag) => tag.key && tag.value);
+    const validTags = tags.filter((tag) => tag.key && tag.value)
     if (!prefix && validTags.length === 0) {
-      return undefined;
+      return undefined
     }
 
-    const filter: Record<string, unknown> = {};
-    const [firstTag] = validTags;
+    const filter: Record<string, unknown> = {}
+    const [firstTag] = validTags
 
     if (firstTag && validTags.length === 1 && !prefix) {
-      filter.Tag = { Key: firstTag.key, Value: firstTag.value };
+      filter.Tag = { Key: firstTag.key, Value: firstTag.value }
     } else if (validTags.length > 0) {
       filter.And = {
         Tags: validTags.map((tag) => ({ Key: tag.key, Value: tag.value })),
         ...(prefix ? { Prefix: prefix } : {}),
-      };
+      }
     } else if (prefix) {
-      filter.Prefix = prefix;
+      filter.Prefix = prefix
     }
 
-    return Object.keys(filter).length ? filter : undefined;
-  };
+    return Object.keys(filter).length ? filter : undefined
+  }
 
   const handleSave = async () => {
-    if (!validate()) return;
+    if (!validate()) return
     if (!bucketName) {
-      message.error(t("Bucket name is required"));
-      return;
+      message.error(t("Bucket name is required"))
+      return
     }
-    setSubmitting(true);
+    setSubmitting(true)
     try {
-      let currentConfig: { Rules?: unknown[] } | null = null;
+      let currentConfig: { Rules?: unknown[] } | null = null
       try {
         currentConfig = (await getBucketLifecycleConfiguration(bucketName)) as {
-          Rules?: unknown[];
-        };
+          Rules?: unknown[]
+        }
       } catch {
-        currentConfig = null;
+        currentConfig = null
       }
 
       const newRule: Record<string, unknown> = {
         ID: crypto.randomUUID(),
         Status: "Enabled",
         Filter: buildFilter(),
-      };
+      }
 
-      const daysValue = Number(days);
+      const daysValue = Number(days)
 
       if (activeTab === "expire") {
         if (versionType === "non-current") {
-          newRule.NoncurrentVersionExpiration = { NoncurrentDays: daysValue };
+          newRule.NoncurrentVersionExpiration = { NoncurrentDays: daysValue }
           if (expiredDeleteMark) {
-            newRule.ExpiredObjectDeleteMarker = true;
+            newRule.ExpiredObjectDeleteMarker = true
           }
         } else {
           newRule.Expiration = {
             Days: daysValue,
             ...(expiredDeleteMark ? { ExpiredObjectDeleteMarker: true } : {}),
-          };
+          }
         }
       } else {
         if (versionType === "non-current") {
-          newRule.NoncurrentVersionTransitions = [
-            { NoncurrentDays: daysValue, StorageClass: storageType },
-          ];
+          newRule.NoncurrentVersionTransitions = [{ NoncurrentDays: daysValue, StorageClass: storageType }]
         } else {
-          newRule.Transitions = [
-            { Days: daysValue, StorageClass: storageType },
-          ];
+          newRule.Transitions = [{ Days: daysValue, StorageClass: storageType }]
         }
       }
 
-      const existingRules = currentConfig?.Rules ?? [];
-      const payload = { Rules: [...existingRules, newRule] };
+      const existingRules = currentConfig?.Rules ?? []
+      const payload = { Rules: [...existingRules, newRule] }
 
-      await putBucketLifecycleConfiguration(bucketName, payload);
-      message.success(t("Create Success"));
-      onSuccess?.();
-      onOpenChange(false);
-      resetForm();
+      await putBucketLifecycleConfiguration(bucketName, payload)
+      message.success(t("Create Success"))
+      onSuccess?.()
+      onOpenChange(false)
+      resetForm()
     } catch (error) {
-      message.error((error as Error).message || t("Failed to create rule"));
+      message.error((error as Error).message || t("Failed to create rule"))
     } finally {
-      setSubmitting(false);
+      setSubmitting(false)
     }
-  };
+  }
 
   const handleCancel = () => {
-    onOpenChange(false);
-    resetForm();
-  };
+    onOpenChange(false)
+    resetForm()
+  }
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -287,10 +253,7 @@ export function LifecycleNewForm({
                   <Field>
                     <FieldLabel>{t("Object Version")}</FieldLabel>
                     <FieldContent>
-                      <Select
-                        value={versionType}
-                        onValueChange={setVersionType}
-                      >
+                      <Select value={versionType} onValueChange={setVersionType}>
                         <SelectTrigger className="w-full">
                           <SelectValue />
                         </SelectTrigger>
@@ -308,9 +271,7 @@ export function LifecycleNewForm({
 
                 <Field>
                   <FieldLabel>{t("Time Cycle")}</FieldLabel>
-                  <FieldDescription>
-                    {t("Set the time cycle for the rule")}
-                  </FieldDescription>
+                  <FieldDescription>{t("Set the time cycle for the rule")}</FieldDescription>
                   <FieldContent>
                     <div className="flex items-center gap-3">
                       <Input
@@ -321,9 +282,7 @@ export function LifecycleNewForm({
                         className="w-32"
                         placeholder={t("Days")}
                       />
-                      <span className="text-sm text-muted-foreground">
-                        {t("Days After")}
-                      </span>
+                      <span className="text-sm text-muted-foreground">{t("Days After")}</span>
                     </div>
                   </FieldContent>
                 </Field>
@@ -347,9 +306,7 @@ export function LifecycleNewForm({
 
                   <div className="space-y-3">
                     <div className="flex items-center justify-between">
-                      <FieldLabel className="text-sm font-medium">
-                        {t("Tags")}
-                      </FieldLabel>
+                      <FieldLabel className="text-sm font-medium">{t("Tags")}</FieldLabel>
                       <Button variant="outline" size="sm" onClick={addTag}>
                         <RiAddLine className="size-4" aria-hidden />
                         {t("Add Tag")}
@@ -358,23 +315,16 @@ export function LifecycleNewForm({
                     {tags.length > 0 && (
                       <div className="space-y-3">
                         {tags.map((tag, index) => (
-                          <div
-                            key={index}
-                            className="grid gap-2 md:grid-cols-2 md:items-center md:gap-4"
-                          >
+                          <div key={index} className="grid gap-2 md:grid-cols-2 md:items-center md:gap-4">
                             <Input
                               value={tag.key}
-                              onChange={(e) =>
-                                updateTag(index, "key", e.target.value)
-                              }
+                              onChange={(e) => updateTag(index, "key", e.target.value)}
                               placeholder={t("Tag Name")}
                             />
                             <div className="flex items-center gap-2">
                               <Input
                                 value={tag.value}
-                                onChange={(e) =>
-                                  updateTag(index, "value", e.target.value)
-                                }
+                                onChange={(e) => updateTag(index, "value", e.target.value)}
                                 placeholder={t("Tag Value")}
                                 className="flex-1"
                               />
@@ -385,10 +335,7 @@ export function LifecycleNewForm({
                                 disabled={tags.length === 1}
                                 onClick={() => removeTag(index)}
                               >
-                                <RiDeleteBinLine
-                                  className="size-4"
-                                  aria-hidden
-                                />
+                                <RiDeleteBinLine className="size-4" aria-hidden />
                               </Button>
                             </div>
                           </div>
@@ -407,19 +354,12 @@ export function LifecycleNewForm({
                   <Field className="mt-4">
                     <div className="flex items-center justify-between">
                       <div>
-                        <FieldLabel className="text-sm font-medium">
-                          {t("Delete Marker Handling")}
-                        </FieldLabel>
+                        <FieldLabel className="text-sm font-medium">{t("Delete Marker Handling")}</FieldLabel>
                         <FieldDescription>
-                          {t(
-                            "If no versions remain, delete references to this object",
-                          )}
+                          {t("If no versions remain, delete references to this object")}
                         </FieldDescription>
                       </div>
-                      <Switch
-                        checked={expiredDeleteMark}
-                        onCheckedChange={setExpiredDeleteMark}
-                      />
+                      <Switch checked={expiredDeleteMark} onCheckedChange={setExpiredDeleteMark} />
                     </div>
                   </Field>
                 </details>
@@ -432,10 +372,7 @@ export function LifecycleNewForm({
                   <Field>
                     <FieldLabel>{t("Object Version")}</FieldLabel>
                     <FieldContent>
-                      <Select
-                        value={versionType}
-                        onValueChange={setVersionType}
-                      >
+                      <Select value={versionType} onValueChange={setVersionType}>
                         <SelectTrigger className="w-full">
                           <SelectValue />
                         </SelectTrigger>
@@ -463,9 +400,7 @@ export function LifecycleNewForm({
                         className="w-32"
                         placeholder={t("Days")}
                       />
-                      <span className="text-sm text-muted-foreground">
-                        {t("Days After")}
-                      </span>
+                      <span className="text-sm text-muted-foreground">{t("Days After")}</span>
                     </div>
                   </FieldContent>
                 </Field>
@@ -475,9 +410,7 @@ export function LifecycleNewForm({
                   <FieldContent>
                     <Select value={storageType} onValueChange={setStorageType}>
                       <SelectTrigger className="w-full">
-                        <SelectValue
-                          placeholder={t("Please select storage type")}
-                        />
+                        <SelectValue placeholder={t("Please select storage type")} />
                       </SelectTrigger>
                       <SelectContent>
                         {tiers.map((tier) => (
@@ -509,9 +442,7 @@ export function LifecycleNewForm({
 
                   <div className="space-y-3">
                     <div className="flex items-center justify-between">
-                      <FieldLabel className="text-sm font-medium">
-                        {t("Tags")}
-                      </FieldLabel>
+                      <FieldLabel className="text-sm font-medium">{t("Tags")}</FieldLabel>
                       <Button variant="outline" size="sm" onClick={addTag}>
                         <RiAddLine className="size-4" aria-hidden />
                         {t("Add Tag")}
@@ -526,17 +457,13 @@ export function LifecycleNewForm({
                           >
                             <Input
                               value={tag.key}
-                              onChange={(e) =>
-                                updateTag(index, "key", e.target.value)
-                              }
+                              onChange={(e) => updateTag(index, "key", e.target.value)}
                               placeholder={t("Tag Name")}
                             />
                             <div className="flex items-center gap-2">
                               <Input
                                 value={tag.value}
-                                onChange={(e) =>
-                                  updateTag(index, "value", e.target.value)
-                                }
+                                onChange={(e) => updateTag(index, "value", e.target.value)}
                                 placeholder={t("Tag Value")}
                                 className="flex-1"
                               />
@@ -547,10 +474,7 @@ export function LifecycleNewForm({
                                 disabled={tags.length === 1}
                                 onClick={() => removeTag(index)}
                               >
-                                <RiDeleteBinLine
-                                  className="size-4"
-                                  aria-hidden
-                                />
+                                <RiDeleteBinLine className="size-4" aria-hidden />
                               </Button>
                             </div>
                           </div>
@@ -574,5 +498,5 @@ export function LifecycleNewForm({
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  );
+  )
 }
diff --git a/components/object/info.tsx b/components/object/info.tsx
index 3fd85c4e..33bd8f1d 100644
--- a/components/object/info.tsx
+++ b/components/object/info.tsx
@@ -36,7 +36,7 @@ interface ObjectInfoProps {
   onRefresh?: () => void
 }
 
-export function ObjectInfo({ bucketName, objectKey, open, onOpenChange, onRefresh: _onRefresh }: ObjectInfoProps) {
+export function ObjectInfo({ bucketName, objectKey, open, onOpenChange }: ObjectInfoProps) {
   const { t } = useTranslation()
   const message = useMessage()
   const dialog = useDialog()
diff --git a/components/object/list.tsx b/components/object/list.tsx
index 7172bc2c..49667af2 100644
--- a/components/object/list.tsx
+++ b/components/object/list.tsx
@@ -72,7 +72,7 @@ export function ObjectList({
 }: ObjectListProps) {
   const { t } = useTranslation()
   const message = useMessage()
-  const objectApi = useObject(bucket)
+  const { listObject, getSignedUrl, mapAllFiles } = useObject(bucket)
   const { getBucketVersioning } = useBucket()
   const addDeleteKeys = useAddDeleteKeys()
 
@@ -90,52 +90,45 @@ export function ObjectList({
 
   const prefix = decodeURIComponent(path)
 
-  const bucketPath = React.useCallback(
-    (p?: string | string[]) => buildBucketPath(bucket, p),
-    [bucket]
-  )
+  const bucketPath = React.useCallback((p?: string | string[]) => buildBucketPath(bucket, p), [bucket])
 
   const fetchObjects = React.useCallback(
     async (tokenOverride?: string) => {
       const token = tokenOverride !== undefined ? tokenOverride : continuationToken
       setLoading(true)
       try {
-        const response = await objectApi.listObject(
-          bucket,
-          prefix || undefined,
-          pageSize,
-          token,
-          { includeDeleted: showDeleted }
-        )
-
-      const r = response as {
-        CommonPrefixes?: Array<{ Prefix?: string }>
-        Contents?: Array<{ Key?: string; Size?: number; LastModified?: Date }>
-        NextContinuationToken?: string
-      }
+        const response = await listObject(bucket, prefix || undefined, pageSize, token, {
+          includeDeleted: showDeleted,
+        })
 
-      setNextToken(r.NextContinuationToken)
-
-      const prefixItems: ObjectRow[] = (r.CommonPrefixes ?? []).map((item) => ({
-        Key: item.Prefix ?? "",
-        type: "prefix" as const,
-        Size: 0,
-        LastModified: "",
-      }))
-
-      const objectItems: ObjectRow[] = (r.Contents ?? []).map((item) => ({
-        Key: item.Key ?? "",
-        type: "object" as const,
-        Size: item.Size ?? 0,
-        LastModified: item.LastModified ? item.LastModified.toISOString() : "",
-      }))
-
-      setData([...prefixItems, ...objectItems])
-    } finally {
-      setTimeout(() => setLoading(false), 200)
-    }
-  },
-    [bucket, prefix, pageSize, continuationToken, showDeleted, objectApi.listObject]
+        const r = response as {
+          CommonPrefixes?: Array<{ Prefix?: string }>
+          Contents?: Array<{ Key?: string; Size?: number; LastModified?: Date }>
+          NextContinuationToken?: string
+        }
+
+        setNextToken(r.NextContinuationToken)
+
+        const prefixItems: ObjectRow[] = (r.CommonPrefixes ?? []).map((item) => ({
+          Key: item.Prefix ?? "",
+          type: "prefix" as const,
+          Size: 0,
+          LastModified: "",
+        }))
+
+        const objectItems: ObjectRow[] = (r.Contents ?? []).map((item) => ({
+          Key: item.Key ?? "",
+          type: "object" as const,
+          Size: item.Size ?? 0,
+          LastModified: item.LastModified ? item.LastModified.toISOString() : "",
+        }))
+
+        setData([...prefixItems, ...objectItems])
+      } finally {
+        setTimeout(() => setLoading(false), 200)
+      }
+    },
+    [bucket, prefix, pageSize, continuationToken, showDeleted, listObject],
   )
 
   const prevRefreshTriggerRef = React.useRef(refreshTrigger)
@@ -170,10 +163,13 @@ export function ObjectList({
     setTokenHistory([])
   }, [showDeleted])
 
-  const displayKey = (key: string) => {
-    if (!prefix) return key
-    return key.startsWith(prefix) ? key.slice(prefix.length) : key
-  }
+  const displayKey = React.useCallback(
+    (key: string) => {
+      if (!prefix) return key
+      return key.startsWith(prefix) ? key.slice(prefix.length) : key
+    },
+    [prefix],
+  )
 
   const filteredData = React.useMemo(() => {
     const term = searchTerm.toLowerCase()
@@ -184,7 +180,30 @@ export function ObjectList({
       }
       return item.Key !== prefix
     })
-  }, [data, searchTerm, prefix])
+  }, [data, searchTerm, prefix, displayKey])
+
+  const downloadFile = React.useCallback(
+    async (key: string) => {
+      if (!key) return
+      const loadingMsg = message.loading(t("Getting URL"), { duration: 0 })
+      try {
+        const url = await getSignedUrl(key)
+        const response = await fetch(url)
+        const filename = key.split("/").pop() ?? ""
+        const headers: Record<string, string> = {
+          "content-type": getContentType(response.headers, filename),
+          filename: response.headers.get("content-disposition")?.split("filename=")[1] ?? "",
+        }
+        const blob = await response.blob()
+        exportFile({ headers, data: blob }, filename)
+      } catch (err) {
+        message.error((err as Error)?.message ?? t("Download Failed"))
+      } finally {
+        loadingMsg.destroy()
+      }
+    },
+    [message, t, getSignedUrl],
+  )
 
   const columns: ColumnDef<ObjectRow>[] = React.useMemo(
     () => [
@@ -228,22 +247,14 @@ export function ObjectList({
         id: "size",
         header: () => t("Size"),
         accessorFn: (row) => (row.type === "object" ? row.Size : -1),
-        cell: ({ row }) =>
-          row.original.type === "object"
-            ? formatBytes(row.original.Size)
-            : "-",
+        cell: ({ row }) => (row.original.type === "object" ? formatBytes(row.original.Size) : "-"),
       },
       {
         id: "lastModified",
         header: () => t("Last Modified"),
-        accessorFn: (row) =>
-          row.type === "prefix" || !row.LastModified
-            ? ""
-            : new Date(row.LastModified).getTime(),
+        accessorFn: (row) => (row.type === "prefix" || !row.LastModified ? "" : new Date(row.LastModified).getTime()),
         cell: ({ row }) =>
-          row.original.LastModified
-            ? dayjs(row.original.LastModified).format("YYYY-MM-DD HH:mm:ss")
-            : "-",
+          row.original.LastModified ? dayjs(row.original.LastModified).format("YYYY-MM-DD HH:mm:ss") : "-",
       },
       {
         id: "actions",
@@ -252,20 +263,12 @@ export function ObjectList({
         cell: ({ row }) => (
           <div className="flex items-center gap-2">
             {row.original.type === "object" ? (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => downloadFile(row.original.Key)}
-              >
+              <Button variant="outline" size="sm" onClick={() => downloadFile(row.original.Key)}>
                 <RiDownloadCloud2Line className="size-4" />
                 <span>{t("Download")}</span>
               </Button>
             ) : null}
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => openDeleteDialog([row.original.Key])}
-            >
+            <Button variant="outline" size="sm" onClick={() => openDeleteDialog([row.original.Key])}>
               <RiDeleteBin5Line className="size-4" />
               <span>{t("Delete")}</span>
             </Button>
@@ -273,7 +276,7 @@ export function ObjectList({
         ),
       },
     ],
-    [t, bucket, bucketPath, onOpenInfo]
+    [t, bucket, bucketPath, onOpenInfo, displayKey, downloadFile],
   )
 
   const { table, selectedRowIds } = useDataTable<ObjectRow>({
@@ -292,10 +295,7 @@ export function ObjectList({
     return base && key.startsWith(base) ? key.slice(base.length) : key
   }
 
-  const collectKeysForDeletion = async (
-    keys: string[],
-    forceDelete = false
-  ): Promise<string[]> => {
+  const collectKeysForDeletion = async (keys: string[], forceDelete = false): Promise<string[]> => {
     const rowMap = new Map(data.map((item) => [item.Key, item]))
     const collected: string[] = []
 
@@ -305,7 +305,7 @@ export function ObjectList({
       if (row?.type === "prefix") {
         collected.push(row.Key)
         if (!forceDelete) {
-          await objectApi.mapAllFiles(bucket, row.Key, (fileKey) => {
+          await mapAllFiles(bucket, row.Key, (fileKey) => {
             if (fileKey) collected.push(fileKey)
           })
         }
@@ -317,29 +317,6 @@ export function ObjectList({
     return Array.from(new Set(collected))
   }
 
-  const downloadFile = async (key: string) => {
-    if (!key) return
-    const loadingMsg = message.loading(t("Getting URL"), { duration: 0 })
-    try {
-      const url = await objectApi.getSignedUrl(key)
-      const response = await fetch(url)
-      const filename = key.split("/").pop() ?? ""
-      const headers: Record<string, string> = {
-        "content-type": getContentType(response.headers, filename),
-        filename:
-          response.headers.get("content-disposition")?.split("filename=")[1] ?? "",
-      }
-      const blob = await response.blob()
-      exportFile({ headers, data: blob }, filename)
-    } catch (err) {
-      message.error(
-        (err as Error)?.message ?? t("Download Failed")
-      )
-    } finally {
-      loadingMsg.destroy()
-    }
-  }
-
   const downloadMultiple = async () => {
     if (!checkedKeys.length) {
       message.warning(t("Please select at least one item"))
@@ -363,7 +340,7 @@ export function ObjectList({
             relative: computeRelativeKey(item.Key),
           })
         } else if (item.type === "prefix") {
-          await objectApi.mapAllFiles(bucket, item.Key, (fileKey) => {
+          await mapAllFiles(bucket, item.Key, (fileKey) => {
             allFiles.push({
               key: fileKey,
               relative: computeRelativeKey(fileKey),
@@ -390,10 +367,9 @@ export function ObjectList({
 
     const updateProgress = () => {
       if (destroyRef.current) destroyRef.current()
-      const handle = message.loading(
-        `${t("Downloading files")} ${Math.round((finished / allFiles.length) * 100)}%`,
-        { duration: 0 }
-      )
+      const handle = message.loading(`${t("Downloading files")} ${Math.round((finished / allFiles.length) * 100)}%`, {
+        duration: 0,
+      })
       destroyRef.current = handle.destroy
     }
 
@@ -402,13 +378,13 @@ export function ObjectList({
     try {
       await Promise.all(
         allFiles.map(async ({ key, relative }) => {
-          const url = await objectApi.getSignedUrl(key)
+          const url = await getSignedUrl(key)
           const response = await fetch(url)
           const blob = await response.blob()
           zip.file(relative || key, blob)
           finished++
           updateProgress()
-        })
+        }),
       )
     } catch (err) {
       if (destroyRef.current) destroyRef.current()
@@ -434,10 +410,7 @@ export function ObjectList({
     setDeleteDialogOpen(false)
     if (!keys.length) return
 
-    if (
-      (bucketVersioningEnabled && deleteAllVersions) ||
-      !bucketVersioningEnabled
-    ) {
+    if ((bucketVersioningEnabled && deleteAllVersions) || !bucketVersioningEnabled) {
       await handleDeleteAllVersions(keys)
     } else {
       await handleDelete(keys)
@@ -515,15 +488,13 @@ export function ObjectList({
             <TaskStatsButton />
             <Button variant="outline" onClick={onUploadClick}>
               <RiFileAddLine className="size-4" />
-              <span>{t("Upload File")}/{t("Folder")}</span>
+              <span>
+                {t("Upload File")}/{t("Folder")}
+              </span>
             </Button>
             {checkedKeys.length > 0 ? (
               <>
-                <Button
-                  variant="outline"
-                  className="text-destructive border-destructive"
-                  onClick={handleBatchDelete}
-                >
+                <Button variant="outline" className="text-destructive border-destructive" onClick={handleBatchDelete}>
                   <RiDeleteBin5Line className="size-4" />
                   <span>{t("Delete Selected")}</span>
                 </Button>
@@ -549,10 +520,7 @@ export function ObjectList({
             className="lg:max-w-sm"
           />
           <label className="flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
-            <Checkbox
-              checked={showDeleted}
-              onCheckedChange={(v) => setShowDeleted(v === true)}
-            />
+            <Checkbox checked={showDeleted} onCheckedChange={(v) => setShowDeleted(v === true)} />
             <span>{t("Show Deleted Objects")}</span>
           </label>
         </div>
@@ -566,19 +534,11 @@ export function ObjectList({
       />
 
       <div className="flex justify-end gap-2">
-        <Button
-          variant="outline"
-          disabled={tokenHistory.length === 0}
-          onClick={goToPreviousPage}
-        >
+        <Button variant="outline" disabled={tokenHistory.length === 0} onClick={goToPreviousPage}>
           <RiArrowLeftSLine className="mr-2 size-4" />
           <span>{t("Previous Page")}</span>
         </Button>
-        <Button
-          variant="outline"
-          disabled={!nextToken}
-          onClick={goToNextPage}
-        >
+        <Button variant="outline" disabled={!nextToken} onClick={goToNextPage}>
           <span>{t("Next Page")}</span>
           <RiArrowRightSLine className="ml-2 size-4" />
         </Button>
@@ -592,10 +552,7 @@ export function ObjectList({
               {t("Are you sure you want to delete the selected objects?")}
               {bucketVersioningEnabled && (
                 <label className="mt-4 flex items-center gap-2">
-                  <Checkbox
-                    checked={deleteAllVersions}
-                    onCheckedChange={(v) => setDeleteAllVersions(v === true)}
-                  />
+                  <Checkbox checked={deleteAllVersions} onCheckedChange={(v) => setDeleteAllVersions(v === true)} />
                   <span>{t("Delete All Versions")}</span>
                 </label>
               )}
@@ -608,11 +565,7 @@ export function ObjectList({
               </Button>
             </AlertDialogCancel>
             <AlertDialogAction asChild>
-              <Button
-                variant="destructive"
-                className="w-full sm:w-auto text-white"
-                onClick={handleConfirmDelete}
-              >
+              <Button variant="destructive" className="w-full sm:w-auto text-white" onClick={handleConfirmDelete}>
                 {t("Confirm")}
               </Button>
             </AlertDialogAction>
diff --git a/components/object/new-form.tsx b/components/object/new-form.tsx
index 721fa9c6..6fc04bd1 100644
--- a/components/object/new-form.tsx
+++ b/components/object/new-form.tsx
@@ -5,13 +5,7 @@ import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Alert, AlertDescription } from "@/components/ui/alert"
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { useObject } from "@/hooks/use-object"
 import { useMessage } from "@/lib/feedback/message"
 interface ObjectNewFormProps {
@@ -62,10 +56,7 @@ export function ObjectNewForm({
 
   return (
     <Dialog open={show} onOpenChange={onShowChange}>
-      <DialogContent
-        className="sm:max-w-md"
-        onPointerDownOutside={(e) => e.preventDefault()}
-      >
+      <DialogContent className="sm:max-w-md" onPointerDownOutside={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>{t("New Form", { type: displayType })}</DialogTitle>
         </DialogHeader>
@@ -84,11 +75,7 @@ export function ObjectNewForm({
           <Button variant="outline" onClick={() => onShowChange(false)}>
             {t("Close")}
           </Button>
-          <Button
-            variant="default"
-            disabled={!objectKey.trim()}
-            onClick={handlePutObject}
-          >
+          <Button variant="default" disabled={!objectKey.trim()} onClick={handlePutObject}>
             {t("Create")}
           </Button>
         </DialogFooter>
diff --git a/components/object/path-links.tsx b/components/object/path-links.tsx
index b9133769..25a7210c 100644
--- a/components/object/path-links.tsx
+++ b/components/object/path-links.tsx
@@ -43,13 +43,7 @@ export function ObjectPathLinks({ objectKey, bucketName, onClick }: ObjectPathLi
     .map((item, index) => ({ value: item, index }))
 
   const displaySegments: Segment[] =
-    segments.length <= 6
-      ? segments
-      : [
-          ...segments.slice(0, 3),
-          { value: "...", index: -1 },
-          ...segments.slice(-3),
-        ]
+    segments.length <= 6 ? segments : [...segments.slice(0, 3), { value: "...", index: -1 }, ...segments.slice(-3)]
 
   const handleClick = (segment: Segment) => {
     if (segment.index === -1) return
@@ -69,11 +63,7 @@ export function ObjectPathLinks({ objectKey, bucketName, onClick }: ObjectPathLi
             <button
               type="button"
               onClick={() => handleClick(segment)}
-              className={
-                segment.index > -1
-                  ? "text-blue-500 hover:underline"
-                  : "cursor-default"
-              }
+              className={segment.index > -1 ? "text-blue-500 hover:underline" : "cursor-default"}
             >
               {segment.value}
             </button>
@@ -81,18 +71,8 @@ export function ObjectPathLinks({ objectKey, bucketName, onClick }: ObjectPathLi
         ))}
       </div>
       {objectKey ? (
-        <Button
-          variant="ghost"
-          size="sm"
-          className="shrink-0"
-          onClick={copy}
-          title={t("Copy Path")}
-        >
-          {copied ? (
-            <RiCheckLine className="size-4 text-green-600" />
-          ) : (
-            <RiFileCopyLine className="size-4" />
-          )}
+        <Button variant="ghost" size="sm" className="shrink-0" onClick={copy} title={t("Copy Path")}>
+          {copied ? <RiCheckLine className="size-4 text-green-600" /> : <RiFileCopyLine className="size-4" />}
           <span className="sr-only">{t("Copy Path")}</span>
         </Button>
       ) : null}
diff --git a/components/object/preview-modal.tsx b/components/object/preview-modal.tsx
index 3e8e4f87..1bdf279b 100644
--- a/components/object/preview-modal.tsx
+++ b/components/object/preview-modal.tsx
@@ -2,12 +2,7 @@
 
 import * as React from "react"
 import { useTranslation } from "react-i18next"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Spinner } from "@/components/ui/spinner"
 
 const TEXT_MIMES = [
@@ -20,19 +15,7 @@ const TEXT_MIMES = [
   "text/csv",
   "text/markdown",
 ]
-const TEXT_EXTENSIONS = [
-  ".txt",
-  ".json",
-  ".xml",
-  ".js",
-  ".ts",
-  ".css",
-  ".md",
-  ".html",
-  ".csv",
-  ".yml",
-  ".yaml",
-]
+const TEXT_EXTENSIONS = [".txt", ".json", ".xml", ".js", ".ts", ".css", ".md", ".html", ".csv", ".yml", ".yaml"]
 const ALLOWED_SIZE = 1024 * 1024 * 2 // 2MB
 
 interface ObjectPreviewModalProps {
@@ -46,11 +29,7 @@ interface ObjectPreviewModalProps {
   } | null
 }
 
-export function ObjectPreviewModal({
-  show,
-  onShowChange,
-  object,
-}: ObjectPreviewModalProps) {
+export function ObjectPreviewModal({ show, onShowChange, object }: ObjectPreviewModalProps) {
   const { t } = useTranslation()
   const [textContent, setTextContent] = React.useState("")
   const [loading, setLoading] = React.useState(false)
@@ -63,14 +42,11 @@ export function ObjectPreviewModal({
   const isImage = contentType.startsWith("image/")
   const isVideo = contentType.startsWith("video/")
   const isAudio = contentType.startsWith("audio/")
-  const isPdf =
-    contentType === "application/pdf" || objectKey.toLowerCase().endsWith(".pdf")
+  const isPdf = contentType === "application/pdf" || objectKey.toLowerCase().endsWith(".pdf")
   const isText =
     objectSize <= ALLOWED_SIZE &&
     (TEXT_MIMES.some((m) => contentType.startsWith(m)) ||
-      TEXT_EXTENSIONS.some((ext) =>
-        objectKey.toLowerCase().endsWith(ext)
-      ))
+      TEXT_EXTENSIONS.some((ext) => objectKey.toLowerCase().endsWith(ext)))
 
   React.useEffect(() => {
     if (show && isText && previewUrl) {
@@ -99,25 +75,13 @@ export function ObjectPreviewModal({
             <>
               {isImage && (
                 <div className="flex justify-center">
-                  <img
-                    src={previewUrl}
-                    alt="preview"
-                    className="max-h-[60vh]"
-                  />
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img src={previewUrl} alt="preview" className="max-h-[60vh]" />
                 </div>
               )}
-              {isPdf && (
-                <iframe
-                  src={previewUrl}
-                  className="h-[70vh] w-full"
-                  frameBorder={0}
-                  title="PDF preview"
-                />
-              )}
+              {isPdf && <iframe src={previewUrl} className="h-[70vh] w-full" frameBorder={0} title="PDF preview" />}
               {isText && (
-                <pre className="max-h-[70vh] overflow-auto whitespace-pre-wrap break-words">
-                  {textContent}
-                </pre>
+                <pre className="max-h-[70vh] overflow-auto whitespace-pre-wrap break-words">{textContent}</pre>
               )}
               {isVideo && (
                 <video controls className="w-full">
@@ -131,18 +95,13 @@ export function ObjectPreviewModal({
                   {t("Your browser does not support the audio tag")}
                 </audio>
               )}
-              {!isImage &&
-                !isPdf &&
-                !isText &&
-                !isVideo &&
-                !isAudio &&
-                object && (
-                  <div className="flex flex-1 justify-center items-center text-sm text-muted-foreground">
-                    {t("Cannot Preview", {
-                      contentType: contentType || "unknown",
-                    })}
-                  </div>
-                )}
+              {!isImage && !isPdf && !isText && !isVideo && !isAudio && object && (
+                <div className="flex flex-1 justify-center items-center text-sm text-muted-foreground">
+                  {t("Cannot Preview", {
+                    contentType: contentType || "unknown",
+                  })}
+                </div>
+              )}
             </>
           )}
         </div>
diff --git a/components/object/upload-picker.tsx b/components/object/upload-picker.tsx
index d40cc0a8..20b85442 100644
--- a/components/object/upload-picker.tsx
+++ b/components/object/upload-picker.tsx
@@ -2,22 +2,12 @@
 
 import { Alert, AlertDescription } from "@/components/ui/alert"
 import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Progress } from "@/components/ui/progress"
 import { useAddUploadFiles, useTaskPanelOpen } from "@/contexts/task-context"
 import { formatBytes } from "@/lib/functions"
 import { useMessage } from "@/lib/feedback/message"
-import {
-  RiDeleteBinLine,
-  RiFileAddLine,
-  RiFolderAddLine,
-  RiUploadCloudLine,
-} from "@remixicon/react"
+import { RiDeleteBinLine, RiFileAddLine, RiFolderAddLine, RiUploadCloudLine } from "@remixicon/react"
 import { useVirtualizer } from "@tanstack/react-virtual"
 import * as React from "react"
 import { useTranslation } from "react-i18next"
@@ -39,13 +29,10 @@ const ROW_HEIGHT = 40
 const MAX_FILES_LIMIT = 10_000
 const MEMORY_WARNING_THRESHOLD = 5_000
 
-function getFilesFromEntry(
-  entry: FileSystemEntry,
-  path = ""
-): Promise<{ file: File; relativePath: string }[]> {
+function getFilesFromEntry(entry: FileSystemEntry, path = ""): Promise<{ file: File; relativePath: string }[]> {
   return new Promise((resolve, reject) => {
     if (entry.isFile) {
-      ; (entry as FileSystemFileEntry).file((file) => {
+      ;(entry as FileSystemFileEntry).file((file) => {
         resolve([{ file, relativePath: path + file.name }])
       })
     } else if (entry.isDirectory) {
@@ -55,16 +42,14 @@ function getFilesFromEntry(
         dirReader.readEntries(
           async (results) => {
             if (!results.length) {
-              const filesArrays = await Promise.all(
-                entries.map((e) => getFilesFromEntry(e, path + entry.name + "/"))
-              )
+              const filesArrays = await Promise.all(entries.map((e) => getFilesFromEntry(e, path + entry.name + "/")))
               resolve(filesArrays.flat())
             } else {
               entries.push(...results)
               readBatch()
             }
           },
-          (err) => reject(err)
+          (err) => reject(err),
         )
       }
       readBatch()
@@ -81,15 +66,12 @@ type DirHandleLike = {
 async function getFilesFromDirectoryHandle(
   dirHandle: FileSystemDirectoryHandle & DirHandleLike,
   basePath = "",
-  onProgress?: (count: number) => void
+  onProgress?: (count: number) => void,
 ): Promise<{ file: File; relativePath: string }[]> {
   const results: { file: File; relativePath: string }[] = []
   let count = 0
 
-  async function walk(
-    handle: FileSystemDirectoryHandle & DirHandleLike,
-    path: string
-  ) {
+  async function walk(handle: FileSystemDirectoryHandle & DirHandleLike, path: string) {
     for await (const entry of handle.values()) {
       const entryPath = path ? `${path}/${entry.name}` : entry.name
       if (entry.kind === "file") {
@@ -120,6 +102,7 @@ function FileListVirtualized({
   formatBytes: (bytes: number) => string
 }) {
   const parentRef = React.useRef<HTMLDivElement>(null)
+  // eslint-disable-next-line react-hooks/incompatible-library -- tanstack virtualizer hooks are intentionally used here
   const virtualizer = useVirtualizer({
     count: items.length,
     getScrollElement: () => parentRef.current,
@@ -133,15 +116,9 @@ function FileListVirtualized({
       <div className="flex shrink-0 border-b bg-muted text-xs uppercase text-muted-foreground">
         <div className="min-w-0 flex-1 px-3 py-2 font-medium">{t("Name")}</div>
         <div className="w-28 shrink-0 px-3 py-2 font-medium">{t("Size")}</div>
-        <div className="w-24 shrink-0 px-3 py-2 text-right font-medium">
-          {t("Actions")}
-        </div>
+        <div className="w-24 shrink-0 px-3 py-2 text-right font-medium">{t("Actions")}</div>
       </div>
-      <div
-        ref={parentRef}
-        className="min-h-64 min-w-0 flex-1 overflow-auto"
-        style={{ contain: "strict" }}
-      >
+      <div ref={parentRef} className="min-h-64 min-w-0 flex-1 overflow-auto" style={{ contain: "strict" }}>
         <div
           style={{
             height: `${virtualizer.getTotalSize()}px`,
@@ -160,15 +137,10 @@ function FileListVirtualized({
                   transform: `translateY(${virtualRow.start}px)`,
                 }}
               >
-                <div
-                  className="min-w-0 flex-1 truncate px-3 py-2 font-medium"
-                  title={item.relativePath}
-                >
+                <div className="min-w-0 flex-1 truncate px-3 py-2 font-medium" title={item.relativePath}>
                   {item.relativePath}
                 </div>
-                <div className="w-28 shrink-0 px-3 py-2 text-muted-foreground">
-                  {formatBytes(item.file.size)}
-                </div>
+                <div className="w-28 shrink-0 px-3 py-2 text-muted-foreground">{formatBytes(item.file.size)}</div>
                 <div className="w-24 shrink-0 px-3 py-2 text-right">
                   <Button
                     variant="ghost"
@@ -189,10 +161,7 @@ function FileListVirtualized({
   )
 }
 
-function collectFilesFromFileList(
-  files: FileList,
-  basePath = ""
-): FileItem[] {
+function collectFilesFromFileList(files: FileList, basePath = ""): FileItem[] {
   const items: FileItem[] = []
   for (let i = 0; i < files.length; i++) {
     const file = files[i]
@@ -212,13 +181,7 @@ function collectFilesFromFileList(
   return items
 }
 
-export function ObjectUploadPicker({
-  show,
-  onShowChange,
-  bucketName,
-  prefix,
-  onSuccess,
-}: ObjectUploadPickerProps) {
+export function ObjectUploadPicker({ show, onShowChange, bucketName, prefix, onSuccess }: ObjectUploadPickerProps) {
   const { t } = useTranslation()
   const message = useMessage()
   const addUploadFiles = useAddUploadFiles()
@@ -249,23 +212,19 @@ export function ObjectUploadPicker({
     (incoming: number): boolean => {
       const nextTotal = items.length + incoming
       if (nextTotal > MAX_FILES_LIMIT) {
-        message.error(
-          String(t("File Count Limit Exceeded", { current: nextTotal, max: MAX_FILES_LIMIT }))
-        )
+        message.error(String(t("File Count Limit Exceeded", { current: nextTotal, max: MAX_FILES_LIMIT })))
         return false
       }
       if (nextTotal > MEMORY_WARNING_THRESHOLD) {
         setIsMemoryWarning(true)
         if (!memoryWarningShownRef.current) {
           memoryWarningShownRef.current = true
-          message.warning(
-            String(t("Memory Warning", { count: nextTotal, threshold: MEMORY_WARNING_THRESHOLD }))
-          )
+          message.warning(String(t("Memory Warning", { count: nextTotal, threshold: MEMORY_WARNING_THRESHOLD })))
         }
       }
       return true
     },
-    [items.length, message, t]
+    [items.length, message, t],
   )
 
   const selectFile = () => fileInputRef.current?.click()
@@ -290,11 +249,9 @@ export function ObjectUploadPicker({
           (count) => {
             if (count - lastReported >= 200 || count === 0) {
               lastReported = count
-              setFolderLoadingProgress(
-                count > 0 ? Math.min(99, Math.round((count / 25000) * 100)) : 0
-              )
+              setFolderLoadingProgress(count > 0 ? Math.min(99, Math.round((count / 25000) * 100)) : 0)
             }
-          }
+          },
         )
         if (!ensureCapacity(newItems.length)) return
         setItems((prev) => [...prev, ...newItems])
@@ -359,11 +316,7 @@ export function ObjectUploadPicker({
       if (isAdding || isFolderLoading) return
 
       const dtItems = e.dataTransfer?.items
-      if (
-        dtItems?.length &&
-        dtItems[0] &&
-        typeof (dtItems[0] as DataTransferItem).webkitGetAsEntry === "function"
-      ) {
+      if (dtItems?.length && dtItems[0] && typeof (dtItems[0] as DataTransferItem).webkitGetAsEntry === "function") {
         let allFiles: { file: File; relativePath: string }[] = []
         setIsFolderLoading(true)
         try {
@@ -404,7 +357,7 @@ export function ObjectUploadPicker({
       }))
       setItems((prev) => [...prev, ...newItems])
     },
-    [ensureCapacity, isAdding, isFolderLoading, message, t]
+    [ensureCapacity, isAdding, isFolderLoading, message, t],
   )
 
   const handleDragEnter = (e: React.DragEvent) => {
@@ -445,7 +398,7 @@ export function ObjectUploadPicker({
         const batch = tasks.slice(i, i + batchSize)
         addUploadFiles(
           batch.map((b) => ({ file: b.file, key: b.key })),
-          bucketName
+          bucketName,
         )
         processed += batch.length
         setAddProgress(Math.round((processed / tasks.length) * 100))
@@ -477,13 +430,7 @@ export function ObjectUploadPicker({
           <DialogTitle>{t("Upload File")}</DialogTitle>
         </DialogHeader>
         <div className="flex min-h-0 flex-1 flex-col gap-5 overflow-hidden">
-          <input
-            ref={fileInputRef}
-            type="file"
-            multiple
-            className="hidden"
-            onChange={handleFileSelect}
-          />
+          <input ref={fileInputRef} type="file" multiple className="hidden" onChange={handleFileSelect} />
           <input
             ref={folderInputRef}
             type="file"
@@ -505,21 +452,11 @@ export function ObjectUploadPicker({
               </p>
             </div>
             <div className="flex shrink-0 gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={isAdding || isFolderLoading}
-                onClick={selectFile}
-              >
+              <Button variant="outline" size="sm" disabled={isAdding || isFolderLoading} onClick={selectFile}>
                 <RiFileAddLine className="size-4" />
                 {t("Select File")}
               </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={isAdding || isFolderLoading}
-                onClick={selectFolder}
-              >
+              <Button variant="outline" size="sm" disabled={isAdding || isFolderLoading} onClick={selectFolder}>
                 <RiFolderAddLine className="size-4" />
                 {t("Select Folder")}
               </Button>
@@ -542,8 +479,9 @@ export function ObjectUploadPicker({
           )}
 
           <div
-            className={`min-h-0 min-w-0 flex flex-col overflow-hidden rounded-md border transition-colors ${isDragOver ? "border-primary bg-primary/5" : ""
-              }`}
+            className={`min-h-0 min-w-0 flex flex-col overflow-hidden rounded-md border transition-colors ${
+              isDragOver ? "border-primary bg-primary/5" : ""
+            }`}
             onDragEnter={handleDragEnter}
             onDragOver={handleDragOver}
             onDragLeave={handleDragLeave}
@@ -553,8 +491,7 @@ export function ObjectUploadPicker({
               <div className="text-sm text-muted-foreground">
                 {items.length > 0 && (
                   <p>
-                    {t("Total Files")}: {items.length.toLocaleString()} /{" "}
-                    {MAX_FILES_LIMIT.toLocaleString()}
+                    {t("Total Files")}: {items.length.toLocaleString()} / {MAX_FILES_LIMIT.toLocaleString()}
                   </p>
                 )}
               </div>
@@ -572,9 +509,7 @@ export function ObjectUploadPicker({
             {items.length === 0 ? (
               <div className="flex flex-col items-center justify-center gap-4 p-6 text-center">
                 <RiUploadCloudLine className="size-12 text-muted-foreground" />
-                <p className="text-base font-medium text-muted-foreground">
-                  {t("No Selection")}
-                </p>
+                <p className="text-base font-medium text-muted-foreground">{t("No Selection")}</p>
                 <p className="max-w-[320px] text-xs text-muted-foreground">
                   {t("Chrome and Firefox support drag and drop to this area and selecting multiple files or folders.")}
                   <br />
@@ -584,12 +519,7 @@ export function ObjectUploadPicker({
                 </p>
               </div>
             ) : (
-              <FileListVirtualized
-                items={items}
-                removeItem={removeItem}
-                t={t}
-                formatBytes={formatBytes}
-              />
+              <FileListVirtualized items={items} removeItem={removeItem} t={t} formatBytes={formatBytes} />
             )}
 
             {isFolderLoading && (
@@ -614,11 +544,7 @@ export function ObjectUploadPicker({
           </div>
 
           <div className="flex justify-end gap-2">
-            <Button
-              variant="default"
-              disabled={!items.length || isAdding || isFolderLoading}
-              onClick={handleUpload}
-            >
+            <Button variant="default" disabled={!items.length || isAdding || isFolderLoading} onClick={handleUpload}>
               {isAdding ? t("Adding to Upload Queue") : t("Start Upload")}
             </Button>
           </div>
diff --git a/components/object/versions.tsx b/components/object/versions.tsx
index bd22cfd2..588d615b 100644
--- a/components/object/versions.tsx
+++ b/components/object/versions.tsx
@@ -2,19 +2,9 @@
 
 import * as React from "react"
 import { useTranslation } from "react-i18next"
-import {
-  RiFileCopyLine,
-  RiEyeLine,
-  RiDownloadCloud2Line,
-  RiDeleteBin5Line,
-} from "@remixicon/react"
+import { RiFileCopyLine, RiEyeLine, RiDownloadCloud2Line, RiDeleteBin5Line } from "@remixicon/react"
 import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { DataTable } from "@/components/data-table/data-table"
 import { useDataTable } from "@/hooks/use-data-table"
 import { useObject } from "@/hooks/use-object"
@@ -60,10 +50,6 @@ export function ObjectVersions({
   const [versions, setVersions] = React.useState<VersionRow[]>([])
   const [loading, setLoading] = React.useState(false)
 
-  React.useEffect(() => {
-    if (visible) fetchVersions()
-  }, [visible, bucketName, objectKey])
-
   const fetchVersions = React.useCallback(async () => {
     if (!objectKey) return
     setLoading(true)
@@ -76,65 +62,72 @@ export function ObjectVersions({
     } finally {
       setLoading(false)
     }
-  }, [objectKey, objectApi.listObjectVersions, message, t])
+  }, [objectKey, objectApi, message, t])
 
-  const copyVersionId = async (versionId: string) => {
-    if (!versionId) return
-    try {
-      await navigator.clipboard.writeText(versionId)
-      message.success(t("Copy Success"))
-    } catch {
-      message.error(t("Copy Failed"))
-    }
-  }
+  React.useEffect(() => {
+    if (visible) fetchVersions()
+  }, [visible, fetchVersions])
+
+  const copyVersionId = React.useCallback(
+    async (versionId: string) => {
+      if (!versionId) return
+      try {
+        await navigator.clipboard.writeText(versionId)
+        message.success(t("Copy Success"))
+      } catch {
+        message.error(t("Copy Failed"))
+      }
+    },
+    [message, t],
+  )
 
-  const getSignedUrlWithVersion = async (
-    key: string,
-    versionId: string,
-    expiresIn = 3600
-  ) => {
-    const command = new GetObjectCommand({
-      Bucket: bucketName,
-      Key: key,
-      VersionId:
-        versionId === "00000000-0000-0000-0000-000000000000"
-          ? undefined
-          : versionId,
-    })
-    return getSignedUrl(client, command, { expiresIn })
-  }
+  const getSignedUrlWithVersion = React.useCallback(
+    async (key: string, versionId: string, expiresIn = 3600) => {
+      const command = new GetObjectCommand({
+        Bucket: bucketName,
+        Key: key,
+        VersionId: versionId === "00000000-0000-0000-0000-000000000000" ? undefined : versionId,
+      })
+      return getSignedUrl(client, command, { expiresIn })
+    },
+    [bucketName, client],
+  )
 
-  const downloadVersion = async (row: VersionRow) => {
-    const versionId = row.VersionId ?? ""
-    try {
-      const url = await getSignedUrlWithVersion(objectKey, versionId)
-      const response = await fetch(url)
-      const filename = objectKey.split("/").pop() ?? ""
-      const headers: Record<string, string> = {
-        "content-type": getContentType(response.headers, filename),
-        filename:
-          response.headers.get("content-disposition")?.split("filename=")[1] ??
-          "",
+  const downloadVersion = React.useCallback(
+    async (row: VersionRow) => {
+      const versionId = row.VersionId ?? ""
+      try {
+        const url = await getSignedUrlWithVersion(objectKey, versionId)
+        const response = await fetch(url)
+        const filename = objectKey.split("/").pop() ?? ""
+        const headers: Record<string, string> = {
+          "content-type": getContentType(response.headers, filename),
+          filename: response.headers.get("content-disposition")?.split("filename=")[1] ?? "",
+        }
+        const blob = await response.blob()
+        exportFile({ headers, data: blob }, filename)
+      } catch (err) {
+        message.error((err as Error)?.message ?? t("Download Failed"))
       }
-      const blob = await response.blob()
-      exportFile({ headers, data: blob }, filename)
-    } catch (err) {
-      message.error((err as Error)?.message ?? t("Download Failed"))
-    }
-  }
+    },
+    [getSignedUrlWithVersion, objectKey, message, t],
+  )
 
-  const deleteVersion = async (row: VersionRow) => {
-    const versionId = row.VersionId
-    if (!versionId) return
-    try {
-      await objectApi.deleteObject(objectKey, versionId)
-      message.success(t("Delete Success"))
-      fetchVersions()
-      onRefreshParent()
-    } catch (err) {
-      message.error((err as Error)?.message ?? t("Delete Failed"))
-    }
-  }
+  const deleteVersion = React.useCallback(
+    async (row: VersionRow) => {
+      const versionId = row.VersionId
+      if (!versionId) return
+      try {
+        await objectApi.deleteObject(objectKey, versionId)
+        message.success(t("Delete Success"))
+        fetchVersions()
+        onRefreshParent()
+      } catch (err) {
+        message.error((err as Error)?.message ?? t("Delete Failed"))
+      }
+    },
+    [objectApi, objectKey, message, t, fetchVersions, onRefreshParent],
+  )
 
   const columns: ColumnDef<VersionRow>[] = React.useMemo(
     () => [
@@ -163,45 +156,27 @@ export function ObjectVersions({
         id: "lastModified",
         header: () => t("LastModified"),
         cell: ({ row }) =>
-          row.original.LastModified
-            ? dayjs(row.original.LastModified).format("YYYY-MM-DD HH:mm:ss")
-            : "",
+          row.original.LastModified ? dayjs(row.original.LastModified).format("YYYY-MM-DD HH:mm:ss") : "",
       },
       {
         id: "size",
         header: () => t("Size"),
-        cell: ({ row }) =>
-          typeof row.original.Size === "number"
-            ? formatBytes(row.original.Size)
-            : "",
+        cell: ({ row }) => (typeof row.original.Size === "number" ? formatBytes(row.original.Size) : ""),
       },
       {
         id: "actions",
         header: () => t("Action"),
         cell: ({ row }) => (
           <div className="flex gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => onPreview(row.original.VersionId ?? "")}
-            >
+            <Button variant="outline" size="sm" onClick={() => onPreview(row.original.VersionId ?? "")}>
               <RiEyeLine className="size-4" />
               {t("Preview")}
             </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => downloadVersion(row.original)}
-            >
+            <Button variant="outline" size="sm" onClick={() => downloadVersion(row.original)}>
               <RiDownloadCloud2Line className="size-4" />
               {t("Download")}
             </Button>
-            <Button
-              variant="destructive"
-              size="sm"
-              className="text-white"
-              onClick={() => deleteVersion(row.original)}
-            >
+            <Button variant="destructive" size="sm" className="text-white" onClick={() => deleteVersion(row.original)}>
               <RiDeleteBin5Line className="size-4" />
               {t("Delete")}
             </Button>
@@ -209,7 +184,7 @@ export function ObjectVersions({
         ),
       },
     ],
-    [t, onPreview]
+    [t, onPreview, copyVersionId, downloadVersion, deleteVersion],
   )
 
   const { table } = useDataTable<VersionRow>({
@@ -223,11 +198,7 @@ export function ObjectVersions({
         <DialogHeader>
           <DialogTitle>{t("Object Versions")}</DialogTitle>
         </DialogHeader>
-        <DataTable
-          table={table}
-          isLoading={loading}
-          emptyTitle={t("No Versions")}
-        />
+        <DataTable table={table} isLoading={loading} emptyTitle={t("No Versions")} />
       </DialogContent>
     </Dialog>
   )
diff --git a/components/object/view.tsx b/components/object/view.tsx
index 8ef47d84..716d9407 100644
--- a/components/object/view.tsx
+++ b/components/object/view.tsx
@@ -40,8 +40,7 @@ export function ObjectView({ bucketName, objectKey }: ObjectViewProps) {
       const filename = (object.Key as string).split("/").pop() ?? ""
       const headers: Record<string, string> = {
         "content-type": getContentType(response.headers, filename),
-        filename:
-          response.headers.get("content-disposition")?.split("filename=")[1] ?? "",
+        filename: response.headers.get("content-disposition")?.split("filename=")[1] ?? "",
       }
       const blob = await response.blob()
       exportFile({ headers, data: blob }, filename)
@@ -50,9 +49,7 @@ export function ObjectView({ bucketName, objectKey }: ObjectViewProps) {
     }
   }
 
-  const lastModified = object?.LastModified
-    ? new Date(object.LastModified as string).toISOString()
-    : ""
+  const lastModified = object?.LastModified ? new Date(object.LastModified as string).toISOString() : ""
 
   return (
     <div className="space-y-4">
@@ -69,35 +66,25 @@ export function ObjectView({ bucketName, objectKey }: ObjectViewProps) {
         </ItemHeader>
         <ItemContent className="space-y-3 text-sm">
           <div className="flex items-center justify-between">
-            <span className="font-medium text-muted-foreground">
-              {t("Object Name")}
-            </span>
+            <span className="font-medium text-muted-foreground">{t("Object Name")}</span>
             <span className="max-w-[60%] truncate" title={String(object?.Key ?? "")}>
               {String(object?.Key ?? "")}
             </span>
           </div>
           <div className="flex items-center justify-between">
-            <span className="font-medium text-muted-foreground">
-              {t("Object Size")}
-            </span>
+            <span className="font-medium text-muted-foreground">{t("Object Size")}</span>
             <span>{String(object?.ContentLength ?? "-")}</span>
           </div>
           <div className="flex items-center justify-between">
-            <span className="font-medium text-muted-foreground">
-              {t("Object Type")}
-            </span>
-            <span className="max-w-[60%] truncate">
-              {String(object?.ContentType ?? "-")}
-            </span>
+            <span className="font-medium text-muted-foreground">{t("Object Type")}</span>
+            <span className="max-w-[60%] truncate">{String(object?.ContentType ?? "-")}</span>
           </div>
           <div className="flex items-center justify-between">
             <span className="font-medium text-muted-foreground">ETag</span>
             <span>{String(object?.ETag ?? "-")}</span>
           </div>
           <div className="flex items-center justify-between">
-            <span className="font-medium text-muted-foreground">
-              {t("Last Modified Time")}
-            </span>
+            <span className="font-medium text-muted-foreground">{t("Last Modified Time")}</span>
             <span>{lastModified || "-"}</span>
           </div>
         </ItemContent>
diff --git a/components/page-header.tsx b/components/page-header.tsx
index f08e779b..5c66b167 100644
--- a/components/page-header.tsx
+++ b/components/page-header.tsx
@@ -14,19 +14,12 @@ export function PageHeader({
   className?: string
 }) {
   return (
-    <div
-      className={cn(
-        "sticky bg-background top-0 z-10 flex flex-col justify-between gap-2 lg:flex-row",
-        className
-      )}
-    >
+    <div className={cn("sticky bg-background top-0 z-10 flex flex-col justify-between gap-2 lg:flex-row", className)}>
       <div className="space-y-2">
         {children}
         {description}
       </div>
-      {actions && (
-        <div className="flex flex-1 flex-wrap items-center justify-end gap-2">{actions}</div>
-      )}
+      {actions && <div className="flex flex-1 flex-wrap items-center justify-end gap-2">{actions}</div>}
     </div>
   )
 }
diff --git a/components/page.tsx b/components/page.tsx
index 81a63c7f..1800f4ac 100644
--- a/components/page.tsx
+++ b/components/page.tsx
@@ -2,12 +2,6 @@
 
 import { cn } from "@/lib/utils"
 
-export function Page({
-  children,
-  className,
-}: {
-  children: React.ReactNode
-  className?: string
-}) {
+export function Page({ children, className }: { children: React.ReactNode; className?: string }) {
   return <div className={cn("flex flex-col gap-6", className)}>{children}</div>
 }
diff --git a/components/policies/form.tsx b/components/policies/form.tsx
index a2873206..00b28902 100644
--- a/components/policies/form.tsx
+++ b/components/policies/form.tsx
@@ -7,13 +7,7 @@ import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { Spinner } from "@/components/ui/spinner"
 import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { useMessage } from "@/lib/feedback/message"
 import { usePolicies } from "@/hooks/use-policies"
 
@@ -29,12 +23,7 @@ interface PolicyFormProps {
   onSaved: () => void
 }
 
-export function PolicyForm({
-  show,
-  onShowChange,
-  policy,
-  onSaved,
-}: PolicyFormProps) {
+export function PolicyForm({ show, onShowChange, policy, onSaved }: PolicyFormProps) {
   const { t } = useTranslation()
   const message = useMessage()
   const { addPolicy } = usePolicies()
@@ -100,17 +89,14 @@ export function PolicyForm({
 
     setSubmitting(true)
     try {
-      const payload = normalizePolicyForSubmit(
-        JSON.parse(content) as Record<string, unknown>
-      )
+      const payload = normalizePolicyForSubmit(JSON.parse(content) as Record<string, unknown>)
       await addPolicy(name.trim(), payload)
       message.success(t("Saved"))
       closeModal()
       onSaved()
     } catch (error) {
       console.error(error)
-      const msg =
-        error instanceof Error ? error.message : String(error)
+      const msg = error instanceof Error ? error.message : String(error)
       message.error(msg || t("Save Failed"))
     } finally {
       setSubmitting(false)
@@ -132,16 +118,9 @@ export function PolicyForm({
           <Field>
             <FieldLabel htmlFor="policy-name">{t("Policy Name")}</FieldLabel>
             <FieldContent>
-              <Input
-                id="policy-name"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                autoComplete="off"
-              />
+              <Input id="policy-name" value={name} onChange={(e) => setName(e.target.value)} autoComplete="off" />
             </FieldContent>
-            {errors.name && (
-              <FieldDescription className="text-destructive">{errors.name}</FieldDescription>
-            )}
+            {errors.name && <FieldDescription className="text-destructive">{errors.name}</FieldDescription>}
           </Field>
 
           <Field>
@@ -156,9 +135,7 @@ export function PolicyForm({
                 />
               </div>
             </FieldContent>
-            {errors.content && (
-              <FieldDescription className="text-destructive">{errors.content}</FieldDescription>
-            )}
+            {errors.content && <FieldDescription className="text-destructive">{errors.content}</FieldDescription>}
           </Field>
         </div>
 
diff --git a/components/replication/new-form.tsx b/components/replication/new-form.tsx
index c3bf0e79..32524ab9 100644
--- a/components/replication/new-form.tsx
+++ b/components/replication/new-form.tsx
@@ -1,74 +1,53 @@
-"use client";
-
-import * as React from "react";
-import { useState, useEffect, useCallback, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { RiAddLine, RiDeleteBinLine } from "@remixicon/react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Switch } from "@/components/ui/switch";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Field, FieldContent, FieldLabel } from "@/components/ui/field";
-import { useBucket } from "@/hooks/use-bucket";
-import { useMessage } from "@/lib/feedback/message";
-import { getBytes } from "@/lib/functions";
+"use client"
+
+import * as React from "react"
+import { useState, useEffect, useCallback, useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { RiAddLine, RiDeleteBinLine } from "@remixicon/react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Switch } from "@/components/ui/switch"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Field, FieldContent, FieldLabel } from "@/components/ui/field"
+import { useBucket } from "@/hooks/use-bucket"
+import { useMessage } from "@/lib/feedback/message"
+import { getBytes } from "@/lib/functions"
 
 interface ReplicationNewFormProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  bucketName: string | null;
-  onSuccess?: () => void;
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  bucketName: string | null
+  onSuccess?: () => void
 }
 
 interface Tag {
-  key: string;
-  value: string;
+  key: string
+  value: string
 }
 
-export function ReplicationNewForm({
-  open,
-  onOpenChange,
-  bucketName,
-  onSuccess,
-}: ReplicationNewFormProps) {
-  const { t } = useTranslation();
-  const message = useMessage();
-  const {
-    setRemoteReplicationTarget,
-    putBucketReplication,
-    getBucketReplication,
-  } = useBucket();
-
-  const [level, setLevel] = useState("1");
-  const [endpoint, setEndpoint] = useState("http://");
-  const [tls, setTls] = useState(false);
-  const [accessKey, setAccessKey] = useState("");
-  const [secretKey, setSecretKey] = useState("");
-  const [bucket, setBucket] = useState("");
-  const [region, setRegion] = useState("us-east-1");
-  const [modeType, setModeType] = useState("async");
-  const [timecheck, setTimecheck] = useState("60");
-  const [unit, setUnit] = useState("Gi");
-  const [bandwidth, setBandwidth] = useState(100);
-  const [storageType, setStorageType] = useState("STANDARD");
-  const [prefix, setPrefix] = useState("");
-  const [tags, setTags] = useState<Tag[]>([{ key: "", value: "" }]);
-  const [existingObject, setExistingObject] = useState(true);
-  const [expiredDeleteMark, setExpiredDeleteMark] = useState(true);
-  const [submitting, setSubmitting] = useState(false);
+export function ReplicationNewForm({ open, onOpenChange, bucketName, onSuccess }: ReplicationNewFormProps) {
+  const { t } = useTranslation()
+  const message = useMessage()
+  const { setRemoteReplicationTarget, putBucketReplication, getBucketReplication } = useBucket()
+
+  const [level, setLevel] = useState("1")
+  const [endpoint, setEndpoint] = useState("http://")
+  const [tls, setTls] = useState(false)
+  const [accessKey, setAccessKey] = useState("")
+  const [secretKey, setSecretKey] = useState("")
+  const [bucket, setBucket] = useState("")
+  const [region, setRegion] = useState("us-east-1")
+  const [modeType, setModeType] = useState("async")
+  const [timecheck, setTimecheck] = useState("60")
+  const [unit, setUnit] = useState("Gi")
+  const [bandwidth, setBandwidth] = useState(100)
+  const [storageType, setStorageType] = useState("STANDARD")
+  const [prefix, setPrefix] = useState("")
+  const [tags, setTags] = useState<Tag[]>([{ key: "", value: "" }])
+  const [existingObject, setExistingObject] = useState(true)
+  const [expiredDeleteMark, setExpiredDeleteMark] = useState(true)
+  const [submitting, setSubmitting] = useState(false)
 
   const modeOptions = useMemo(
     () => [
@@ -76,7 +55,7 @@ export function ReplicationNewForm({
       { label: t("Synchronous"), value: "sync" },
     ],
     [t],
-  );
+  )
 
   const unitOptions = useMemo(
     () => [
@@ -85,91 +64,89 @@ export function ReplicationNewForm({
       { label: "GiB/s", value: "Gi" },
     ],
     [],
-  );
+  )
 
   useEffect(() => {
     if (tls) {
       if (endpoint.startsWith("http://")) {
-        setEndpoint(endpoint.replace("http://", "https://"));
+        setEndpoint(endpoint.replace("http://", "https://"))
       } else if (!endpoint.startsWith("https://")) {
-        setEndpoint("https://" + endpoint);
+        setEndpoint("https://" + endpoint)
       }
     } else {
       if (endpoint.startsWith("https://")) {
-        setEndpoint(endpoint.replace("https://", "http://"));
+        setEndpoint(endpoint.replace("https://", "http://"))
       } else if (!endpoint.startsWith("http://")) {
-        setEndpoint("http://" + endpoint);
+        setEndpoint("http://" + endpoint)
       }
     }
-  }, [tls]);
+  }, [tls, endpoint])
 
   const resetForm = useCallback(() => {
-    setLevel("1");
-    setEndpoint("http://");
-    setTls(false);
-    setAccessKey("");
-    setSecretKey("");
-    setBucket("");
-    setRegion("us-east-1");
-    setModeType("async");
-    setTimecheck("60");
-    setUnit("Gi");
-    setBandwidth(100);
-    setStorageType("STANDARD");
-    setPrefix("");
-    setTags([{ key: "", value: "" }]);
-    setExistingObject(true);
-    setExpiredDeleteMark(true);
-  }, []);
+    setLevel("1")
+    setEndpoint("http://")
+    setTls(false)
+    setAccessKey("")
+    setSecretKey("")
+    setBucket("")
+    setRegion("us-east-1")
+    setModeType("async")
+    setTimecheck("60")
+    setUnit("Gi")
+    setBandwidth(100)
+    setStorageType("STANDARD")
+    setPrefix("")
+    setTags([{ key: "", value: "" }])
+    setExistingObject(true)
+    setExpiredDeleteMark(true)
+  }, [])
 
   useEffect(() => {
     if (open) {
-      resetForm();
+      resetForm()
     }
-  }, [open, resetForm]);
+  }, [open, resetForm])
 
   const addTag = () => {
-    setTags((prev) => [...prev, { key: "", value: "" }]);
-  };
+    setTags((prev) => [...prev, { key: "", value: "" }])
+  }
 
   const removeTag = (index: number) => {
-    if (tags.length === 1) return;
-    setTags((prev) => prev.filter((_, i) => i !== index));
-  };
+    if (tags.length === 1) return
+    setTags((prev) => prev.filter((_, i) => i !== index))
+  }
 
   const updateTag = (index: number, field: "key" | "value", value: string) => {
-    setTags((prev) =>
-      prev.map((tag, i) => (i === index ? { ...tag, [field]: value } : tag)),
-    );
-  };
+    setTags((prev) => prev.map((tag, i) => (i === index ? { ...tag, [field]: value } : tag)))
+  }
 
   const validate = () => {
     if (!endpoint) {
-      message.error(t("Please enter endpoint"));
-      return false;
+      message.error(t("Please enter endpoint"))
+      return false
     }
     if (!bucket) {
-      message.error(t("Please enter bucket"));
-      return false;
+      message.error(t("Please enter bucket"))
+      return false
     }
     if (!accessKey || !secretKey) {
-      message.error(t("Please provide credentials"));
-      return false;
+      message.error(t("Please provide credentials"))
+      return false
     }
     if (modeType === "async" && Number(timecheck) < 1) {
-      message.error(t("Please enter valid health check interval"));
-      return false;
+      message.error(t("Please enter valid health check interval"))
+      return false
     }
-    return true;
-  };
+    return true
+  }
 
   const handleSave = async () => {
-    if (!validate()) return;
+    if (!validate()) return
     if (!bucketName) {
-      message.error(t("Bucket name is required"));
-      return;
+      message.error(t("Bucket name is required"))
+      return
     }
-    setSubmitting(true);
+    setSubmitting(true)
     try {
       const config: Record<string, unknown> = {
         sourcebucket: bucketName,
@@ -195,29 +172,26 @@ export function ReplicationNewForm({
         latency: { curr: 0, avg: 0, max: 0 },
         edge: false,
         edgeSyncBeforeExpiry: false,
-      };
+      }
 
       if (modeType === "async") {
-        config.bandwidth = Number(getBytes(String(bandwidth), unit, true)) || 0;
+        config.bandwidth = Number(getBytes(String(bandwidth), unit, true)) || 0
       }
 
-      const targetResponse = (await setRemoteReplicationTarget(
-        bucketName,
-        config,
-      )) as string;
+      const targetResponse = (await setRemoteReplicationTarget(bucketName, config)) as string
       if (!targetResponse) {
-        return;
+        return
       }
 
       let oldConfig: {
-        ReplicationConfiguration?: { Rules?: unknown[] };
-      } | null = null;
+        ReplicationConfiguration?: { Rules?: unknown[] }
+      } | null = null
       try {
         oldConfig = (await getBucketReplication(bucketName)) as {
-          ReplicationConfiguration?: { Rules?: unknown[] };
-        };
+          ReplicationConfiguration?: { Rules?: unknown[] }
+        }
       } catch {
-        oldConfig = null;
+        oldConfig = null
       }
 
       const newRule: Record<string, unknown> = {
@@ -237,60 +211,60 @@ export function ReplicationNewForm({
           Bucket: targetResponse,
           StorageClass: storageType || "STANDARD",
         },
-      };
+      }
 
-      const validTags = tags.filter((tag) => tag.key && tag.value);
-      const filter: Record<string, unknown> = {};
+      const validTags = tags.filter((tag) => tag.key && tag.value)
+      const filter: Record<string, unknown> = {}
 
       if (prefix) {
-        filter.Prefix = prefix;
+        filter.Prefix = prefix
       }
 
       if (validTags.length === 1) {
-        const [singleTag] = validTags;
+        const [singleTag] = validTags
         if (singleTag) {
-          filter.Tag = { Key: singleTag.key, Value: singleTag.value };
+          filter.Tag = { Key: singleTag.key, Value: singleTag.value }
         }
       } else if (validTags.length > 1) {
         filter.And = {
           ...(prefix ? { Prefix: prefix } : {}),
           Tags: validTags.map((tag) => ({ Key: tag.key, Value: tag.value })),
-        };
-        delete filter.Prefix;
+        }
+        delete filter.Prefix
       }
 
       if (Object.keys(filter).length > 0) {
-        newRule.Filter = filter;
+        newRule.Filter = filter
       }
 
-      const existingRules = oldConfig?.ReplicationConfiguration?.Rules ?? [];
+      const existingRules = oldConfig?.ReplicationConfiguration?.Rules ?? []
       const payload = {
         Role: targetResponse,
         Rules: [
-          ...(
-            existingRules as Array<{ Destination?: { Bucket?: string } }>
-          ).filter((rule) => rule.Destination?.Bucket !== targetResponse),
+          ...(existingRules as Array<{ Destination?: { Bucket?: string } }>).filter(
+            (rule) => rule.Destination?.Bucket !== targetResponse,
+          ),
           newRule,
         ],
-      };
+      }
 
-      await putBucketReplication(bucketName, payload);
-      message.success(t("Create Success"));
-      onSuccess?.();
-      onOpenChange(false);
-      resetForm();
+      await putBucketReplication(bucketName, payload)
+      message.success(t("Create Success"))
+      onSuccess?.()
+      onOpenChange(false)
+      resetForm()
     } catch (error) {
-      console.error(error);
-      message.error((error as Error).message || t("Save failed"));
+      console.error(error)
+      message.error((error as Error).message || t("Save failed"))
     } finally {
-      setSubmitting(false);
+      setSubmitting(false)
     }
-  };
+  }
 
   const handleCancel = () => {
-    onOpenChange(false);
-    resetForm();
-  };
+    onOpenChange(false)
+    resetForm()
+  }
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -312,12 +286,7 @@ export function ReplicationNewForm({
               <Field>
                 <FieldLabel>{t("Priority")}</FieldLabel>
                 <FieldContent>
-                  <Input
-                    type="number"
-                    min={1}
-                    value={level}
-                    onChange={(e) => setLevel(e.target.value)}
-                  />
+                  <Input type="number" min={1} value={level} onChange={(e) => setLevel(e.target.value)} />
                 </FieldContent>
               </Field>
               <Field>
@@ -415,9 +384,7 @@ export function ReplicationNewForm({
 
             <div className="space-y-3">
               <div className="flex items-center justify-between">
-                <FieldLabel className="text-sm font-medium">
-                  {t("Tags")}
-                </FieldLabel>
+                <FieldLabel className="text-sm font-medium">{t("Tags")}</FieldLabel>
                 <Button variant="outline" size="sm" onClick={addTag}>
                   <RiAddLine className="size-4" aria-hidden />
                   {t("Add Tag")}
@@ -432,17 +399,13 @@ export function ReplicationNewForm({
                     >
                       <Input
                         value={tag.key}
-                        onChange={(e) =>
-                          updateTag(index, "key", e.target.value)
-                        }
+                        onChange={(e) => updateTag(index, "key", e.target.value)}
                         placeholder={t("Tag Name")}
                       />
                       <div className="flex items-center gap-2">
                         <Input
                           value={tag.value}
-                          onChange={(e) =>
-                            updateTag(index, "value", e.target.value)
-                          }
+                          onChange={(e) => updateTag(index, "value", e.target.value)}
                           placeholder={t("Tag Value")}
                           className="flex-1"
                         />
@@ -476,42 +439,26 @@ export function ReplicationNewForm({
 
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium">
-                  {t("Replicate Existing Objects")}
-                </p>
+                <p className="text-sm font-medium">{t("Replicate Existing Objects")}</p>
                 <p className="text-xs text-muted-foreground">
-                  {t(
-                    "Include objects that already exist in the source bucket.",
-                  )}
+                  {t("Include objects that already exist in the source bucket.")}
                 </p>
               </div>
-              <Switch
-                checked={existingObject}
-                onCheckedChange={setExistingObject}
-              />
+              <Switch checked={existingObject} onCheckedChange={setExistingObject} />
             </div>
 
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium">
-                  {t("Replicate Delete Markers")}
-                </p>
-                <p className="text-xs text-muted-foreground">
-                  {t("Sync delete markers to destination bucket.")}
-                </p>
+                <p className="text-sm font-medium">{t("Replicate Delete Markers")}</p>
+                <p className="text-xs text-muted-foreground">{t("Sync delete markers to destination bucket.")}</p>
               </div>
-              <Switch
-                checked={expiredDeleteMark}
-                onCheckedChange={setExpiredDeleteMark}
-              />
+              <Switch checked={expiredDeleteMark} onCheckedChange={setExpiredDeleteMark} />
             </div>
 
             {modeType === "async" && (
               <div className="space-y-3">
                 <Field>
-                  <FieldLabel>
-                    {t("Health Check Interval (seconds)")}
-                  </FieldLabel>
+                  <FieldLabel>{t("Health Check Interval (seconds)")}</FieldLabel>
                   <FieldContent>
                     <Input
                       type="number"
@@ -563,5 +510,5 @@ export function ReplicationNewForm({
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  );
+  )
 }
diff --git a/components/search-input.tsx b/components/search-input.tsx
index 388b5f11..62666a5d 100644
--- a/components/search-input.tsx
+++ b/components/search-input.tsx
@@ -2,12 +2,7 @@
 
 import * as React from "react"
 import { RiSearchLine, RiCloseLine } from "@remixicon/react"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@/components/ui/input-group"
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group"
 import { cn } from "@/lib/utils"
 
 interface SearchInputProps extends Omit<React.ComponentProps<"input">, "value" | "onChange"> {
@@ -37,19 +32,9 @@ export function SearchInput({
       <InputGroupAddon className="text-muted-foreground">
         <RiSearchLine className="size-4" />
       </InputGroupAddon>
-      <InputGroupInput
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={placeholder}
-      />
+      <InputGroupInput value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} />
       {showClear && (
-        <InputGroupButton
-          variant="ghost"
-          size="icon-xs"
-          type="button"
-          aria-label="Clear"
-          onClick={handleClear}
-        >
+        <InputGroupButton variant="ghost" size="icon-xs" type="button" aria-label="Clear" onClick={handleClear}>
           <RiCloseLine className="size-4" />
         </InputGroupButton>
       )}
diff --git a/components/sidebars/version.tsx b/components/sidebars/version.tsx
new file mode 100644
index 00000000..2ecb0568
--- /dev/null
+++ b/components/sidebars/version.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { configManager } from "@/lib/config"
+import { cn } from "@/lib/utils"
+import { useSidebar } from "@/components/ui/sidebar"
+
+interface SidebarVersionProps {
+  appName?: string
+  className?: string
+}
+
+export function SidebarVersion({ appName = "RustFS", className }: SidebarVersionProps) {
+  const { state } = useSidebar()
+  const isCollapsed = state === "collapsed"
+  const [version, setVersion] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+
+    const loadVersion = async () => {
+      try {
+        const config = await configManager.loadConfig()
+        if (cancelled) return
+        setVersion(config.release?.version ?? null)
+      } catch {
+        if (cancelled) return
+        setVersion(null)
+      }
+    }
+
+    void loadVersion()
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const displayVersion = version ? `v${version}` : ""
+  const displayName = appName.toUpperCase()
+  const collapsedLabel = displayVersion || displayName.charAt(0)
+
+  return (
+    <div className={cn("text-xs text-muted-foreground", className)}>
+      <div className={cn("border-t pt-2", isCollapsed ? "px-1 text-center" : "flex items-center justify-center gap-2")}>
+        {isCollapsed ? (
+          <span className="truncate font-semibold">{collapsedLabel}</span>
+        ) : (
+          <>
+            <span className="font-semibold tracking-wide">{displayName}</span>
+            {displayVersion ? <span className="font-mono">{displayVersion}</span> : null}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/components/site-replication/new-form.tsx b/components/site-replication/new-form.tsx
index b5528f31..1aa059da 100644
--- a/components/site-replication/new-form.tsx
+++ b/components/site-replication/new-form.tsx
@@ -1,38 +1,32 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import { useState, useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { RiAddLine, RiCloseLine } from "@remixicon/react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { useMessage } from "@/lib/feedback/message";
+import * as React from "react"
+import { useState, useCallback } from "react"
+import { useTranslation } from "react-i18next"
+import { RiAddLine, RiCloseLine } from "@remixicon/react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { useMessage } from "@/lib/feedback/message"
 
 interface SiteReplicationNewFormProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSuccess?: () => void;
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSuccess?: () => void
 }
 
 interface SiteFormValue {
-  name: string;
-  endpoint: string;
-  accessKey: string;
-  secretKey: string;
+  name: string
+  endpoint: string
+  accessKey: string
+  secretKey: string
 }
 
 interface SiteFormErrors {
-  endpoint: string;
-  accessKey: string;
-  secretKey: string;
+  endpoint: string
+  accessKey: string
+  secretKey: string
 }
 
 const createRemoteEntry = (): SiteFormValue => ({
@@ -40,39 +34,30 @@ const createRemoteEntry = (): SiteFormValue => ({
   endpoint: "",
   accessKey: "",
   secretKey: "",
-});
+})
 
 const createErrorState = (): SiteFormErrors => ({
   endpoint: "",
   accessKey: "",
   secretKey: "",
-});
+})
 
-export function SiteReplicationNewForm({
-  open,
-  onOpenChange,
-  onSuccess,
-}: SiteReplicationNewFormProps) {
-  const { t } = useTranslation();
-  const message = useMessage();
+export function SiteReplicationNewForm({ open, onOpenChange, onSuccess }: SiteReplicationNewFormProps) {
+  const { t } = useTranslation()
+  const message = useMessage()
 
   const [currentSite, setCurrentSite] = useState<SiteFormValue>({
     name: "",
     endpoint: "http://127.0.0.1:7000",
     accessKey: "rustfsadmin",
     secretKey: "",
-  });
+  })
 
-  const [remoteSites, setRemoteSites] = useState<SiteFormValue[]>([
-    createRemoteEntry(),
-  ]);
+  const [remoteSites, setRemoteSites] = useState<SiteFormValue[]>([createRemoteEntry()])
 
-  const [currentErrors, setCurrentErrors] =
-    useState<SiteFormErrors>(createErrorState());
+  const [currentErrors, setCurrentErrors] = useState<SiteFormErrors>(createErrorState())
 
-  const [remoteErrors, setRemoteErrors] = useState<SiteFormErrors[]>([
-    createErrorState(),
-  ]);
+  const [remoteErrors, setRemoteErrors] = useState<SiteFormErrors[]>([createErrorState()])
 
   const resetForm = useCallback(() => {
     setCurrentSite({
@@ -80,122 +65,106 @@ export function SiteReplicationNewForm({
       endpoint: "http://127.0.0.1:7000",
       accessKey: "rustfsadmin",
       secretKey: "",
-    });
-    setRemoteSites([createRemoteEntry()]);
-    setCurrentErrors(createErrorState());
-    setRemoteErrors([createErrorState()]);
-  }, []);
+    })
+    setRemoteSites([createRemoteEntry()])
+    setCurrentErrors(createErrorState())
+    setRemoteErrors([createErrorState()])
+  }, [])
 
   React.useEffect(() => {
     if (open) {
-      resetForm();
+      resetForm()
     }
-  }, [open, resetForm]);
+  }, [open, resetForm])
 
   const updateCurrentSite = (field: keyof SiteFormValue, value: string) => {
-    setCurrentSite((prev) => ({ ...prev, [field]: value }));
-    if (
-      field === "endpoint" ||
-      field === "accessKey" ||
-      field === "secretKey"
-    ) {
+    setCurrentSite((prev) => ({ ...prev, [field]: value }))
+    if (field === "endpoint" || field === "accessKey" || field === "secretKey") {
       if (value.trim()) {
-        setCurrentErrors((prev) => ({ ...prev, [field]: "" }));
+        setCurrentErrors((prev) => ({ ...prev, [field]: "" }))
       }
     }
-  };
+  }
 
-  const updateRemoteSite = (
-    index: number,
-    field: keyof SiteFormValue,
-    value: string,
-  ) => {
-    setRemoteSites((prev) =>
-      prev.map((site, i) => (i === index ? { ...site, [field]: value } : site)),
-    );
-    if (
-      field === "endpoint" ||
-      field === "accessKey" ||
-      field === "secretKey"
-    ) {
+  const updateRemoteSite = (index: number, field: keyof SiteFormValue, value: string) => {
+    setRemoteSites((prev) => prev.map((site, i) => (i === index ? { ...site, [field]: value } : site)))
+    if (field === "endpoint" || field === "accessKey" || field === "secretKey") {
       if (value.trim()) {
-        setRemoteErrors((prev) =>
-          prev.map((err, i) => (i === index ? { ...err, [field]: "" } : err)),
-        );
+        setRemoteErrors((prev) => prev.map((err, i) => (i === index ? { ...err, [field]: "" } : err)))
       }
     }
-  };
+  }
 
   const addRemoteSite = () => {
-    setRemoteSites((prev) => [...prev, createRemoteEntry()]);
-    setRemoteErrors((prev) => [...prev, createErrorState()]);
-  };
+    setRemoteSites((prev) => [...prev, createRemoteEntry()])
+    setRemoteErrors((prev) => [...prev, createErrorState()])
+  }
 
   const removeRemoteSite = (index: number) => {
-    if (remoteSites.length <= 1) return;
-    setRemoteSites((prev) => prev.filter((_, i) => i !== index));
-    setRemoteErrors((prev) => prev.filter((_, i) => i !== index));
-  };
+    if (remoteSites.length <= 1) return
+    setRemoteSites((prev) => prev.filter((_, i) => i !== index))
+    setRemoteErrors((prev) => prev.filter((_, i) => i !== index))
+  }
 
   const validate = () => {
-    let valid = true;
-    const newCurrentErrors = { ...currentErrors };
-    const newRemoteErrors = [...remoteErrors];
+    let valid = true
+    const newCurrentErrors = { ...currentErrors }
+    const newRemoteErrors = [...remoteErrors]
 
     if (!currentSite.endpoint.trim()) {
-      newCurrentErrors.endpoint = t("Endpoint is required");
-      valid = false;
+      newCurrentErrors.endpoint = t("Endpoint is required")
+      valid = false
     }
     if (!currentSite.accessKey.trim()) {
-      newCurrentErrors.accessKey = t("Access Key is required");
-      valid = false;
+      newCurrentErrors.accessKey = t("Access Key is required")
+      valid = false
     }
     if (!currentSite.secretKey.trim()) {
-      newCurrentErrors.secretKey = t("Secret Key is required");
-      valid = false;
+      newCurrentErrors.secretKey = t("Secret Key is required")
+      valid = false
     }
 
     remoteSites.forEach((site, index) => {
-      const errors = newRemoteErrors[index] ?? createErrorState();
+      const errors = newRemoteErrors[index] ?? createErrorState()
       if (!site.endpoint.trim()) {
-        errors.endpoint = t("Endpoint is required");
-        valid = false;
+        errors.endpoint = t("Endpoint is required")
+        valid = false
       }
       if (!site.accessKey.trim()) {
-        errors.accessKey = t("Access Key is required");
-        valid = false;
+        errors.accessKey = t("Access Key is required")
+        valid = false
       }
       if (!site.secretKey.trim()) {
-        errors.secretKey = t("Secret Key is required");
-        valid = false;
+        errors.secretKey = t("Secret Key is required")
+        valid = false
       }
-      newRemoteErrors[index] = errors;
-    });
+      newRemoteErrors[index] = errors
+    })
 
-    setCurrentErrors(newCurrentErrors);
-    setRemoteErrors(newRemoteErrors);
-    return valid;
-  };
+    setCurrentErrors(newCurrentErrors)
+    setRemoteErrors(newRemoteErrors)
+    return valid
+  }
 
   const handleSave = () => {
     if (!validate()) {
-      return;
+      return
     }
-    console.log("Current Site:", { ...currentSite });
+    console.log("Current Site:", { ...currentSite })
     console.log(
       "Remote Sites:",
       remoteSites.map((site) => ({ ...site })),
-    );
-    message.success(t("Site replication configuration saved"));
-    onSuccess?.();
-    onOpenChange(false);
-    resetForm();
-  };
+    )
+    message.success(t("Site replication configuration saved"))
+    onSuccess?.()
+    onOpenChange(false)
+    resetForm()
+  }
 
   const handleCancel = () => {
-    onOpenChange(false);
-    resetForm();
-  };
+    onOpenChange(false)
+    resetForm()
+  }
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -208,9 +177,7 @@ export function SiteReplicationNewForm({
         <DialogHeader className="space-y-2 text-left">
           <DialogTitle>{t("Add Site Replication")}</DialogTitle>
           <DialogDescription>
-            {t(
-              "Note: AccessKey and SecretKey values are required for each site when adding or editing peer sites",
-            )}
+            {t("Note: AccessKey and SecretKey values are required for each site when adding or editing peer sites")}
           </DialogDescription>
         </DialogHeader>
 
@@ -232,32 +199,20 @@ export function SiteReplicationNewForm({
                 <Input
                   id="current-site-endpoint"
                   value={currentSite.endpoint}
-                  onChange={(e) =>
-                    updateCurrentSite("endpoint", e.target.value)
-                  }
+                  onChange={(e) => updateCurrentSite("endpoint", e.target.value)}
                   placeholder={t("Endpoint")}
                 />
-                {currentErrors.endpoint && (
-                  <p className="text-sm text-destructive">
-                    {currentErrors.endpoint}
-                  </p>
-                )}
+                {currentErrors.endpoint && <p className="text-sm text-destructive">{currentErrors.endpoint}</p>}
               </div>
               <div className="space-y-2">
                 <Label htmlFor="current-site-access">{t("Access Key *")}</Label>
                 <Input
                   id="current-site-access"
                   value={currentSite.accessKey}
-                  onChange={(e) =>
-                    updateCurrentSite("accessKey", e.target.value)
-                  }
+                  onChange={(e) => updateCurrentSite("accessKey", e.target.value)}
                   placeholder={t("Access Key")}
                 />
-                {currentErrors.accessKey && (
-                  <p className="text-sm text-destructive">
-                    {currentErrors.accessKey}
-                  </p>
-                )}
+                {currentErrors.accessKey && <p className="text-sm text-destructive">{currentErrors.accessKey}</p>}
               </div>
               <div className="space-y-2">
                 <Label htmlFor="current-site-secret">{t("Secret Key *")}</Label>
@@ -265,16 +220,10 @@ export function SiteReplicationNewForm({
                   id="current-site-secret"
                   type="password"
                   value={currentSite.secretKey}
-                  onChange={(e) =>
-                    updateCurrentSite("secretKey", e.target.value)
-                  }
+                  onChange={(e) => updateCurrentSite("secretKey", e.target.value)}
                   placeholder={t("Secret Key")}
                 />
-                {currentErrors.secretKey && (
-                  <p className="text-sm text-destructive">
-                    {currentErrors.secretKey}
-                  </p>
-                )}
+                {currentErrors.secretKey && <p className="text-sm text-destructive">{currentErrors.secretKey}</p>}
               </div>
             </div>
           </section>
@@ -316,71 +265,49 @@ export function SiteReplicationNewForm({
 
                   <div className="grid gap-4 sm:grid-cols-2">
                     <div className="space-y-2">
-                      <Label htmlFor={`remote-site-name-${index}`}>
-                        {t("Site Name")}
-                      </Label>
+                      <Label htmlFor={`remote-site-name-${index}`}>{t("Site Name")}</Label>
                       <Input
                         id={`remote-site-name-${index}`}
                         value={site.name}
-                        onChange={(e) =>
-                          updateRemoteSite(index, "name", e.target.value)
-                        }
+                        onChange={(e) => updateRemoteSite(index, "name", e.target.value)}
                         placeholder={t("Site Name")}
                       />
                     </div>
                     <div className="space-y-2 sm:col-span-2">
-                      <Label htmlFor={`remote-site-endpoint-${index}`}>
-                        {t("Endpoint *")}
-                      </Label>
+                      <Label htmlFor={`remote-site-endpoint-${index}`}>{t("Endpoint *")}</Label>
                       <Input
                         id={`remote-site-endpoint-${index}`}
                         value={site.endpoint}
-                        onChange={(e) =>
-                          updateRemoteSite(index, "endpoint", e.target.value)
-                        }
+                        onChange={(e) => updateRemoteSite(index, "endpoint", e.target.value)}
                         placeholder={t("Endpoint")}
                       />
                       {remoteErrors[index]?.endpoint && (
-                        <p className="text-sm text-destructive">
-                          {remoteErrors[index].endpoint}
-                        </p>
+                        <p className="text-sm text-destructive">{remoteErrors[index].endpoint}</p>
                       )}
                     </div>
                     <div className="space-y-2">
-                      <Label htmlFor={`remote-site-access-${index}`}>
-                        {t("Access Key *")}
-                      </Label>
+                      <Label htmlFor={`remote-site-access-${index}`}>{t("Access Key *")}</Label>
                       <Input
                         id={`remote-site-access-${index}`}
                         value={site.accessKey}
-                        onChange={(e) =>
-                          updateRemoteSite(index, "accessKey", e.target.value)
-                        }
+                        onChange={(e) => updateRemoteSite(index, "accessKey", e.target.value)}
                         placeholder={t("Access Key")}
                       />
                       {remoteErrors[index]?.accessKey && (
-                        <p className="text-sm text-destructive">
-                          {remoteErrors[index].accessKey}
-                        </p>
+                        <p className="text-sm text-destructive">{remoteErrors[index].accessKey}</p>
                       )}
                     </div>
                     <div className="space-y-2">
-                      <Label htmlFor={`remote-site-secret-${index}`}>
-                        {t("Secret Key *")}
-                      </Label>
+                      <Label htmlFor={`remote-site-secret-${index}`}>{t("Secret Key *")}</Label>
                       <Input
                         id={`remote-site-secret-${index}`}
                         type="password"
                         value={site.secretKey}
-                        onChange={(e) =>
-                          updateRemoteSite(index, "secretKey", e.target.value)
-                        }
+                        onChange={(e) => updateRemoteSite(index, "secretKey", e.target.value)}
                         placeholder={t("Secret Key")}
                       />
                       {remoteErrors[index]?.secretKey && (
-                        <p className="text-sm text-destructive">
-                          {remoteErrors[index].secretKey}
-                        </p>
+                        <p className="text-sm text-destructive">{remoteErrors[index].secretKey}</p>
                       )}
                     </div>
                   </div>
@@ -400,5 +327,5 @@ export function SiteReplicationNewForm({
         </div>
       </DialogContent>
     </Dialog>
-  );
+  )
 }
diff --git a/components/tasks/item.tsx b/components/tasks/item.tsx
index 30c2f652..4e513fc5 100644
--- a/components/tasks/item.tsx
+++ b/components/tasks/item.tsx
@@ -31,9 +31,7 @@ export function TaskItem({ task }: TaskItemProps) {
   return (
     <div className="flex flex-col gap-1">
       <div className="flex items-center justify-between gap-3 group">
-        <div className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
-          {task.displayName}
-        </div>
+        <div className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">{task.displayName}</div>
         <Button
           variant="ghost"
           size="sm"
diff --git a/components/tasks/panel.tsx b/components/tasks/panel.tsx
index 9d8879b8..69fbfed8 100644
--- a/components/tasks/panel.tsx
+++ b/components/tasks/panel.tsx
@@ -33,8 +33,7 @@ export function TaskPanel({ tasks, onClearTasks }: TaskPanelProps) {
     else setTab("pending")
   }, [processing.length, pending.length, completed.length])
 
-  const withCount = (key: string, count: number) =>
-    t(key).replace(/\{[^}]*\}/g, String(count))
+  const withCount = (key: string, count: number) => t(key).replace(/\{[^}]*\}/g, String(count))
 
   const tabs = [
     { value: "pending", label: withCount("Pending", pending.length) },
@@ -58,14 +57,10 @@ export function TaskPanel({ tasks, onClearTasks }: TaskPanelProps) {
       <Alert className="border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-100">
         <AlertDescription className="space-y-2 text-sm leading-relaxed">
           <p>
-            <span className="font-medium text-amber-600 dark:text-amber-300">
-              {t("Browser Warning")}
-            </span>
+            <span className="font-medium text-amber-600 dark:text-amber-300">{t("Browser Warning")}</span>
           </p>
           <p>
-            <span className="font-medium text-amber-600 dark:text-amber-300">
-              {t("Cache Warning")}
-            </span>
+            <span className="font-medium text-amber-600 dark:text-amber-300">{t("Cache Warning")}</span>
           </p>
         </AlertDescription>
       </Alert>
diff --git a/components/tasks/stats-button.tsx b/components/tasks/stats-button.tsx
index 418e19ca..a35c37be 100644
--- a/components/tasks/stats-button.tsx
+++ b/components/tasks/stats-button.tsx
@@ -1,13 +1,7 @@
 "use client"
 
 import { Button } from "@/components/ui/button"
-import {
-  Drawer,
-  DrawerContent,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/components/ui/drawer"
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"
 import { Spinner } from "@/components/ui/spinner"
 import { useTaskManager, useTasks, useTaskPanelOpen } from "@/contexts/task-context"
 import { RiCheckLine } from "@remixicon/react"
@@ -46,9 +40,7 @@ export function TaskStatsButton() {
           ) : (
             <div className="flex items-center gap-2">
               <RiCheckLine className="size-4 text-emerald-600" />
-              <span>
-                {t("Task Completed", { completed: completed.length, failed: failed.length })}
-              </span>
+              <span>{t("Task Completed", { completed: completed.length, failed: failed.length })}</span>
             </div>
           )}
         </Button>
diff --git a/components/theme-switcher.tsx b/components/theme-switcher.tsx
index 4e82df30..77e71bd4 100644
--- a/components/theme-switcher.tsx
+++ b/components/theme-switcher.tsx
@@ -3,12 +3,7 @@
 import { useTheme } from "next-themes"
 import { RiSunFill, RiMoonFill, RiContrast2Line } from "@remixicon/react"
 import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { useTranslation } from "react-i18next"
 
 const themeOptions = [
@@ -38,10 +33,7 @@ export function ThemeSwitcher() {
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-40" align="start">
         {themeOptions.map(({ labelKey, key, Icon: OptionIcon }) => (
-          <DropdownMenuItem
-            key={key}
-            onSelect={() => setTheme(key)}
-          >
+          <DropdownMenuItem key={key} onSelect={() => setTheme(key)}>
             <OptionIcon className="mr-2 h-4 w-4" />
             {t(labelKey)}
           </DropdownMenuItem>
diff --git a/components/tiers/change-key.tsx b/components/tiers/change-key.tsx
index ca94dccb..2dbdc5f8 100644
--- a/components/tiers/change-key.tsx
+++ b/components/tiers/change-key.tsx
@@ -4,13 +4,7 @@ import * as React from "react"
 import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Field, FieldContent, FieldLabel } from "@/components/ui/field"
 import { useTiers } from "@/hooks/use-tiers"
 import { useMessage } from "@/lib/feedback/message"
@@ -22,12 +16,7 @@ interface TiersChangeKeyProps {
   onSuccess?: () => void
 }
 
-export function TiersChangeKey({
-  open,
-  onOpenChange,
-  tierName,
-  onSuccess,
-}: TiersChangeKeyProps) {
+export function TiersChangeKey({ open, onOpenChange, tierName, onSuccess }: TiersChangeKeyProps) {
   const { t } = useTranslation()
   const message = useMessage()
   const { updateTiers } = useTiers()
@@ -65,9 +54,7 @@ export function TiersChangeKey({
       onSuccess?.()
       closeModal()
     } catch (error) {
-      message.error(
-        (error as Error).message || t("Update Failed")
-      )
+      message.error((error as Error).message || t("Update Failed"))
     } finally {
       setSubmitting(false)
     }
diff --git a/components/tiers/new-form.tsx b/components/tiers/new-form.tsx
index 12bb7954..ce8b899a 100644
--- a/components/tiers/new-form.tsx
+++ b/components/tiers/new-form.tsx
@@ -6,13 +6,7 @@ import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"
 import { useTiers } from "@/hooks/use-tiers"
 import { useMessage } from "@/lib/feedback/message"
@@ -32,17 +26,18 @@ const TYPE_OPTIONS = [
   { labelKey: "AWS S3", value: "s3", icon: "/svg/aws.svg", descKey: "Standard AWS S3 tier" },
   { labelKey: "Aliyun OSS", value: "aliyun", icon: "/svg/aliyun.svg", descKey: "Alibaba Cloud Object Storage Service" },
   { labelKey: "Tencent COS", value: "tencent", icon: "/svg/tenxunyun.svg", descKey: "Tencent Cloud Object Storage" },
-  { labelKey: "Huawei OBS", value: "huaweicloud", icon: "/svg/huaweiyun.svg", descKey: "Huawei Cloud Object Storage Service" },
+  {
+    labelKey: "Huawei OBS",
+    value: "huaweicloud",
+    icon: "/svg/huaweiyun.svg",
+    descKey: "Huawei Cloud Object Storage Service",
+  },
   { labelKey: "Azure Blob", value: "azure", icon: "/svg/azure.svg", descKey: "Microsoft Azure Blob Storage" },
   { labelKey: "Google Cloud Storage", value: "gcs", icon: "/svg/google.svg", descKey: "Google Cloud Storage" },
   { labelKey: "Cloudflare R2", value: "r2", icon: "/svg/cloudflare.svg", descKey: "Cloudflare R2 Storage" },
 ] as const
 
-export function TiersNewForm({
-  open,
-  onOpenChange,
-  onSuccess,
-}: TiersNewFormProps) {
+export function TiersNewForm({ open, onOpenChange, onSuccess }: TiersNewFormProps) {
   const { t } = useTranslation()
   const message = useMessage()
   const { addTiers } = useTiers()
@@ -154,9 +149,7 @@ export function TiersNewForm({
                   key={item.value}
                   type="button"
                   onClick={() => setType(item.value)}
-                  className={cn(
-                    "cursor-pointer border border-border/70 text-left transition hover:border-primary"
-                  )}
+                  className={cn("cursor-pointer border border-border/70 text-left transition hover:border-primary")}
                 >
                   <div className="flex items-center gap-3 p-4">
                     <Image
@@ -167,12 +160,8 @@ export function TiersNewForm({
                       className="size-10 shrink-0 object-contain"
                     />
                     <div>
-                      <p className="text-base font-semibold">
-                        {t(item.labelKey)}
-                      </p>
-                      <p className="text-sm text-muted-foreground">
-                        {t(item.descKey)}
-                      </p>
+                      <p className="text-base font-semibold">{t(item.labelKey)}</p>
+                      <p className="text-sm text-muted-foreground">{t(item.descKey)}</p>
                     </div>
                   </div>
                 </button>
@@ -196,9 +185,7 @@ export function TiersNewForm({
                     />
                   )}
                   <div>
-                    <p className="text-sm text-muted-foreground">
-                      {t("Selected Type")}
-                    </p>
+                    <p className="text-sm text-muted-foreground">{t("Selected Type")}</p>
                     <p className="text-base font-semibold">{type}</p>
                   </div>
                 </div>
@@ -215,11 +202,7 @@ export function TiersNewForm({
                       autoComplete="off"
                     />
                   </FieldContent>
-                  {nameError && (
-                    <FieldDescription className="text-destructive">
-                      {nameError}
-                    </FieldDescription>
-                  )}
+                  {nameError && <FieldDescription className="text-destructive">{nameError}</FieldDescription>}
                 </Field>
 
                 <Field>
@@ -325,11 +308,7 @@ export function TiersNewForm({
           <Button variant="outline" onClick={handleCancel}>
             {t("Cancel")}
           </Button>
-          <Button
-            onClick={handleSave}
-            disabled={!type}
-            aria-disabled={submitting}
-          >
+          <Button onClick={handleSave} disabled={!type} aria-disabled={submitting}>
             {submitting ? t("Saving...") : t("Save")}
           </Button>
         </DialogFooter>
diff --git a/components/top-nav-breadcrumb.tsx b/components/top-nav-breadcrumb.tsx
index 291da24d..a6a47f0f 100644
--- a/components/top-nav-breadcrumb.tsx
+++ b/components/top-nav-breadcrumb.tsx
@@ -17,7 +17,7 @@ import navs from "@/config/navs"
 function getLabelByPath(pathSegment: string, t: (k: string) => string): string {
   const path = pathSegment.startsWith("/") ? pathSegment : `/${pathSegment}`
   const nav = navs.find(
-    (n) => n.type !== "divider" && n.to && (n.to === path || n.to.replace(/^\//, "") === pathSegment)
+    (n) => n.type !== "divider" && n.to && (n.to === path || n.to.replace(/^\//, "") === pathSegment),
   )
   return nav?.label ? t(nav.label) : pathSegment
 }
@@ -27,7 +27,7 @@ export function TopNavBreadcrumb() {
   const { t } = useTranslation()
 
   const segments = pathname?.split("/").filter(Boolean) ?? []
-  const isHome = !pathname || pathname === "/" || (segments.length === 1 && segments[0] === "performance")
+  const isHome = !pathname || pathname === "/"
   if (segments.length === 0 && !pathname) return null
 
   const items: { label: string; href?: string }[] = []
@@ -37,9 +37,7 @@ export function TopNavBreadcrumb() {
     items.push({ label: homeNav?.label ? t(homeNav.label) : t("Home") })
   } else if (segments[0] === "browser") {
     items.push({ label: getLabelByPath("browser", t), href: "/browser" })
-    items.push(
-      segments.length === 1 ? { label: t("Buckets") } : { label: t("Buckets"), href: "/browser" }
-    )
+    items.push(segments.length === 1 ? { label: t("Buckets") } : { label: t("Buckets"), href: "/browser" })
     if (segments.length > 1) {
       const bucketName = decodeURIComponent(segments[1])
       const bucketHref = `/browser/${encodeURIComponent(bucketName)}`
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
index 64514fdd..26614452 100644
--- a/components/ui/accordion.tsx
+++ b/components/ui/accordion.tsx
@@ -6,60 +6,42 @@ import { Accordion as AccordionPrimitive } from "radix-ui"
 import { cn } from "@/lib/utils"
 import { RiArrowDownSLine, RiArrowUpSLine } from "@remixicon/react"
 
-function Accordion({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return (
-    <AccordionPrimitive.Root
-      data-slot="accordion"
-      className={cn("flex w-full flex-col", className)}
-      {...props}
-    />
-  )
+function Accordion({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" className={cn("flex w-full flex-col", className)} {...props} />
 }
 
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
   return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("not-last:border-b", className)}
-      {...props}
-    />
+    <AccordionPrimitive.Item data-slot="accordion-item" className={cn("not-last:border-b", className)} {...props} />
   )
 }
 
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
   return (
     <AccordionPrimitive.Header className="flex">
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
           "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-none py-2.5 text-left text-xs font-medium hover:underline focus-visible:ring-1 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
-          className
+          className,
         )}
         {...props}
       >
         {children}
-        <RiArrowDownSLine data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
-        <RiArrowUpSLine data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+        <RiArrowDownSLine
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <RiArrowUpSLine
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
   )
 }
 
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
   return (
     <AccordionPrimitive.Content
       data-slot="accordion-content"
@@ -69,7 +51,7 @@ function AccordionContent({
       <div
         className={cn(
           "pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
-          className
+          className,
         )}
       >
         {children}
diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
index 74654350..38f5b48e 100644
--- a/components/ui/alert-dialog.tsx
+++ b/components/ui/alert-dialog.tsx
@@ -6,36 +6,26 @@ import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
   return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
 }
 
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
+function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
 }
 
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
 }
 
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
   return (
     <AlertDialogPrimitive.Overlay
       data-slot="alert-dialog-overlay"
-      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50",
+        className,
+      )}
       {...props}
     />
   )
@@ -56,7 +46,7 @@ function AlertDialogContent({
         data-size={size}
         className={cn(
           "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-none p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
-          className
+          className,
         )}
         {...props}
       />
@@ -64,56 +54,53 @@ function AlertDialogContent({
   )
 }
 
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-dialog-header"
-      className={cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className)}
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className,
+      )}
       {...props}
     />
   )
 }
 
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-dialog-footer"
       className={cn(
         "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
-        className
+        className,
       )}
       {...props}
     />
   )
 }
 
-function AlertDialogMedia({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-dialog-media"
-      className={cn("bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-none sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className)}
+      className={cn(
+        "bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-none sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className,
+      )}
       {...props}
     />
   )
 }
 
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
   return (
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
-      className={cn("text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className)}
+      className={cn(
+        "text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className,
+      )}
       {...props}
     />
   )
@@ -126,7 +113,10 @@ function AlertDialogDescription({
   return (
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className)}
+      className={cn(
+        "text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3",
+        className,
+      )}
       {...props}
     />
   )
@@ -141,11 +131,7 @@ function AlertDialogAction({
   Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
   return (
     <Button variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Action
-        data-slot="alert-dialog-action"
-        className={cn(className)}
-        {...props}
-      />
+      <AlertDialogPrimitive.Action data-slot="alert-dialog-action" className={cn(className)} {...props} />
     </Button>
   )
 }
@@ -159,11 +145,7 @@ function AlertDialogCancel({
   Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
   return (
     <Button variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Cancel
-        data-slot="alert-dialog-cancel"
-        className={cn(className)}
-        {...props}
-      />
+      <AlertDialogPrimitive.Cancel data-slot="alert-dialog-cancel" className={cn(className)} {...props} />
     </Button>
   )
 }
diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx
index 08916e54..471df127 100644
--- a/components/ui/alert.tsx
+++ b/components/ui/alert.tsx
@@ -3,31 +3,24 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-const alertVariants = cva("grid gap-0.5 rounded-none border px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert", {
-  variants: {
-    variant: {
-      default: "bg-card text-card-foreground",
-      destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+const alertVariants = cva(
+  "grid gap-0.5 rounded-none border px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
     },
   },
-  defaultVariants: {
-    variant: "default",
-  },
-})
+)
 
-function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), className)}
-      {...props}
-    />
-  )
+function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
 }
 
 function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -36,23 +29,20 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="alert-title"
       className={cn(
         "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
-        className
+        className,
       )}
       {...props}
     />
   )
 }
 
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-description"
       className={cn(
         "text-muted-foreground text-xs/relaxed text-balance md:text-pretty [&_p:not(:last-child)]:mb-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
-        className
+        className,
       )}
       {...props}
     />
diff --git a/components/ui/aspect-ratio.tsx b/components/ui/aspect-ratio.tsx
index 57e38fa9..495b06cb 100644
--- a/components/ui/aspect-ratio.tsx
+++ b/components/ui/aspect-ratio.tsx
@@ -2,9 +2,7 @@
 
 import { AspectRatio as AspectRatioPrimitive } from "radix-ui"
 
-function AspectRatio({
-  ...props
-}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
   return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
 }
 
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
index 10fa10bb..381c904e 100644
--- a/components/ui/avatar.tsx
+++ b/components/ui/avatar.tsx
@@ -18,39 +18,30 @@ function Avatar({
       data-size={size}
       className={cn(
         "size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
-        className
+        className,
       )}
       {...props}
     />
   )
 }
 
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
   return (
     <AvatarPrimitive.Image
       data-slot="avatar-image"
-      className={cn(
-        "rounded-full aspect-square size-full object-cover",
-        className
-      )}
+      className={cn("rounded-full aspect-square size-full object-cover", className)}
       {...props}
     />
   )
 }
 
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
   return (
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
         "bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
-        className
+        className,
       )}
       {...props}
     />
@@ -66,7 +57,7 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
         "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
-        className
+        className,
       )}
       {...props}
     />
@@ -79,31 +70,24 @@ function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="avatar-group"
       className={cn(
         "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
-        className
+        className,
       )}
       {...props}
     />
   )
 }
 
-function AvatarGroupCount({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="avatar-group-count"
-      className={cn("bg-muted text-muted-foreground size-8 rounded-full text-xs group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2", className)}
+      className={cn(
+        "bg-muted text-muted-foreground size-8 rounded-full text-xs group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2",
+        className,
+      )}
       {...props}
     />
   )
 }
 
-export {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarGroupCount,
-  AvatarBadge,
-}
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge }
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
index 5763e200..fdaa44a5 100644
--- a/components/ui/badge.tsx
+++ b/components/ui/badge.tsx
@@ -11,7 +11,8 @@ const badgeVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
         secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+        destructive:
+          "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
         outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
         ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
         link: "text-primary underline-offset-4 hover:underline",
@@ -20,7 +21,7 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 )
 
 function Badge({
@@ -28,17 +29,11 @@ function Badge({
   variant = "default",
   asChild = false,
   ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
   const Comp = asChild ? Slot.Root : "span"
 
   return (
-    <Comp
-      data-slot="badge"
-      data-variant={variant}
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
+    <Comp data-slot="badge" data-variant={variant} className={cn(badgeVariants({ variant }), className)} {...props} />
   )
 }
 
diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx
index dea683cb..ab4ae12a 100644
--- a/components/ui/breadcrumb.tsx
+++ b/components/ui/breadcrumb.tsx
@@ -5,37 +5,21 @@ import { cn } from "@/lib/utils"
 import { RiArrowRightSLine, RiMoreLine } from "@remixicon/react"
 
 function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
-  return (
-    <nav
-      aria-label="breadcrumb"
-      data-slot="breadcrumb"
-      className={cn(className)}
-      {...props}
-    />
-  )
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} />
 }
 
 function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
   return (
     <ol
       data-slot="breadcrumb-list"
-      className={cn(
-        "text-muted-foreground gap-1.5 text-xs flex flex-wrap items-center break-words",
-        className
-      )}
+      className={cn("text-muted-foreground gap-1.5 text-xs flex flex-wrap items-center break-words", className)}
       {...props}
     />
   )
 }
 
 function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="breadcrumb-item"
-      className={cn("gap-1 inline-flex items-center", className)}
-      {...props}
-    />
-  )
+  return <li data-slot="breadcrumb-item" className={cn("gap-1 inline-flex items-center", className)} {...props} />
 }
 
 function BreadcrumbLink({
@@ -48,11 +32,7 @@ function BreadcrumbLink({
   const Comp = asChild ? Slot.Root : "a"
 
   return (
-    <Comp
-      data-slot="breadcrumb-link"
-      className={cn("hover:text-foreground transition-colors", className)}
-      {...props}
-    />
+    <Comp data-slot="breadcrumb-link" className={cn("hover:text-foreground transition-colors", className)} {...props} />
   )
 }
 
@@ -69,11 +49,7 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
   )
 }
 
-function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
   return (
     <li
       data-slot="breadcrumb-separator"
@@ -82,30 +58,21 @@ function BreadcrumbSeparator({
       className={cn("[&>svg]:size-3.5", className)}
       {...props}
     >
-      {children ?? (
-        <RiArrowRightSLine />
-      )}
+      {children ?? <RiArrowRightSLine />}
     </li>
   )
 }
 
-function BreadcrumbEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="breadcrumb-ellipsis"
       role="presentation"
       aria-hidden="true"
-      className={cn(
-        "size-5 [&>svg]:size-4 flex items-center justify-center",
-        className
-      )}
+      className={cn("size-5 [&>svg]:size-4 flex items-center justify-center", className)}
       {...props}
     >
-      <RiMoreLine
-      />
+      <RiMoreLine />
       <span className="sr-only">More</span>
     </span>
   )
diff --git a/components/ui/button-group.tsx b/components/ui/button-group.tsx
index dd4f3ba8..daad7dc4 100644
--- a/components/ui/button-group.tsx
+++ b/components/ui/button-group.tsx
@@ -18,7 +18,7 @@ const buttonGroupVariants = cva(
     defaultVariants: {
       orientation: "horizontal",
     },
-  }
+  },
 )
 
 function ButtonGroup({
@@ -50,7 +50,7 @@ function ButtonGroupText({
     <Comp
       className={cn(
         "bg-muted gap-2 rounded-none border px-2.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
-        className
+        className,
       )}
       {...props}
     />
@@ -68,16 +68,11 @@ function ButtonGroupSeparator({
       orientation={orientation}
       className={cn(
         "bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto",
-        className
+        className,
       )}
       {...props}
     />
   )
 }
 
-export {
-  ButtonGroup,
-  ButtonGroupSeparator,
-  ButtonGroupText,
-  buttonGroupVariants,
-}
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants }
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index b20180be..feedcdf9 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -10,10 +10,14 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
-        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive:
+          "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
@@ -31,7 +35,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 )
 
 function Button({
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
index d06aaee7..f384720b 100644
--- a/components/ui/calendar.tsx
+++ b/components/ui/calendar.tsx
@@ -1,12 +1,7 @@
 "use client"
 
 import * as React from "react"
-import {
-  DayPicker,
-  getDefaultClassNames,
-  type DayButton,
-  type Locale,
-} from "react-day-picker"
+import { DayPicker, getDefaultClassNames, type DayButton, type Locale } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
 import { Button, buttonVariants } from "@/components/ui/button"
@@ -34,142 +29,100 @@ function Calendar({
         "p-2 [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
+        className,
       )}
       captionLayout={captionLayout}
       locale={locale}
       formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString(locale?.code, { month: "short" }),
+        formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
         ...formatters,
       }}
       classNames={{
         root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
-          defaultClassNames.months
-        ),
+        months: cn("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months),
         month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
-        nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
-          defaultClassNames.nav
-        ),
+        nav: cn("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", defaultClassNames.nav),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_previous
+          defaultClassNames.button_previous,
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_next
+          defaultClassNames.button_next,
         ),
         month_caption: cn(
           "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
-          defaultClassNames.month_caption
+          defaultClassNames.month_caption,
         ),
         dropdowns: cn(
           "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
-          defaultClassNames.dropdowns
-        ),
-        dropdown_root: cn(
-          "relative rounded-(--cell-radius)",
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn(
-          "absolute bg-popover inset-0 opacity-0",
-          defaultClassNames.dropdown
+          defaultClassNames.dropdowns,
         ),
+        dropdown_root: cn("relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
+        dropdown: cn("absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown),
         caption_label: cn(
           "select-none font-medium",
           captionLayout === "label"
             ? "text-sm"
             : "rounded-(--cell-radius) flex items-center gap-1 text-sm [&>svg]:text-muted-foreground [&>svg]:size-3.5",
-          defaultClassNames.caption_label
+          defaultClassNames.caption_label,
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
           "text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none",
-          defaultClassNames.weekday
+          defaultClassNames.weekday,
         ),
         week: cn("flex w-full mt-2", defaultClassNames.week),
-        week_number_header: cn(
-          "select-none w-(--cell-size)",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
-          defaultClassNames.week_number
-        ),
+        week_number_header: cn("select-none w-(--cell-size)", defaultClassNames.week_number_header),
+        week_number: cn("text-[0.8rem] select-none text-muted-foreground", defaultClassNames.week_number),
         day: cn(
           "relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none",
           props.showWeekNumber
             ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
             : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
-          defaultClassNames.day
+          defaultClassNames.day,
         ),
         range_start: cn(
           "rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate",
-          defaultClassNames.range_start
+          defaultClassNames.range_start,
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn(
           "rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate",
-          defaultClassNames.range_end
+          defaultClassNames.range_end,
         ),
         today: cn(
           "bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none",
-          defaultClassNames.today
-        ),
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
+          defaultClassNames.today,
         ),
+        outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+        disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
         hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
         Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          )
+          return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />
         },
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === "left") {
-            return (
-              <RiArrowLeftSLine className={cn("size-4", className)} {...props} />
-            )
+            return <RiArrowLeftSLine className={cn("size-4", className)} {...props} />
           }
 
           if (orientation === "right") {
-            return (
-              <RiArrowRightSLine className={cn("size-4", className)} {...props} />
-            )
+            return <RiArrowRightSLine className={cn("size-4", className)} {...props} />
           }
 
-          return (
-            <RiArrowDownSLine className={cn("size-4", className)} {...props} />
-          )
+          return <RiArrowDownSLine className={cn("size-4", className)} {...props} />
         },
-        DayButton: ({ ...props }) => (
-          <CalendarDayButton locale={locale} {...props} />
-        ),
+        DayButton: ({ ...props }) => <CalendarDayButton locale={locale} {...props} />,
         WeekNumber: ({ children, ...props }) => {
           return (
             <td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">
-                {children}
-              </div>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">{children}</div>
             </td>
           )
         },
@@ -201,10 +154,7 @@ function CalendarDayButton({
       size="icon"
       data-day={day.date.toLocaleDateString(locale?.code)}
       data-selected-single={
-        modifiers.selected &&
-        !modifiers.range_start &&
-        !modifiers.range_end &&
-        !modifiers.range_middle
+        modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
       }
       data-range-start={modifiers.range_start}
       data-range-end={modifiers.range_end}
@@ -212,7 +162,7 @@ function CalendarDayButton({
       className={cn(
         "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
-        className
+        className,
       )}
       {...props}
     />
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index d63cd654..786da35f 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -2,16 +2,15 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-function Card({
-  className,
-  size = "default",
-  ...props
-}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+function Card({ className, size = "default", ...props }: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
   return (
     <div
       data-slot="card"
       data-size={size}
-      className={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-none py-4 text-xs/relaxed ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none group/card flex flex-col", className)}
+      className={cn(
+        "ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-none py-4 text-xs/relaxed ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none group/card flex flex-col",
+        className,
+      )}
       {...props}
     />
   )
@@ -23,7 +22,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card-header"
       className={cn(
         "gap-1 rounded-none px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
-        className
+        className,
       )}
       {...props}
     />
@@ -42,11 +41,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-xs/relaxed", className)}
-      {...props}
-    />
+    <div data-slot="card-description" className={cn("text-muted-foreground text-xs/relaxed", className)} {...props} />
   )
 }
 
@@ -54,23 +49,14 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
       {...props}
     />
   )
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
-      {...props}
-    />
-  )
+  return <div data-slot="card-content" className={cn("px-4 group-data-[size=sm]/card:px-3", className)} {...props} />
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -83,12 +69,4 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }
diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx
index cba09f3c..9faa355a 100644
--- a/components/ui/carousel.tsx
+++ b/components/ui/carousel.tsx
@@ -1,9 +1,7 @@
 "use client"
 
 import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
@@ -56,7 +54,7 @@ function Carousel({
       ...opts,
       axis: orientation === "horizontal" ? "x" : "y",
     },
-    plugins
+    plugins,
   )
   const [canScrollPrev, setCanScrollPrev] = React.useState(false)
   const [canScrollNext, setCanScrollNext] = React.useState(false)
@@ -85,7 +83,7 @@ function Carousel({
         scrollNext()
       }
     },
-    [scrollPrev, scrollNext]
+    [scrollPrev, scrollNext],
   )
 
   React.useEffect(() => {
@@ -110,8 +108,7 @@ function Carousel({
         carouselRef,
         api: api,
         opts,
-        orientation:
-          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
         scrollPrev,
         scrollNext,
         canScrollPrev,
@@ -136,19 +133,8 @@ function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
   const { carouselRef, orientation } = useCarousel()
 
   return (
-    <div
-      ref={carouselRef}
-      className="overflow-hidden"
-      data-slot="carousel-content"
-    >
-      <div
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
-        {...props}
-      />
+    <div ref={carouselRef} className="overflow-hidden" data-slot="carousel-content">
+      <div className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)} {...props} />
     </div>
   )
 }
@@ -161,11 +147,7 @@ function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
       role="group"
       aria-roledescription="slide"
       data-slot="carousel-item"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
+      className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
       {...props}
     />
   )
@@ -189,7 +171,7 @@ function CarouselPrevious({
         orientation === "horizontal"
           ? "top-1/2 -left-12 -translate-y-1/2"
           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
+        className,
       )}
       disabled={!canScrollPrev}
       onClick={scrollPrev}
@@ -219,7 +201,7 @@ function CarouselNext({
         orientation === "horizontal"
           ? "top-1/2 -right-12 -translate-y-1/2"
           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
+        className,
       )}
       disabled={!canScrollNext}
       onClick={scrollNext}
@@ -231,12 +213,4 @@ function CarouselNext({
   )
 }
 
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-  useCarousel,
-}
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel }
diff --git a/components/ui/chart.tsx b/components/ui/chart.tsx
index cb375874..51de3bef 100644
--- a/components/ui/chart.tsx
+++ b/components/ui/chart.tsx
@@ -12,10 +12,7 @@ export type ChartConfig = {
   [k in string]: {
     label?: React.ReactNode
     icon?: React.ComponentType
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
+  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> })
 }
 
 type ChartContextProps = {
@@ -42,9 +39,7 @@ function ChartContainer({
   ...props
 }: React.ComponentProps<"div"> & {
   config: ChartConfig
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]
+  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"]
 }) {
   const uniqueId = React.useId()
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
@@ -56,23 +51,19 @@ function ChartContainer({
         data-chart={chartId}
         className={cn(
           "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className
+          className,
         )}
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
+        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
   )
 }
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme || config.color
-  )
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color)
 
   if (!colorConfig.length) {
     return null
@@ -87,14 +78,12 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
 ${prefix} [data-chart=${id}] {
 ${colorConfig
   .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
+    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color
     return color ? `  --color-${key}: ${color};` : null
   })
   .join("\n")}
 }
-`
+`,
           )
           .join("\n"),
       }}
@@ -137,16 +126,10 @@ function ChartTooltipContent({
     const key = `${labelKey || item?.dataKey || item?.name || "value"}`
     const itemConfig = getPayloadConfigFromPayload(config, item, key)
     const value =
-      !labelKey && typeof label === "string"
-        ? config[label as keyof typeof config]?.label || label
-        : itemConfig?.label
+      !labelKey && typeof label === "string" ? config[label as keyof typeof config]?.label || label : itemConfig?.label
 
     if (labelFormatter) {
-      return (
-        <div className={cn("font-medium", labelClassName)}>
-          {labelFormatter(value, payload)}
-        </div>
-      )
+      return <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>
     }
 
     if (!value) {
@@ -154,15 +137,7 @@ function ChartTooltipContent({
     }
 
     return <div className={cn("font-medium", labelClassName)}>{value}</div>
-  }, [
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ])
+  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])
 
   if (!active || !payload?.length) {
     return null
@@ -174,7 +149,7 @@ function ChartTooltipContent({
     <div
       className={cn(
         "border-border/50 bg-background gap-1.5 rounded-none border px-2.5 py-1.5 text-xs shadow-xl grid min-w-[8rem] items-start",
-        className
+        className,
       )}
     >
       {!nestLabel ? tooltipLabel : null}
@@ -191,7 +166,7 @@ function ChartTooltipContent({
                 key={item.dataKey}
                 className={cn(
                   "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
-                  indicator === "dot" && "items-center"
+                  indicator === "dot" && "items-center",
                 )}
               >
                 {formatter && item?.value !== undefined && item.name ? (
@@ -203,16 +178,12 @@ function ChartTooltipContent({
                     ) : (
                       !hideIndicator && (
                         <div
-                          className={cn(
-                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                            {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            }
-                          )}
+                          className={cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+                            "h-2.5 w-2.5": indicator === "dot",
+                            "w-1": indicator === "line",
+                            "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                            "my-0.5": nestLabel && indicator === "dashed",
+                          })}
                           style={
                             {
                               "--color-bg": indicatorColor,
@@ -225,14 +196,12 @@ function ChartTooltipContent({
                     <div
                       className={cn(
                         "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
+                        nestLabel ? "items-end" : "items-center",
                       )}
                     >
                       <div className="grid gap-1.5">
                         {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label || item.name}
-                        </span>
+                        <span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
                       </div>
                       {item.value && (
                         <span className="text-foreground font-mono font-medium tabular-nums">
@@ -270,13 +239,7 @@ function ChartLegendContent({
   }
 
   return (
-    <div
-      className={cn(
-        "flex items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className
-      )}
-    >
+    <div className={cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className)}>
       {payload
         .filter((item) => item.type !== "none")
         .map((item) => {
@@ -286,9 +249,7 @@ function ChartLegendContent({
           return (
             <div
               key={item.value}
-              className={cn(
-                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
-              )}
+              className={cn("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3")}
             >
               {itemConfig?.icon && !hideIcon ? (
                 <itemConfig.icon />
@@ -308,49 +269,29 @@ function ChartLegendContent({
   )
 }
 
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
   if (typeof payload !== "object" || payload === null) {
     return undefined
   }
 
   const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
+    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
       ? payload.payload
       : undefined
 
   let configLabelKey: string = key
 
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
+  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
     configLabelKey = payload[key as keyof typeof payload] as string
   } else if (
     payloadPayload &&
     key in payloadPayload &&
     typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
   ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string
   }
 
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config]
+  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config]
 }
 
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-}
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle }
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
index 0de7fc49..f6993e84 100644
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -6,16 +6,13 @@ import { Checkbox as CheckboxPrimitive } from "radix-ui"
 import { cn } from "@/lib/utils"
 import { RiCheckLine } from "@remixicon/react"
 
-function Checkbox({
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
         "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-none border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-1 aria-invalid:ring-1 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     >
@@ -23,8 +20,7 @@ function Checkbox({
         data-slot="checkbox-indicator"
         className="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
       >
-        <RiCheckLine
-        />
+        <RiCheckLine />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )
diff --git a/components/ui/collapsible.tsx b/components/ui/collapsible.tsx
index 2f7a4e7f..78558c98 100644
--- a/components/ui/collapsible.tsx
+++ b/components/ui/collapsible.tsx
@@ -2,32 +2,16 @@
 
 import { Collapsible as CollapsiblePrimitive } from "radix-ui"
 
-function Collapsible({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
   return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
 }
 
-function CollapsibleTrigger({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot="collapsible-trigger"
-      {...props}
-    />
-  )
+function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />
 }
 
-function CollapsibleContent({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleContent
-      data-slot="collapsible-content"
-      {...props}
-    />
-  )
+function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />
 }
 
 export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/components/ui/combobox.tsx b/components/ui/combobox.tsx
index f4bcc65f..67e7d8c8 100644
--- a/components/ui/combobox.tsx
+++ b/components/ui/combobox.tsx
@@ -5,12 +5,7 @@ import { Combobox as ComboboxPrimitive } from "@base-ui/react"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@/components/ui/input-group"
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group"
 import { RiArrowDownSLine, RiCloseLine, RiCheckLine } from "@remixicon/react"
 
 const Combobox = ComboboxPrimitive.Root
@@ -19,11 +14,7 @@ function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
   return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
 }
 
-function ComboboxTrigger({
-  className,
-  children,
-  ...props
-}: ComboboxPrimitive.Trigger.Props) {
+function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props) {
   return (
     <ComboboxPrimitive.Trigger
       data-slot="combobox-trigger"
@@ -62,10 +53,7 @@ function ComboboxInput({
 }) {
   return (
     <InputGroup className={cn("w-auto", className)}>
-      <ComboboxPrimitive.Input
-        render={<InputGroupInput disabled={disabled} />}
-        {...props}
-      />
+      <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
       <InputGroupAddon align="inline-end">
         {showTrigger && (
           <InputGroupButton
@@ -95,10 +83,7 @@ function ComboboxContent({
   anchor,
   ...props
 }: ComboboxPrimitive.Popup.Props &
-  Pick<
-    ComboboxPrimitive.Positioner.Props,
-    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
-  >) {
+  Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">) {
   return (
     <ComboboxPrimitive.Portal>
       <ComboboxPrimitive.Positioner
@@ -112,7 +97,10 @@ function ComboboxContent({
         <ComboboxPrimitive.Popup
           data-slot="combobox-content"
           data-chips={!!anchor}
-          className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-none shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)", className )}
+          className={cn(
+            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-none shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)",
+            className,
+          )}
           {...props}
         />
       </ComboboxPrimitive.Positioner>
@@ -126,24 +114,20 @@ function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
       data-slot="combobox-list"
       className={cn(
         "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto data-empty:p-0 overflow-y-auto overscroll-contain",
-        className
+        className,
       )}
       {...props}
     />
   )
 }
 
-function ComboboxItem({
-  className,
-  children,
-  ...props
-}: ComboboxPrimitive.Item.Props) {
+function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) {
   return (
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
         "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
@@ -158,19 +142,10 @@ function ComboboxItem({
 }
 
 function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
-  return (
-    <ComboboxPrimitive.Group
-      data-slot="combobox-group"
-      className={cn(className)}
-      {...props}
-    />
-  )
+  return <ComboboxPrimitive.Group data-slot="combobox-group" className={cn(className)} {...props} />
 }
 
-function ComboboxLabel({
-  className,
-  ...props
-}: ComboboxPrimitive.GroupLabel.Props) {
+function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) {
   return (
     <ComboboxPrimitive.GroupLabel
       data-slot="combobox-label"
@@ -181,25 +156,23 @@ function ComboboxLabel({
 }
 
 function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
-  return (
-    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
-  )
+  return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
 }
 
 function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
   return (
     <ComboboxPrimitive.Empty
       data-slot="combobox-empty"
-      className={cn("text-muted-foreground hidden w-full justify-center py-2 text-center text-xs group-data-empty/combobox-content:flex", className)}
+      className={cn(
+        "text-muted-foreground hidden w-full justify-center py-2 text-center text-xs group-data-empty/combobox-content:flex",
+        className,
+      )}
       {...props}
     />
   )
 }
 
-function ComboboxSeparator({
-  className,
-  ...props
-}: ComboboxPrimitive.Separator.Props) {
+function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props) {
   return (
     <ComboboxPrimitive.Separator
       data-slot="combobox-separator"
@@ -212,12 +185,14 @@ function ComboboxSeparator({
 function ComboboxChips({
   className,
   ...props
-}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
-  ComboboxPrimitive.Chips.Props) {
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props) {
   return (
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
-      className={cn("dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-none border bg-transparent bg-clip-padding px-2.5 py-1 text-xs transition-colors focus-within:ring-1 has-aria-invalid:ring-1 has-data-[slot=combobox-chip]:px-1", className)}
+      className={cn(
+        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-none border bg-transparent bg-clip-padding px-2.5 py-1 text-xs transition-colors focus-within:ring-1 has-aria-invalid:ring-1 has-data-[slot=combobox-chip]:px-1",
+        className,
+      )}
       {...props}
     />
   )
@@ -236,7 +211,7 @@ function ComboboxChip({
       data-slot="combobox-chip"
       className={cn(
         "bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-none px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     >
@@ -254,17 +229,11 @@ function ComboboxChip({
   )
 }
 
-function ComboboxChipsInput({
-  className,
-  ...props
-}: ComboboxPrimitive.Input.Props) {
+function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props) {
   return (
     <ComboboxPrimitive.Input
       data-slot="combobox-chip-input"
-      className={cn(
-        "min-w-16 flex-1 outline-none",
-        className
-      )}
+      className={cn("min-w-16 flex-1 outline-none", className)}
       {...props}
     />
   )
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
index 004c8c2d..afe1be9e 100644
--- a/components/ui/command.tsx
+++ b/components/ui/command.tsx
@@ -4,29 +4,17 @@ import * as React from "react"
 import { Command as CommandPrimitive } from "cmdk"
 
 import { cn } from "@/lib/utils"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-import {
-  InputGroup,
-  InputGroupAddon,
-} from "@/components/ui/input-group"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { InputGroup, InputGroupAddon } from "@/components/ui/input-group"
 import { RiSearchLine, RiCheckLine } from "@remixicon/react"
 
-function Command({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
   return (
     <CommandPrimitive
       data-slot="command"
       className={cn(
         "bg-popover text-popover-foreground rounded-none flex size-full flex-col overflow-hidden",
-        className
+        className,
       )}
       {...props}
     />
@@ -53,10 +41,7 @@ function CommandDialog({
         <DialogDescription>{description}</DialogDescription>
       </DialogHeader>
       <DialogContent
-        className={cn(
-          "rounded-none top-1/3 translate-y-0 overflow-hidden p-0",
-          className
-        )}
+        className={cn("rounded-none top-1/3 translate-y-0 overflow-hidden p-0", className)}
         showCloseButton={showCloseButton}
       >
         {children}
@@ -65,19 +50,13 @@ function CommandDialog({
   )
 }
 
-function CommandInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
     <div data-slot="command-input-wrapper" className="border-b pb-0">
       <InputGroup className="bg-input/30 border-input/30 h-8 border-none shadow-none! *:data-[slot=input-group-addon]:pl-2!">
         <CommandPrimitive.Input
           data-slot="command-input"
-          className={cn(
-            "w-full text-xs outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-            className
-          )}
+          className={cn("w-full text-xs outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className)}
           {...props}
         />
         <InputGroupAddon>
@@ -88,26 +67,17 @@ function CommandInput({
   )
 }
 
-function CommandList({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
   return (
     <CommandPrimitive.List
       data-slot="command-list"
-      className={cn(
-        "no-scrollbar max-h-72 scroll-py-0 outline-none overflow-x-hidden overflow-y-auto",
-        className
-      )}
+      className={cn("no-scrollbar max-h-72 scroll-py-0 outline-none overflow-x-hidden overflow-y-auto", className)}
       {...props}
     />
   )
 }
 
-function CommandEmpty({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+function CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
   return (
     <CommandPrimitive.Empty
       data-slot="command-empty"
@@ -117,23 +87,20 @@ function CommandEmpty({
   )
 }
 
-function CommandGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
   return (
     <CommandPrimitive.Group
       data-slot="command-group"
-      className={cn("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs", className)}
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs",
+        className,
+      )}
       {...props}
     />
   )
 }
 
-function CommandSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
@@ -143,17 +110,13 @@ function CommandSeparator({
   )
 }
 
-function CommandItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+function CommandItem({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
   return (
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
         "data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-none! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
@@ -163,14 +126,14 @@ function CommandItem({
   )
 }
 
-function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="command-shortcut"
-      className={cn("text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest", className)}
+      className={cn(
+        "text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
       {...props}
     />
   )
diff --git a/components/ui/context-menu.tsx b/components/ui/context-menu.tsx
index 5c91b5f7..754f55f1 100644
--- a/components/ui/context-menu.tsx
+++ b/components/ui/context-menu.tsx
@@ -6,16 +6,11 @@ import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
 import { cn } from "@/lib/utils"
 import { RiArrowRightSLine, RiCheckLine } from "@remixicon/react"
 
-function ContextMenu({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
   return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
 }
 
-function ContextMenuTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+function ContextMenuTrigger({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
   return (
     <ContextMenuPrimitive.Trigger
       data-slot="context-menu-trigger"
@@ -25,37 +20,20 @@ function ContextMenuTrigger({
   )
 }
 
-function ContextMenuGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
-  return (
-    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
-  )
+function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
 }
 
-function ContextMenuPortal({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
-  return (
-    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
-  )
+function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
 }
 
-function ContextMenuSub({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
   return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
 }
 
-function ContextMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
-  return (
-    <ContextMenuPrimitive.RadioGroup
-      data-slot="context-menu-radio-group"
-      {...props}
-    />
-  )
+function ContextMenuRadioGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />
 }
 
 function ContextMenuContent({
@@ -68,7 +46,10 @@ function ContextMenuContent({
     <ContextMenuPrimitive.Portal>
       <ContextMenuPrimitive.Content
         data-slot="context-menu-content"
-        className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-none shadow-md ring-1 duration-100 z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto", className )}
+        className={cn(
+          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-none shadow-md ring-1 duration-100 z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
+          className,
+        )}
         {...props}
       />
     </ContextMenuPrimitive.Portal>
@@ -91,7 +72,7 @@ function ContextMenuItem({
       data-variant={variant}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     />
@@ -112,7 +93,7 @@ function ContextMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
@@ -122,14 +103,14 @@ function ContextMenuSubTrigger({
   )
 }
 
-function ContextMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
   return (
     <ContextMenuPrimitive.SubContent
       data-slot="context-menu-sub-content"
-      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-none border shadow-lg duration-100 z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden", className )}
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-none border shadow-lg duration-100 z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden",
+        className,
+      )}
       {...props}
     />
   )
@@ -146,15 +127,14 @@ function ContextMenuCheckboxItem({
       data-slot="context-menu-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       checked={checked}
       {...props}
     >
       <span className="absolute right-2 pointer-events-none">
         <ContextMenuPrimitive.ItemIndicator>
-          <RiCheckLine
-          />
+          <RiCheckLine />
         </ContextMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -172,14 +152,13 @@ function ContextMenuRadioItem({
       data-slot="context-menu-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
       <span className="absolute right-2 pointer-events-none">
         <ContextMenuPrimitive.ItemIndicator>
-          <RiCheckLine
-          />
+          <RiCheckLine />
         </ContextMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -204,10 +183,7 @@ function ContextMenuLabel({
   )
 }
 
-function ContextMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
   return (
     <ContextMenuPrimitive.Separator
       data-slot="context-menu-separator"
@@ -217,14 +193,14 @@ function ContextMenuSeparator({
   )
 }
 
-function ContextMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="context-menu-shortcut"
-      className={cn("text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
+      className={cn(
+        "text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
       {...props}
     />
   )
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index f692773a..467154dc 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -7,38 +7,30 @@ import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { RiCloseLine } from "@remixicon/react"
 
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />
 }
 
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 }
 
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
   return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 }
 
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 }
 
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
   return (
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
-      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className)}
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50",
+        className,
+      )}
       {...props}
     />
   )
@@ -59,7 +51,7 @@ function DialogContent({
         data-slot="dialog-content"
         className={cn(
           "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
-          className
+          className,
         )}
         {...props}
       >
@@ -67,8 +59,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close data-slot="dialog-close" asChild>
             <Button variant="ghost" className="absolute top-2 right-2" size="icon-sm">
-              <RiCloseLine
-              />
+              <RiCloseLine />
               <span className="sr-only">Close</span>
             </Button>
           </DialogPrimitive.Close>
@@ -79,13 +70,7 @@ function DialogContent({
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("gap-1 text-left flex flex-col", className)}
-      {...props}
-    />
-  )
+  return <div data-slot="dialog-header" className={cn("gap-1 text-left flex flex-col", className)} {...props} />
 }
 
 function DialogFooter({
@@ -99,10 +84,7 @@ function DialogFooter({
   return (
     <div
       data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
       {...props}
     >
       {children}
@@ -115,27 +97,18 @@ function DialogFooter({
   )
 }
 
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-sm font-medium", className)}
-      {...props}
-    />
-  )
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return <DialogPrimitive.Title data-slot="dialog-title" className={cn("text-sm font-medium", className)} {...props} />
 }
 
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn("text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3", className)}
+      className={cn(
+        "text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3",
+        className,
+      )}
       {...props}
     />
   )
diff --git a/components/ui/direction.tsx b/components/ui/direction.tsx
index 22e16577..74b138d8 100644
--- a/components/ui/direction.tsx
+++ b/components/ui/direction.tsx
@@ -10,11 +10,7 @@ function DirectionProvider({
 }: React.ComponentProps<typeof Direction.DirectionProvider> & {
   direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"]
 }) {
-  return (
-    <Direction.DirectionProvider dir={direction ?? dir}>
-      {children}
-    </Direction.DirectionProvider>
-  )
+  return <Direction.DirectionProvider dir={direction ?? dir}>{children}</Direction.DirectionProvider>
 }
 
 const useDirection = Direction.useDirection
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
index 34e2b771..a58080e8 100644
--- a/components/ui/drawer.tsx
+++ b/components/ui/drawer.tsx
@@ -5,48 +5,36 @@ import { Drawer as DrawerPrimitive } from "vaul"
 
 import { cn } from "@/lib/utils"
 
-function Drawer({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
   return <DrawerPrimitive.Root data-slot="drawer" {...props} />
 }
 
-function DrawerTrigger({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
   return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
 }
 
-function DrawerPortal({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
   return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
 }
 
-function DrawerClose({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
   return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
 }
 
-function DrawerOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
   return (
     <DrawerPrimitive.Overlay
       data-slot="drawer-overlay"
-      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50",
+        className,
+      )}
       {...props}
     />
   )
 }
 
-function DrawerContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>) {
   return (
     <DrawerPortal data-slot="drawer-portal">
       <DrawerOverlay />
@@ -54,7 +42,7 @@ function DrawerContent({
         data-slot="drawer-content"
         className={cn(
           "bg-background flex h-auto flex-col text-xs/relaxed data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50",
-          className
+          className,
         )}
         {...props}
       >
@@ -69,26 +57,20 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="drawer-header"
-      className={cn("gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left flex flex-col", className)}
+      className={cn(
+        "gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left flex flex-col",
+        className,
+      )}
       {...props}
     />
   )
 }
 
 function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-footer"
-      className={cn("gap-2 p-4 mt-auto flex flex-col", className)}
-      {...props}
-    />
-  )
+  return <div data-slot="drawer-footer" className={cn("gap-2 p-4 mt-auto flex flex-col", className)} {...props} />
 }
 
-function DrawerTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
@@ -98,10 +80,7 @@ function DrawerTitle({
   )
 }
 
-function DrawerDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>) {
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
index 19a88716..67a960b2 100644
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -6,29 +6,16 @@ import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
 import { cn } from "@/lib/utils"
 import { RiCheckLine, RiArrowRightSLine } from "@remixicon/react"
 
-function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
   return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
 }
 
-function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
+function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
 }
 
-function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
+function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
 }
 
 function DropdownMenuContent({
@@ -43,19 +30,18 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         align={align}
-        className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-none shadow-md ring-1 duration-100 z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden", className )}
+        className={cn(
+          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-none shadow-md ring-1 duration-100 z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden",
+          className,
+        )}
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
   )
 }
 
-function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
 }
 
 function DropdownMenuItem({
@@ -74,7 +60,7 @@ function DropdownMenuItem({
       data-variant={variant}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     />
@@ -92,7 +78,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       checked={checked}
       {...props}
@@ -102,8 +88,7 @@ function DropdownMenuCheckboxItem({
         data-slot="dropdown-menu-checkbox-item-indicator"
       >
         <DropdownMenuPrimitive.ItemIndicator>
-          <RiCheckLine
-          />
+          <RiCheckLine />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -111,15 +96,8 @@ function DropdownMenuCheckboxItem({
   )
 }
 
-function DropdownMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
+function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
 }
 
 function DropdownMenuRadioItem({
@@ -132,7 +110,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
@@ -141,8 +119,7 @@ function DropdownMenuRadioItem({
         data-slot="dropdown-menu-radio-item-indicator"
       >
         <DropdownMenuPrimitive.ItemIndicator>
-          <RiCheckLine
-          />
+          <RiCheckLine />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -167,10 +144,7 @@ function DropdownMenuLabel({
   )
 }
 
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
@@ -180,22 +154,20 @@ function DropdownMenuSeparator({
   )
 }
 
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
+      className={cn(
+        "text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
       {...props}
     />
   )
 }
 
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
   return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
 }
 
@@ -213,7 +185,7 @@ function DropdownMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
@@ -230,7 +202,10 @@ function DropdownMenuSubContent({
   return (
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
-      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-none shadow-lg ring-1 duration-100 z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden", className )}
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-none shadow-lg ring-1 duration-100 z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden",
+        className,
+      )}
       {...props}
     />
   )
diff --git a/components/ui/empty.tsx b/components/ui/empty.tsx
index 56b96612..c49495bf 100644
--- a/components/ui/empty.tsx
+++ b/components/ui/empty.tsx
@@ -8,7 +8,7 @@ function Empty({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="empty"
       className={cn(
         "gap-4 rounded-none border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance",
-        className
+        className,
       )}
       {...props}
     />
@@ -17,14 +17,7 @@ function Empty({ className, ...props }: React.ComponentProps<"div">) {
 
 function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="empty-header"
-      className={cn(
-        "gap-2 flex max-w-sm flex-col items-center",
-        className
-      )}
-      {...props}
-    />
+    <div data-slot="empty-header" className={cn("gap-2 flex max-w-sm flex-col items-center", className)} {...props} />
   )
 }
 
@@ -40,7 +33,7 @@ const emptyMediaVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 )
 
 function EmptyMedia({
@@ -59,13 +52,7 @@ function EmptyMedia({
 }
 
 function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="empty-title"
-      className={cn("text-sm font-medium", className)}
-      {...props}
-    />
-  )
+  return <div data-slot="empty-title" className={cn("text-sm font-medium", className)} {...props} />
 }
 
 function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
@@ -74,7 +61,7 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
       data-slot="empty-description"
       className={cn(
         "text-xs/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
+        className,
       )}
       {...props}
     />
@@ -85,20 +72,10 @@ function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="empty-content"
-      className={cn(
-        "gap-2.5 text-xs flex w-full max-w-sm min-w-0 flex-col items-center text-balance",
-        className
-      )}
+      className={cn("gap-2.5 text-xs flex w-full max-w-sm min-w-0 flex-col items-center text-balance", className)}
       {...props}
     />
   )
 }
 
-export {
-  Empty,
-  EmptyHeader,
-  EmptyTitle,
-  EmptyDescription,
-  EmptyContent,
-  EmptyMedia,
-}
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia }
diff --git a/components/ui/field.tsx b/components/ui/field.tsx
index b81cab92..e334a2ca 100644
--- a/components/ui/field.tsx
+++ b/components/ui/field.tsx
@@ -11,7 +11,10 @@ function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
   return (
     <fieldset
       data-slot="field-set"
-      className={cn("gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col", className)}
+      className={cn(
+        "gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col",
+        className,
+      )}
       {...props}
     />
   )
@@ -38,7 +41,7 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="field-group"
       className={cn(
         "gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col",
-        className
+        className,
       )}
       {...props}
     />
@@ -48,8 +51,7 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
 const fieldVariants = cva("data-[invalid=true]:text-destructive gap-2 group/field flex w-full", {
   variants: {
     orientation: {
-      vertical:
-        "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+      vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
       horizontal:
         "flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
       responsive:
@@ -81,26 +83,20 @@ function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="field-content"
-      className={cn(
-        "gap-0.5 group/field-content flex flex-1 flex-col leading-snug",
-        className
-      )}
+      className={cn("gap-0.5 group/field-content flex flex-1 flex-col leading-snug", className)}
       {...props}
     />
   )
 }
 
-function FieldLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof Label>) {
+function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
   return (
     <Label
       data-slot="field-label"
       className={cn(
         "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
-        className
+        className,
       )}
       {...props}
     />
@@ -113,7 +109,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="field-label"
       className={cn(
         "gap-2 text-xs/relaxed group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug",
-        className
+        className,
       )}
       {...props}
     />
@@ -128,7 +124,7 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
         "text-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
         "last:mt-0 nth-last-2:-mt-1",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
+        className,
       )}
       {...props}
     />
@@ -179,9 +175,7 @@ function FieldError({
       return null
     }
 
-    const uniqueErrors = [
-      ...new Map(errors.map((error) => [error?.message, error])).values(),
-    ]
+    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()]
 
     if (uniqueErrors?.length == 1) {
       return uniqueErrors[0]?.message
@@ -189,10 +183,7 @@ function FieldError({
 
     return (
       <ul className="ml-4 flex list-disc flex-col gap-1">
-        {uniqueErrors.map(
-          (error, index) =>
-            error?.message && <li key={index}>{error.message}</li>
-        )}
+        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
       </ul>
     )
   }, [children, errors])
diff --git a/components/ui/flip-words.tsx b/components/ui/flip-words.tsx
index b479cb15..c32e94e8 100644
--- a/components/ui/flip-words.tsx
+++ b/components/ui/flip-words.tsx
@@ -41,12 +41,7 @@ export function FlipWords({ words, duration = 3000, className }: FlipWordsProps)
   }
 
   return (
-    <span
-      className={cn(
-        "relative z-10 inline-block text-left text-neutral-900 dark:text-neutral-100",
-        className
-      )}
-    >
+    <span className={cn("relative z-10 inline-block text-left text-neutral-900 dark:text-neutral-100", className)}>
       {splitWords.map((wordObj, wordIndex) => (
         <span
           key={`${wordObj.word}-${wordIndex}`}
diff --git a/components/ui/hover-card.tsx b/components/ui/hover-card.tsx
index 056b8332..4daee454 100644
--- a/components/ui/hover-card.tsx
+++ b/components/ui/hover-card.tsx
@@ -5,18 +5,12 @@ import { HoverCard as HoverCardPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
 
-function HoverCard({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
   return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
 }
 
-function HoverCardTrigger({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return (
-    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
-  )
+function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
 }
 
 function HoverCardContent({
@@ -33,7 +27,7 @@ function HoverCardContent({
         sideOffset={sideOffset}
         className={cn(
           "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-none p-2.5 text-xs/relaxed shadow-md ring-1 duration-100 z-50 origin-(--radix-hover-card-content-transform-origin) outline-hidden",
-          className
+          className,
         )}
         {...props}
       />
diff --git a/components/ui/input-group.tsx b/components/ui/input-group.tsx
index 77dd07e1..02bbb804 100644
--- a/components/ui/input-group.tsx
+++ b/components/ui/input-group.tsx
@@ -15,7 +15,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       role="group"
       className={cn(
         "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-none border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-1 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
-        className
+        className,
       )}
       {...props}
     />
@@ -31,14 +31,13 @@ const inputGroupAddonVariants = cva(
         "inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
         "block-start":
           "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
-        "block-end":
-          "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
+        "block-end": "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
       },
     },
     defaultVariants: {
       align: "inline-start",
     },
-  }
+  },
 )
 
 function InputGroupAddon({
@@ -63,22 +62,19 @@ function InputGroupAddon({
   )
 }
 
-const inputGroupButtonVariants = cva(
-  "gap-2 text-xs shadow-none flex items-center",
-  {
-    variants: {
-      size: {
-        xs: "h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-        sm: "",
-        "icon-xs": "size-6 rounded-none p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
-      },
-    },
-    defaultVariants: {
-      size: "xs",
+const inputGroupButtonVariants = cva("gap-2 text-xs shadow-none flex items-center", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: "",
+      "icon-xs": "size-6 rounded-none p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0",
     },
-  }
-)
+  },
+  defaultVariants: {
+    size: "xs",
+  },
+})
 
 function InputGroupButton({
   className,
@@ -86,8 +82,7 @@ function InputGroupButton({
   variant = "ghost",
   size = "xs",
   ...props
-}: Omit<React.ComponentProps<typeof Button>, "size"> &
-  VariantProps<typeof inputGroupButtonVariants>) {
+}: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>) {
   return (
     <Button
       type={type}
@@ -104,44 +99,37 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
     <span
       className={cn(
         "text-muted-foreground gap-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
-        className
+        className,
       )}
       {...props}
     />
   )
 }
 
-function InputGroupInput({
-  className,
-  ...props
-}: React.ComponentProps<"input">) {
+function InputGroupInput({ className, ...props }: React.ComponentProps<"input">) {
   return (
     <Input
       data-slot="input-group-control"
-      className={cn("rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1", className)}
+      className={cn(
+        "rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1",
+        className,
+      )}
       {...props}
     />
   )
 }
 
-function InputGroupTextarea({
-  className,
-  ...props
-}: React.ComponentProps<"textarea">) {
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
     <Textarea
       data-slot="input-group-control"
-      className={cn("rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none", className)}
+      className={cn(
+        "rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none",
+        className,
+      )}
       {...props}
     />
   )
 }
 
-export {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupText,
-  InputGroupInput,
-  InputGroupTextarea,
-}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea }
diff --git a/components/ui/input-otp.tsx b/components/ui/input-otp.tsx
index d961b692..653f3e92 100644
--- a/components/ui/input-otp.tsx
+++ b/components/ui/input-otp.tsx
@@ -16,15 +16,9 @@ function InputOTP({
   return (
     <OTPInput
       data-slot="input-otp"
-      containerClassName={cn(
-        "cn-input-otp flex items-center has-disabled:opacity-50",
-        containerClassName
-      )}
+      containerClassName={cn("cn-input-otp flex items-center has-disabled:opacity-50", containerClassName)}
       spellCheck={false}
-      className={cn(
-        "disabled:cursor-not-allowed",
-        className
-      )}
+      className={cn("disabled:cursor-not-allowed", className)}
       {...props}
     />
   )
@@ -34,7 +28,10 @@ function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="input-otp-group"
-      className={cn("has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-none has-aria-invalid:ring-1 flex items-center", className)}
+      className={cn(
+        "has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-none has-aria-invalid:ring-1 flex items-center",
+        className,
+      )}
       {...props}
     />
   )
@@ -56,7 +53,7 @@ function InputOTPSlot({
       data-active={isActive}
       className={cn(
         "dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-xs transition-all outline-none first:rounded-none first:border-l last:rounded-none data-[active=true]:ring-1 relative flex items-center justify-center data-[active=true]:z-10",
-        className
+        className,
       )}
       {...props}
     >
@@ -78,8 +75,7 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
       role="separator"
       {...props}
     >
-      <RiSubtractLine
-      />
+      <RiSubtractLine />
     </div>
   )
 }
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index 5c7f2171..df0cd443 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -9,7 +9,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       data-slot="input"
       className={cn(
         "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-none border bg-transparent px-2.5 py-1 text-xs transition-colors file:h-6 file:text-xs file:font-medium focus-visible:ring-1 aria-invalid:ring-1 md:text-xs file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />
diff --git a/components/ui/item.tsx b/components/ui/item.tsx
index 1c24a56a..4c4f5e92 100644
--- a/components/ui/item.tsx
+++ b/components/ui/item.tsx
@@ -12,25 +12,15 @@ function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="item-group"
       className={cn(
         "gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col",
-        className
+        className,
       )}
       {...props}
     />
   )
 }
 
-function ItemSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="item-separator"
-      orientation="horizontal"
-      className={cn("my-2", className)}
-      {...props}
-    />
-  )
+function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+  return <Separator data-slot="item-separator" orientation="horizontal" className={cn("my-2", className)} {...props} />
 }
 
 const itemVariants = cva(
@@ -52,7 +42,7 @@ const itemVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 )
 
 function Item({
@@ -61,8 +51,7 @@ function Item({
   size = "default",
   asChild = false,
   ...props
-}: React.ComponentProps<"div"> &
-  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+}: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {
   const Comp = asChild ? Slot.Root : "div"
   return (
     <Comp
@@ -82,13 +71,14 @@ const itemMediaVariants = cva(
       variant: {
         default: "bg-transparent",
         icon: "[&_svg:not([class*='size-'])]:size-4",
-        image: "size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+        image:
+          "size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
       },
     },
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 )
 
 function ItemMedia({
@@ -112,7 +102,7 @@ function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="item-content"
       className={cn(
         "gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none",
-        className
+        className,
       )}
       {...props}
     />
@@ -123,10 +113,7 @@ function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="item-title"
-      className={cn(
-        "gap-2 text-xs font-medium underline-offset-4 line-clamp-1 flex w-fit items-center",
-        className
-      )}
+      className={cn("gap-2 text-xs font-medium underline-offset-4 line-clamp-1 flex w-fit items-center", className)}
       {...props}
     />
   )
@@ -138,7 +125,7 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
       data-slot="item-description"
       className={cn(
         "text-muted-foreground text-left text-xs/relaxed group-data-[size=xs]/item:text-xs/relaxed [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4",
-        className
+        className,
       )}
       {...props}
     />
@@ -146,23 +133,14 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
 }
 
 function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-actions"
-      className={cn("gap-2 flex items-center", className)}
-      {...props}
-    />
-  )
+  return <div data-slot="item-actions" className={cn("gap-2 flex items-center", className)} {...props} />
 }
 
 function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="item-header"
-      className={cn(
-        "gap-2 flex basis-full items-center justify-between",
-        className
-      )}
+      className={cn("gap-2 flex basis-full items-center justify-between", className)}
       {...props}
     />
   )
@@ -172,10 +150,7 @@ function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="item-footer"
-      className={cn(
-        "gap-2 flex basis-full items-center justify-between",
-        className
-      )}
+      className={cn("gap-2 flex basis-full items-center justify-between", className)}
       {...props}
     />
   )
diff --git a/components/ui/kbd.tsx b/components/ui/kbd.tsx
index 30efbc97..537aca16 100644
--- a/components/ui/kbd.tsx
+++ b/components/ui/kbd.tsx
@@ -6,7 +6,7 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
       data-slot="kbd"
       className={cn(
         "bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-none px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none",
-        className
+        className,
       )}
       {...props}
     />
@@ -14,13 +14,7 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
 }
 
 function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <kbd
-      data-slot="kbd-group"
-      className={cn("gap-1 inline-flex items-center", className)}
-      {...props}
-    />
-  )
+  return <kbd data-slot="kbd-group" className={cn("gap-1 inline-flex items-center", className)} {...props} />
 }
 
 export { Kbd, KbdGroup }
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
index 35ee2560..9a1025cf 100644
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -5,16 +5,13 @@ import { Label as LabelPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
 
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
   return (
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
         "gap-2 text-xs leading-none group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
-        className
+        className,
       )}
       {...props}
     />
diff --git a/components/ui/menubar.tsx b/components/ui/menubar.tsx
index a3e9b230..1e196c76 100644
--- a/components/ui/menubar.tsx
+++ b/components/ui/menubar.tsx
@@ -6,10 +6,7 @@ import { Menubar as MenubarPrimitive } from "radix-ui"
 import { cn } from "@/lib/utils"
 import { RiCheckLine, RiArrowRightSLine } from "@remixicon/react"
 
-function Menubar({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+function Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {
   return (
     <MenubarPrimitive.Root
       data-slot="menubar"
@@ -19,42 +16,29 @@ function Menubar({
   )
 }
 
-function MenubarMenu({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+function MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
   return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
 }
 
-function MenubarGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+function MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
   return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
 }
 
-function MenubarPortal({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+function MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
   return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
 }
 
-function MenubarRadioGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return (
-    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
-  )
+function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
 }
 
-function MenubarTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
   return (
     <MenubarPrimitive.Trigger
       data-slot="menubar-trigger"
       className={cn(
         "hover:bg-muted aria-expanded:bg-muted rounded-none px-1.5 py-[calc(--spacing(0.8))] text-xs font-medium flex items-center outline-hidden select-none",
-        className
+        className,
       )}
       {...props}
     />
@@ -75,7 +59,10 @@ function MenubarContent({
         align={align}
         alignOffset={alignOffset}
         sideOffset={sideOffset}
-        className={cn("bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden", className )}
+        className={cn(
+          "bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden",
+          className,
+        )}
         {...props}
       />
     </MenubarPortal>
@@ -98,7 +85,7 @@ function MenubarItem({
       data-variant={variant}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     />
@@ -116,15 +103,14 @@ function MenubarCheckboxItem({
       data-slot="menubar-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-7 text-xs data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       checked={checked}
       {...props}
     >
       <span className="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center">
         <MenubarPrimitive.ItemIndicator>
-          <RiCheckLine
-          />
+          <RiCheckLine />
         </MenubarPrimitive.ItemIndicator>
       </span>
       {children}
@@ -132,24 +118,19 @@ function MenubarCheckboxItem({
   )
 }
 
-function MenubarRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+function MenubarRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
   return (
     <MenubarPrimitive.RadioItem
       data-slot="menubar-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-7 text-xs data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
       <span className="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center">
         <MenubarPrimitive.ItemIndicator>
-          <RiCheckLine
-          />
+          <RiCheckLine />
         </MenubarPrimitive.ItemIndicator>
       </span>
       {children}
@@ -174,10 +155,7 @@ function MenubarLabel({
   )
 }
 
-function MenubarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+function MenubarSeparator({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
   return (
     <MenubarPrimitive.Separator
       data-slot="menubar-separator"
@@ -187,22 +165,20 @@ function MenubarSeparator({
   )
 }
 
-function MenubarShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function MenubarShortcut({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="menubar-shortcut"
-      className={cn("text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto", className)}
+      className={cn(
+        "text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto",
+        className,
+      )}
       {...props}
     />
   )
 }
 
-function MenubarSub({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
   return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
 }
 
@@ -220,7 +196,7 @@ function MenubarSubTrigger({
       data-inset={inset}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none",
-        className
+        className,
       )}
       {...props}
     >
@@ -230,14 +206,14 @@ function MenubarSubTrigger({
   )
 }
 
-function MenubarSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+function MenubarSubContent({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
   return (
     <MenubarPrimitive.SubContent
       data-slot="menubar-sub-content"
-      className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-none shadow-lg ring-1 duration-100 z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden", className )}
+      className={cn(
+        "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-none shadow-lg ring-1 duration-100 z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden",
+        className,
+      )}
       {...props}
     />
   )
diff --git a/components/ui/native-select.tsx b/components/ui/native-select.tsx
index 27ce8b0e..05fa1d9a 100644
--- a/components/ui/native-select.tsx
+++ b/components/ui/native-select.tsx
@@ -7,17 +7,10 @@ type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
   size?: "sm" | "default"
 }
 
-function NativeSelect({
-  className,
-  size = "default",
-  ...props
-}: NativeSelectProps) {
+function NativeSelect({ className, size = "default", ...props }: NativeSelectProps) {
   return (
     <div
-      className={cn(
-        "group/native-select relative w-fit has-[select:disabled]:opacity-50",
-        className
-      )}
+      className={cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className)}
       data-slot="native-select-wrapper"
       data-size={size}
     >
@@ -27,7 +20,11 @@ function NativeSelect({
         className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-none border bg-transparent py-1 pr-8 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=sm]:h-7 data-[size=sm]:rounded-none data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed"
         {...props}
       />
-      <RiArrowDownSLine className="text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none" aria-hidden="true" data-slot="native-select-icon" />
+      <RiArrowDownSLine
+        className="text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none"
+        aria-hidden="true"
+        data-slot="native-select-icon"
+      />
     </div>
   )
 }
@@ -36,17 +33,8 @@ function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
   return <option data-slot="native-select-option" {...props} />
 }
 
-function NativeSelectOptGroup({
-  className,
-  ...props
-}: React.ComponentProps<"optgroup">) {
-  return (
-    <optgroup
-      data-slot="native-select-optgroup"
-      className={cn(className)}
-      {...props}
-    />
-  )
+function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<"optgroup">) {
+  return <optgroup data-slot="native-select-optgroup" className={cn(className)} {...props} />
 }
 
 export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }
diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
index 6025d14f..d6f962d1 100644
--- a/components/ui/navigation-menu.tsx
+++ b/components/ui/navigation-menu.tsx
@@ -19,7 +19,7 @@ function NavigationMenu({
       data-viewport={viewport}
       className={cn(
         "max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
-        className
+        className,
       )}
       {...props}
     >
@@ -29,37 +29,24 @@ function NavigationMenu({
   )
 }
 
-function NavigationMenuList({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
   return (
     <NavigationMenuPrimitive.List
       data-slot="navigation-menu-list"
-      className={cn(
-        "gap-0 group flex flex-1 list-none items-center justify-center",
-        className
-      )}
+      className={cn("gap-0 group flex flex-1 list-none items-center justify-center", className)}
       {...props}
     />
   )
 }
 
-function NavigationMenuItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
   return (
-    <NavigationMenuPrimitive.Item
-      data-slot="navigation-menu-item"
-      className={cn("relative", className)}
-      {...props}
-    />
+    <NavigationMenuPrimitive.Item data-slot="navigation-menu-item" className={cn("relative", className)} {...props} />
   )
 }
 
 const navigationMenuTriggerStyle = cva(
-  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-none px-2.5 py-1.5 text-xs font-medium transition-all focus-visible:ring-1 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none"
+  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-none px-2.5 py-1.5 text-xs font-medium transition-all focus-visible:ring-1 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none",
 )
 
 function NavigationMenuTrigger({
@@ -74,21 +61,21 @@ function NavigationMenuTrigger({
       {...props}
     >
       {children}{" "}
-      <RiArrowDownSLine className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
+      <RiArrowDownSLine
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
+        aria-hidden="true"
+      />
     </NavigationMenuPrimitive.Trigger>
   )
 }
 
-function NavigationMenuContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
   return (
     <NavigationMenuPrimitive.Content
       data-slot="navigation-menu-content"
       className={cn(
         "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto",
-        className
+        className,
       )}
       {...props}
     />
@@ -100,16 +87,12 @@ function NavigationMenuViewport({
   ...props
 }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
   return (
-    <div
-      className={cn(
-        "absolute top-full left-0 isolate z-50 flex justify-center"
-      )}
-    >
+    <div className={cn("absolute top-full left-0 isolate z-50 flex justify-center")}>
       <NavigationMenuPrimitive.Viewport
         data-slot="navigation-menu-viewport"
         className={cn(
           "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-none shadow ring-1 duration-100 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]",
-          className
+          className,
         )}
         {...props}
       />
@@ -117,14 +100,14 @@ function NavigationMenuViewport({
   )
 }
 
-function NavigationMenuLink({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
   return (
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
-      className={cn("data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-none", className)}
+      className={cn(
+        "data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-none",
+        className,
+      )}
       {...props}
     />
   )
@@ -139,7 +122,7 @@ function NavigationMenuIndicator({
       data-slot="navigation-menu-indicator"
       className={cn(
         "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
-        className
+        className,
       )}
       {...props}
     >
diff --git a/components/ui/pagination.tsx b/components/ui/pagination.tsx
index 99b0ca38..eff76729 100644
--- a/components/ui/pagination.tsx
+++ b/components/ui/pagination.tsx
@@ -10,26 +10,14 @@ function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
       role="navigation"
       aria-label="pagination"
       data-slot="pagination"
-      className={cn(
-        "mx-auto flex w-full justify-center",
-        className
-      )}
+      className={cn("mx-auto flex w-full justify-center", className)}
       {...props}
     />
   )
 }
 
-function PaginationContent({
-  className,
-  ...props
-}: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="pagination-content"
-      className={cn("gap-0.5 flex items-center", className)}
-      {...props}
-    />
-  )
+function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) {
+  return <ul data-slot="pagination-content" className={cn("gap-0.5 flex items-center", className)} {...props} />
 }
 
 function PaginationItem({ ...props }: React.ComponentProps<"li">) {
@@ -41,25 +29,10 @@ type PaginationLinkProps = {
 } & Pick<React.ComponentProps<typeof Button>, "size"> &
   React.ComponentProps<"a">
 
-function PaginationLink({
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}: PaginationLinkProps) {
+function PaginationLink({ className, isActive, size = "icon", ...props }: PaginationLinkProps) {
   return (
-    <Button
-      asChild
-      variant={isActive ? "outline" : "ghost"}
-      size={size}
-      className={cn(className)}
-    >
-      <a
-        aria-current={isActive ? "page" : undefined}
-        data-slot="pagination-link"
-        data-active={isActive}
-        {...props}
-      />
+    <Button asChild variant={isActive ? "outline" : "ghost"} size={size} className={cn(className)}>
+      <a aria-current={isActive ? "page" : undefined} data-slot="pagination-link" data-active={isActive} {...props} />
     </Button>
   )
 }
@@ -70,16 +43,9 @@ function PaginationPrevious({
   ...props
 }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
   return (
-    <PaginationLink
-      aria-label="Go to previous page"
-      size="default"
-      className={cn("pl-1.5!", className)}
-      {...props}
-    >
+    <PaginationLink aria-label="Go to previous page" size="default" className={cn("pl-1.5!", className)} {...props}>
       <RiArrowLeftSLine data-icon="inline-start" />
-      <span className="hidden sm:block">
-        {text}
-      </span>
+      <span className="hidden sm:block">{text}</span>
     </PaginationLink>
   )
 }
@@ -90,34 +56,25 @@ function PaginationNext({
   ...props
 }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
   return (
-    <PaginationLink
-      aria-label="Go to next page"
-      size="default"
-      className={cn("pr-1.5!", className)}
-      {...props}
-    >
+    <PaginationLink aria-label="Go to next page" size="default" className={cn("pr-1.5!", className)} {...props}>
       <span className="hidden sm:block">{text}</span>
       <RiArrowRightSLine data-icon="inline-end" />
     </PaginationLink>
   )
 }
 
-function PaginationEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       aria-hidden
       data-slot="pagination-ellipsis"
       className={cn(
         "size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center",
-        className
+        className,
       )}
       {...props}
     >
-      <RiMoreLine
-      />
+      <RiMoreLine />
       <span className="sr-only">More pages</span>
     </span>
   )
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
index 2a5072fe..088ac70b 100644
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@@ -5,15 +5,11 @@ import { Popover as PopoverPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
 
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
   return <PopoverPrimitive.Root data-slot="popover" {...props} />
 }
 
-function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
   return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
 }
 
@@ -31,7 +27,7 @@ function PopoverContent({
         sideOffset={sideOffset}
         className={cn(
           "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-none p-2.5 text-xs shadow-md ring-1 duration-100 z-50 w-72 origin-(--radix-popover-content-transform-origin) outline-hidden",
-          className
+          className,
         )}
         {...props}
       />
@@ -39,51 +35,22 @@ function PopoverContent({
   )
 }
 
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
   return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
 }
 
 function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="popover-header"
-      className={cn("flex flex-col gap-1 text-xs", className)}
-      {...props}
-    />
-  )
+  return <div data-slot="popover-header" className={cn("flex flex-col gap-1 text-xs", className)} {...props} />
 }
 
 function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
-  return (
-    <div
-      data-slot="popover-title"
-      className={cn("text-sm font-medium", className)}
-      {...props}
-    />
-  )
+  return <div data-slot="popover-title" className={cn("text-sm font-medium", className)} {...props} />
 }
 
-function PopoverDescription({
-  className,
-  ...props
-}: React.ComponentProps<"p">) {
+function PopoverDescription({ className, ...props }: React.ComponentProps<"p">) {
   return (
-    <p
-      data-slot="popover-description"
-      className={cn("text-muted-foreground text-xs/relaxed", className)}
-      {...props}
-    />
+    <p data-slot="popover-description" className={cn("text-muted-foreground text-xs/relaxed", className)} {...props} />
   )
 }
 
-export {
-  Popover,
-  PopoverAnchor,
-  PopoverContent,
-  PopoverDescription,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger,
-}
+export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger }
diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
index 80bc8481..033ec03b 100644
--- a/components/ui/progress.tsx
+++ b/components/ui/progress.tsx
@@ -5,18 +5,11 @@ import { Progress as ProgressPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
 
-function Progress({
-  className,
-  value,
-  ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
   return (
     <ProgressPrimitive.Root
       data-slot="progress"
-      className={cn(
-        "bg-muted h-1 rounded-none relative flex w-full items-center overflow-x-hidden",
-        className
-      )}
+      className={cn("bg-muted h-1 rounded-none relative flex w-full items-center overflow-x-hidden", className)}
       {...props}
     >
       <ProgressPrimitive.Indicator
diff --git a/components/ui/radio-group.tsx b/components/ui/radio-group.tsx
index 59e43d71..815985af 100644
--- a/components/ui/radio-group.tsx
+++ b/components/ui/radio-group.tsx
@@ -6,29 +6,17 @@ import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
 import { cn } from "@/lib/utils"
 import { RiCircleLine } from "@remixicon/react"
 
-function RadioGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
-  return (
-    <RadioGroupPrimitive.Root
-      data-slot="radio-group"
-      className={cn("grid gap-2 w-full", className)}
-      {...props}
-    />
-  )
+function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return <RadioGroupPrimitive.Root data-slot="radio-group" className={cn("grid gap-2 w-full", className)} {...props} />
 }
 
-function RadioGroupItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
   return (
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
         "border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full focus-visible:ring-1 aria-invalid:ring-1 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     >
diff --git a/components/ui/resizable.tsx b/components/ui/resizable.tsx
index 5af1979b..acbbde70 100644
--- a/components/ui/resizable.tsx
+++ b/components/ui/resizable.tsx
@@ -5,25 +5,17 @@ import * as ResizablePrimitive from "react-resizable-panels"
 
 import { cn } from "@/lib/utils"
 
-function ResizablePanelGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Group>) {
+function ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.Group>) {
   return (
     <ResizablePrimitive.Group
       data-slot="resizable-panel-group"
-      className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className
-      )}
+      className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
       {...props}
     />
   )
 }
 
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+function ResizablePanel({ ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
   return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
 }
 
@@ -39,13 +31,11 @@ function ResizableHandle({
       data-slot="resizable-handle"
       className={cn(
         "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-        className
+        className,
       )}
       {...props}
     >
-      {withHandle && (
-        <div className="bg-border h-6 w-1 rounded-none z-10 flex shrink-0" />
-      )}
+      {withHandle && <div className="bg-border h-6 w-1 rounded-none z-10 flex shrink-0" />}
     </ResizablePrimitive.Separator>
   )
 }
diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx
index d1008df7..63296203 100644
--- a/components/ui/scroll-area.tsx
+++ b/components/ui/scroll-area.tsx
@@ -5,17 +5,9 @@ import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
 
-function ScrollArea({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
   return (
-    <ScrollAreaPrimitive.Root
-      data-slot="scroll-area"
-      className={cn("relative", className)}
-      {...props}
-    >
+    <ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
         className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
@@ -40,7 +32,7 @@ function ScrollBar({
       orientation={orientation}
       className={cn(
         "data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none",
-        className
+        className,
       )}
       {...props}
     >
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index bca7e6f0..c7a1f945 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -6,28 +6,15 @@ import { Select as SelectPrimitive } from "radix-ui"
 import { cn } from "@/lib/utils"
 import { RiArrowDownSLine, RiCheckLine, RiArrowUpSLine } from "@remixicon/react"
 
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
   return <SelectPrimitive.Root data-slot="select" {...props} />
 }
 
-function SelectGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return (
-    <SelectPrimitive.Group
-      data-slot="select-group"
-      className={cn("scroll-my-1", className)}
-      {...props}
-    />
-  )
+function SelectGroup({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" className={cn("scroll-my-1", className)} {...props} />
 }
 
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
   return <SelectPrimitive.Value data-slot="select-value" {...props} />
 }
 
@@ -45,7 +32,7 @@ function SelectTrigger({
       data-size={size}
       className={cn(
         "border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-none border bg-transparent py-2 pr-2 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
@@ -69,7 +56,12 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         data-align-trigger={position === "item-aligned"}
-        className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
+        className={cn(
+          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
         position={position}
         align={align}
         {...props}
@@ -79,7 +71,7 @@ function SelectContent({
           data-position={position}
           className={cn(
             "data-[position=popper]:h-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--radix-select-trigger-width)]",
-            position === "popper" && ""
+            position === "popper" && "",
           )}
         >
           {children}
@@ -90,10 +82,7 @@ function SelectContent({
   )
 }
 
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
   return (
     <SelectPrimitive.Label
       data-slot="select-label"
@@ -103,17 +92,13 @@ function SelectLabel({
   )
 }
 
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
@@ -127,10 +112,7 @@ function SelectItem({
   )
 }
 
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
@@ -140,18 +122,17 @@ function SelectSeparator({
   )
 }
 
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
   return (
     <SelectPrimitive.ScrollUpButton
       data-slot="select-scroll-up-button"
-      className={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className)}
+      className={cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
       {...props}
     >
-      <RiArrowUpSLine
-      />
+      <RiArrowUpSLine />
     </SelectPrimitive.ScrollUpButton>
   )
 }
@@ -163,11 +144,13 @@ function SelectScrollDownButton({
   return (
     <SelectPrimitive.ScrollDownButton
       data-slot="select-scroll-down-button"
-      className={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className)}
+      className={cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
       {...props}
     >
-      <RiArrowDownSLine
-      />
+      <RiArrowDownSLine />
     </SelectPrimitive.ScrollDownButton>
   )
 }
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
index a23c42da..d1d7ec7c 100644
--- a/components/ui/separator.tsx
+++ b/components/ui/separator.tsx
@@ -18,7 +18,7 @@ function Separator({
       orientation={orientation}
       className={cn(
         "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
-        className
+        className,
       )}
       {...props}
     />
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
index 5d885a77..2f1e780e 100644
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -11,32 +11,26 @@ function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />
 }
 
-function SheetTrigger({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
   return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
 }
 
-function SheetClose({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
   return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
 }
 
-function SheetPortal({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
   return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
 }
 
-function SheetOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
   return (
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
-      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 text-xs/relaxed duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 text-xs/relaxed duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50",
+        className,
+      )}
       {...props}
     />
   )
@@ -58,15 +52,17 @@ function SheetContent({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         data-side={side}
-        className={cn("bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className)}
+        className={cn(
+          "bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className,
+        )}
         {...props}
       >
         {children}
         {showCloseButton && (
           <SheetPrimitive.Close data-slot="sheet-close" asChild>
             <Button variant="ghost" className="absolute top-3 right-3" size="icon-sm">
-              <RiCloseLine
-              />
+              <RiCloseLine />
               <span className="sr-only">Close</span>
             </Button>
           </SheetPrimitive.Close>
@@ -77,29 +73,14 @@ function SheetContent({
 }
 
 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-header"
-      className={cn("gap-0.5 p-4 flex flex-col", className)}
-      {...props}
-    />
-  )
+  return <div data-slot="sheet-header" className={cn("gap-0.5 p-4 flex flex-col", className)} {...props} />
 }
 
 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-footer"
-      className={cn("gap-2 p-4 mt-auto flex flex-col", className)}
-      {...props}
-    />
-  )
+  return <div data-slot="sheet-footer" className={cn("gap-2 p-4 mt-auto flex flex-col", className)} {...props} />
 }
 
-function SheetTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
@@ -109,10 +90,7 @@ function SheetTitle({
   )
 }
 
-function SheetDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>) {
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
@@ -122,13 +100,4 @@ function SheetDescription({
   )
 }
 
-export {
-  Sheet,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription }
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
index 62a7c893..48d1cb16 100644
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -8,19 +8,9 @@ import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Separator } from "@/components/ui/separator"
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "@/components/ui/sheet"
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet"
 import { Skeleton } from "@/components/ui/skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { useIsMobile } from "@/hooks/use-mobile"
 import { RiSideBarLine } from "@remixicon/react"
 
@@ -84,7 +74,7 @@ function SidebarProvider({
       // This sets the cookie to keep the sidebar state.
       document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
     },
-    [setOpenProp, open]
+    [setOpenProp, open],
   )
 
   // Helper to toggle the sidebar.
@@ -95,10 +85,7 @@ function SidebarProvider({
   // Adds a keyboard shortcut to toggle the sidebar.
   React.useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-        (event.metaKey || event.ctrlKey)
-      ) {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault()
         toggleSidebar()
       }
@@ -122,7 +109,7 @@ function SidebarProvider({
       setOpenMobile,
       toggleSidebar,
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
   )
 
   return (
@@ -136,10 +123,7 @@ function SidebarProvider({
             ...style,
           } as React.CSSProperties
         }
-        className={cn(
-          "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
-          className
-        )}
+        className={cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className)}
         {...props}
       >
         {children}
@@ -167,10 +151,7 @@ function Sidebar({
     return (
       <div
         data-slot="sidebar"
-        className={cn(
-          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
-          className
-        )}
+        className={cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className)}
         {...props}
       >
         {children}
@@ -222,7 +203,7 @@ function Sidebar({
           "group-data-[side=right]:rotate-180",
           variant === "floating" || variant === "inset"
             ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
         )}
       />
       <div
@@ -234,7 +215,7 @@ function Sidebar({
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
             : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
-          className
+          className,
         )}
         {...props}
       >
@@ -250,11 +231,7 @@ function Sidebar({
   )
 }
 
-function SidebarTrigger({
-  className,
-  onClick,
-  ...props
-}: React.ComponentProps<typeof Button>) {
+function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
   const { toggleSidebar } = useSidebar()
 
   return (
@@ -294,7 +271,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
         "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
+        className,
       )}
       {...props}
     />
@@ -307,17 +284,14 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
       data-slot="sidebar-inset"
       className={cn(
         "bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col",
-        className
+        className,
       )}
       {...props}
     />
   )
 }
 
-function SidebarInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof Input>) {
+function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
   return (
     <Input
       data-slot="sidebar-input"
@@ -350,10 +324,7 @@ function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function SidebarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
+function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
   return (
     <Separator
       data-slot="sidebar-separator"
@@ -371,7 +342,7 @@ function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
       data-sidebar="content"
       className={cn(
         "no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
+        className,
       )}
       {...props}
     />
@@ -383,10 +354,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="sidebar-group"
       data-sidebar="group"
-      className={cn(
-        "p-2 relative flex w-full min-w-0 flex-col",
-        className
-      )}
+      className={cn("p-2 relative flex w-full min-w-0 flex-col", className)}
       {...props}
     />
   )
@@ -405,7 +373,7 @@ function SidebarGroupLabel({
       data-sidebar="group-label"
       className={cn(
         "text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     />
@@ -425,17 +393,14 @@ function SidebarGroupAction({
       data-sidebar="group-action"
       className={cn(
         "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-none p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     />
   )
 }
 
-function SidebarGroupContent({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-group-content"
@@ -474,7 +439,8 @@ const sidebarMenuButtonVariants = cva(
     variants: {
       variant: {
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+        outline:
+          "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
       size: {
         default: "h-8 text-xs",
@@ -486,7 +452,7 @@ const sidebarMenuButtonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 )
 
 function SidebarMenuButton({
@@ -529,12 +495,7 @@ function SidebarMenuButton({
   return (
     <Tooltip>
       <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent
-        side="right"
-        align="center"
-        hidden={state !== "collapsed" || isMobile}
-        {...tooltip}
-      />
+      <TooltipContent side="right" align="center" hidden={state !== "collapsed" || isMobile} {...tooltip} />
     </Tooltip>
   )
 }
@@ -558,24 +519,21 @@ function SidebarMenuAction({
         "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-none p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
         showOnHover &&
           "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0",
-        className
+        className,
       )}
       {...props}
     />
   )
 }
 
-function SidebarMenuBadge({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
         "text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-none px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden",
-        className
+        className,
       )}
       {...props}
     />
@@ -601,12 +559,7 @@ function SidebarMenuSkeleton({
       className={cn("h-8 gap-2 rounded-none px-2 flex items-center", className)}
       {...props}
     >
-      {showIcon && (
-        <Skeleton
-          className="size-4 rounded-none"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
+      {showIcon && <Skeleton className="size-4 rounded-none" data-sidebar="menu-skeleton-icon" />}
       <Skeleton
         className="h-4 max-w-(--skeleton-width) flex-1"
         data-sidebar="menu-skeleton-text"
@@ -625,16 +578,16 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
     <ul
       data-slot="sidebar-menu-sub"
       data-sidebar="menu-sub"
-      className={cn("border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col", className)}
+      className={cn(
+        "border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col",
+        className,
+      )}
       {...props}
     />
   )
 }
 
-function SidebarMenuSubItem({
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
+function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">) {
   return (
     <li
       data-slot="sidebar-menu-sub-item"
@@ -666,7 +619,7 @@ function SidebarMenuSubButton({
       data-active={isActive}
       className={cn(
         "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     />
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
index f768775b..a72da506 100644
--- a/components/ui/skeleton.tsx
+++ b/components/ui/skeleton.tsx
@@ -1,13 +1,7 @@
 import { cn } from "@/lib/utils"
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("bg-muted rounded-none animate-pulse", className)}
-      {...props}
-    />
-  )
+  return <div data-slot="skeleton" className={cn("bg-muted rounded-none animate-pulse", className)} {...props} />
 }
 
 export { Skeleton }
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
index ade172cb..d96679e0 100644
--- a/components/ui/slider.tsx
+++ b/components/ui/slider.tsx
@@ -14,13 +14,8 @@ function Slider({
   ...props
 }: React.ComponentProps<typeof SliderPrimitive.Root>) {
   const _values = React.useMemo(
-    () =>
-      Array.isArray(value)
-        ? value
-        : Array.isArray(defaultValue)
-          ? defaultValue
-          : [min, max],
-    [value, defaultValue, min, max]
+    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
+    [value, defaultValue, min, max],
   )
 
   return (
@@ -32,7 +27,7 @@ function Slider({
       max={max}
       className={cn(
         "data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col",
-        className
+        className,
       )}
       {...props}
     >
diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
index 76cec6fd..8d45620d 100644
--- a/components/ui/sonner.tsx
+++ b/components/ui/sonner.tsx
@@ -2,7 +2,13 @@
 
 import { useTheme } from "next-themes"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
-import { RiCheckboxCircleLine, RiInformationLine, RiErrorWarningLine, RiCloseCircleLine, RiLoaderLine } from "@remixicon/react"
+import {
+  RiCheckboxCircleLine,
+  RiInformationLine,
+  RiErrorWarningLine,
+  RiCloseCircleLine,
+  RiLoaderLine,
+} from "@remixicon/react"
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme()
@@ -12,21 +18,11 @@ const Toaster = ({ ...props }: ToasterProps) => {
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
       icons={{
-        success: (
-          <RiCheckboxCircleLine className="size-4" />
-        ),
-        info: (
-          <RiInformationLine className="size-4" />
-        ),
-        warning: (
-          <RiErrorWarningLine className="size-4" />
-        ),
-        error: (
-          <RiCloseCircleLine className="size-4" />
-        ),
-        loading: (
-          <RiLoaderLine className="size-4 animate-spin" />
-        ),
+        success: <RiCheckboxCircleLine className="size-4" />,
+        info: <RiInformationLine className="size-4" />,
+        warning: <RiErrorWarningLine className="size-4" />,
+        error: <RiCloseCircleLine className="size-4" />,
+        loading: <RiLoaderLine className="size-4 animate-spin" />,
       }}
       style={
         {
diff --git a/components/ui/spinner.tsx b/components/ui/spinner.tsx
index 50b0ac76..b3064af8 100644
--- a/components/ui/spinner.tsx
+++ b/components/ui/spinner.tsx
@@ -1,15 +1,9 @@
 import { cn } from "@/lib/utils"
 import { RiLoaderLine } from "@remixicon/react"
 
-function Spinner({ className, children: _children, ...props }: React.ComponentProps<"svg">) {
-  return (
-    <RiLoaderLine
-      role="status"
-      aria-label="Loading"
-      className={cn("size-4 animate-spin", className)}
-      {...props}
-    />
-  )
+function Spinner({ className, children, ...props }: React.ComponentProps<"svg">) {
+  void children
+  return <RiLoaderLine role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
 }
 
 export { Spinner }
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
index 5690d32b..4e009212 100644
--- a/components/ui/switch.tsx
+++ b/components/ui/switch.tsx
@@ -18,7 +18,7 @@ function Switch({
       data-size={size}
       className={cn(
         "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-1 aria-invalid:ring-1 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     >
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
index a8d901b2..349106df 100644
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@@ -7,33 +7,17 @@ import { cn } from "@/lib/utils"
 function Table({ className, ...props }: React.ComponentProps<"table">) {
   return (
     <div data-slot="table-container" className="relative w-full overflow-x-auto">
-      <table
-        data-slot="table"
-        className={cn("w-full caption-bottom text-xs", className)}
-        {...props}
-      />
+      <table data-slot="table" className={cn("w-full caption-bottom text-xs", className)} {...props} />
     </div>
   )
 }
 
 function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
-      {...props}
-    />
-  )
+  return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />
 }
 
 function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  )
+  return <tbody data-slot="table-body" className={cn("[&_tr:last-child]:border-0", className)} {...props} />
 }
 
 function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
@@ -60,7 +44,10 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
   return (
     <th
       data-slot="table-head"
-      className={cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
       {...props}
     />
   )
@@ -76,26 +63,10 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
   )
 }
 
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
   return (
-    <caption
-      data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-xs", className)}
-      {...props}
-    />
+    <caption data-slot="table-caption" className={cn("text-muted-foreground mt-4 text-xs", className)} {...props} />
   )
 }
 
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
index 8a8b75d6..92089b54 100644
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@@ -6,19 +6,12 @@ import { Tabs as TabsPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
 
-function Tabs({
-  className,
-  orientation = "horizontal",
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+function Tabs({ className, orientation = "horizontal", ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
       data-orientation={orientation}
-      className={cn(
-        "gap-2 group/tabs flex data-[orientation=horizontal]:flex-col",
-        className
-      )}
+      className={cn("gap-2 group/tabs flex data-[orientation=horizontal]:flex-col", className)}
       {...props}
     />
   )
@@ -36,15 +29,14 @@ const tabsListVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 )
 
 function TabsList({
   className,
   variant = "default",
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.List> &
-  VariantProps<typeof tabsListVariants>) {
+}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
@@ -55,10 +47,7 @@ function TabsList({
   )
 }
 
-function TabsTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
   return (
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
@@ -67,17 +56,14 @@ function TabsTrigger({
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
         "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
-        className
+        className,
       )}
       {...props}
     />
   )
 }
 
-function TabsContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
   return (
     <TabsPrimitive.Content
       data-slot="tabs-content"
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
index 9b8f4a71..dede4f3b 100644
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@@ -8,7 +8,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
       data-slot="textarea"
       className={cn(
         "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-none border bg-transparent px-2.5 py-2 text-xs transition-colors focus-visible:ring-1 aria-invalid:ring-1 md:text-xs placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />
diff --git a/components/ui/toggle-group.tsx b/components/ui/toggle-group.tsx
index 5dbbb2d6..0e1dc3d1 100644
--- a/components/ui/toggle-group.tsx
+++ b/components/ui/toggle-group.tsx
@@ -42,13 +42,11 @@ function ToggleGroup({
       style={{ "--gap": spacing } as React.CSSProperties}
       className={cn(
         "rounded-none data-[size=sm]:rounded-none group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
-        className
+        className,
       )}
       {...props}
     >
-      <ToggleGroupContext.Provider
-        value={{ variant, size, spacing, orientation }}
-      >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing, orientation }}>
         {children}
       </ToggleGroupContext.Provider>
     </ToggleGroupPrimitive.Root>
@@ -61,8 +59,7 @@ function ToggleGroupItem({
   variant = "default",
   size = "default",
   ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
-  VariantProps<typeof toggleVariants>) {
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
   const context = React.useContext(ToggleGroupContext)
 
   return (
@@ -77,7 +74,7 @@ function ToggleGroupItem({
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        className
+        className,
       )}
       {...props}
     >
diff --git a/components/ui/toggle.tsx b/components/ui/toggle.tsx
index 69b34fbf..21b71bb2 100644
--- a/components/ui/toggle.tsx
+++ b/components/ui/toggle.tsx
@@ -24,7 +24,7 @@ const toggleVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 )
 
 function Toggle({
@@ -32,14 +32,9 @@ function Toggle({
   variant = "default",
   size = "default",
   ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
+}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
   return (
-    <TogglePrimitive.Root
-      data-slot="toggle"
-      className={cn(toggleVariants({ variant, size, className }))}
-      {...props}
-    />
+    <TogglePrimitive.Root data-slot="toggle" className={cn(toggleVariants({ variant, size, className }))} {...props} />
   )
 }
 
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
index 182d3a82..42e4165d 100644
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -5,22 +5,11 @@ import { Tooltip as TooltipPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
 
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  )
+function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />
 }
 
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
   return (
     <TooltipProvider>
       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
@@ -28,9 +17,7 @@ function Tooltip({
   )
 }
 
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
 }
 
@@ -47,7 +34,7 @@ function TooltipContent({
         sideOffset={sideOffset}
         className={cn(
           "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-none px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin)",
-          className
+          className,
         )}
         {...props}
       >
diff --git a/components/upload-zone.tsx b/components/upload-zone.tsx
index ff864e1e..cdbc5cb1 100644
--- a/components/upload-zone.tsx
+++ b/components/upload-zone.tsx
@@ -59,19 +59,13 @@ export function UploadZone({
         "flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border/70 px-6 py-10 text-center transition hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         hovering && !disabled && "border-primary bg-primary/5",
         disabled && "pointer-events-none opacity-60",
-        className
+        className,
       )}
       onDrop={onDrop}
       onDragOver={onDragOver}
       onDragLeave={onDragLeave}
     >
-      <input
-        type="file"
-        accept={accept}
-        className="hidden"
-        disabled={disabled}
-        onChange={onInputChange}
-      />
+      <input type="file" accept={accept} className="hidden" disabled={disabled} onChange={onInputChange} />
       <Icon className="h-12 w-12 text-muted-foreground" />
       {children}
     </label>
diff --git a/components/user-group/edit-form.tsx b/components/user-group/edit-form.tsx
index 73ec4542..69758665 100644
--- a/components/user-group/edit-form.tsx
+++ b/components/user-group/edit-form.tsx
@@ -4,12 +4,7 @@ import * as React from "react"
 import { useTranslation } from "react-i18next"
 import { Switch } from "@/components/ui/switch"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { useGroups } from "@/hooks/use-groups"
 import { UserGroupMembers } from "./members"
 import { UserGroupPolicies } from "./policies"
@@ -28,12 +23,7 @@ interface UserGroupEditFormProps {
   onSuccess: () => void
 }
 
-export function UserGroupEditForm({
-  open,
-  onOpenChange,
-  row,
-  onSuccess: _onSuccess,
-}: UserGroupEditFormProps) {
+export function UserGroupEditForm({ open, onOpenChange, row, onSuccess }: UserGroupEditFormProps) {
   const { t } = useTranslation()
   const { getGroup, updateGroupStatus } = useGroups()
 
@@ -50,7 +40,7 @@ export function UserGroupEditForm({
       const data = (await getGroup(name)) as GroupInfo
       setGroup(data)
     },
-    [getGroup]
+    [getGroup],
   )
 
   React.useEffect(() => {
@@ -68,6 +58,7 @@ export function UserGroupEditForm({
     if (status === group.status) return
     await updateGroupStatus(group.name, { ...group, status })
     await getGroupData(group.name)
+    onSuccess()
   }
 
   const handleStatusToggle = async (checked: boolean) => {
@@ -81,20 +72,14 @@ export function UserGroupEditForm({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        className="sm:max-w-lg"
-        onPointerDownOutside={(e) => e.preventDefault()}
-      >
+      <DialogContent className="sm:max-w-lg" onPointerDownOutside={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>{group.name || t("Members")}</DialogTitle>
         </DialogHeader>
         <div className="space-y-4">
           <div className="flex items-center justify-between rounded-md border px-3 py-2">
             <span className="text-sm text-muted-foreground">{t("Status")}</span>
-            <Switch
-              checked={statusBoolean}
-              onCheckedChange={handleStatusToggle}
-            />
+            <Switch checked={statusBoolean} onCheckedChange={handleStatusToggle} />
           </div>
 
           <Tabs value={activeTab} onValueChange={setActiveTab} className="flex flex-col gap-4">
@@ -104,16 +89,10 @@ export function UserGroupEditForm({
             </TabsList>
 
             <TabsContent value="users" className="mt-0">
-              <UserGroupMembers
-                group={group}
-                onSearch={() => getGroupData(group.name)}
-              />
+              <UserGroupMembers group={group} onSearch={() => getGroupData(group.name)} />
             </TabsContent>
             <TabsContent value="policy" className="mt-0">
-              <UserGroupPolicies
-                group={group}
-                onSearch={() => getGroupData(group.name)}
-              />
+              <UserGroupPolicies group={group} onSearch={() => getGroupData(group.name)} />
             </TabsContent>
           </Tabs>
         </div>
diff --git a/components/user-group/members.tsx b/components/user-group/members.tsx
index 554c5a1f..4aa3d2f2 100644
--- a/components/user-group/members.tsx
+++ b/components/user-group/members.tsx
@@ -34,7 +34,7 @@ export function UserGroupMembers({ group, onSearch }: UserGroupMembersProps) {
 
   const membersData = React.useMemo<MemberItem[]>(
     () => (group?.members ?? []).map((name) => ({ name })),
-    [group?.members]
+    [group?.members],
   )
 
   const columns: ColumnDef<MemberItem>[] = React.useMemo(
@@ -42,12 +42,10 @@ export function UserGroupMembers({ group, onSearch }: UserGroupMembersProps) {
       {
         id: "name",
         header: () => t("Name"),
-        cell: ({ row }) => (
-          <span className="font-medium">{row.original.name}</span>
-        ),
+        cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
       },
     ],
-    [t]
+    [t],
   )
 
   const { table } = useDataTable<MemberItem>({
@@ -77,9 +75,7 @@ export function UserGroupMembers({ group, onSearch }: UserGroupMembersProps) {
   const changeMembers = async () => {
     try {
       const currentMembers = group?.members ?? []
-      const nowRemoveMembers = currentMembers.filter(
-        (item) => !members.includes(item)
-      )
+      const nowRemoveMembers = currentMembers.filter((item) => !members.includes(item))
 
       if (nowRemoveMembers.length) {
         await updateGroupMembers({
@@ -120,12 +116,7 @@ export function UserGroupMembers({ group, onSearch }: UserGroupMembersProps) {
                   className="w-full"
                 />
               </div>
-              <Button
-                type="button"
-                variant="outline"
-                className="inline-flex items-center gap-2"
-                onClick={startEditing}
-              >
+              <Button type="button" variant="outline" className="inline-flex items-center gap-2" onClick={startEditing}>
                 <RiAddLine className="size-4" />
                 {t("Edit User")}
               </Button>
@@ -141,11 +132,7 @@ export function UserGroupMembers({ group, onSearch }: UserGroupMembersProps) {
                 />
               </div>
               <div className="flex items-center gap-2 sm:self-end">
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={changeMembers}
-                >
+                <Button type="button" variant="outline" onClick={changeMembers}>
                   {t("Submit")}
                 </Button>
               </div>
diff --git a/components/user-group/new-form.tsx b/components/user-group/new-form.tsx
index b0357bf0..83db8274 100644
--- a/components/user-group/new-form.tsx
+++ b/components/user-group/new-form.tsx
@@ -6,13 +6,7 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Spinner } from "@/components/ui/spinner"
 import { Field, FieldContent, FieldLabel } from "@/components/ui/field"
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { useMessage } from "@/lib/feedback/message"
 import { useGroups } from "@/hooks/use-groups"
 import { UserSelector } from "@/components/user/selector"
@@ -23,11 +17,7 @@ interface UserGroupNewFormProps {
   onSuccess: () => void
 }
 
-export function UserGroupNewForm({
-  open,
-  onOpenChange,
-  onSuccess,
-}: UserGroupNewFormProps) {
+export function UserGroupNewForm({ open, onOpenChange, onSuccess }: UserGroupNewFormProps) {
   const { t } = useTranslation()
   const message = useMessage()
   const { updateGroupMembers } = useGroups()
@@ -71,10 +61,7 @@ export function UserGroupNewForm({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        className="sm:max-w-lg"
-        onPointerDownOutside={(e) => e.preventDefault()}
-      >
+      <DialogContent className="sm:max-w-lg" onPointerDownOutside={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>{t("Add group members")}</DialogTitle>
         </DialogHeader>
@@ -82,11 +69,7 @@ export function UserGroupNewForm({
           <Field>
             <FieldLabel className="text-sm font-medium">{t("Name")}</FieldLabel>
             <FieldContent>
-              <Input
-                value={group}
-                onChange={(e) => setGroup(e.target.value)}
-                autoComplete="off"
-              />
+              <Input value={group} onChange={(e) => setGroup(e.target.value)} autoComplete="off" />
             </FieldContent>
           </Field>
           <UserSelector
diff --git a/components/user-group/policies.tsx b/components/user-group/policies.tsx
index beec14f7..5d5e81e4 100644
--- a/components/user-group/policies.tsx
+++ b/components/user-group/policies.tsx
@@ -6,19 +6,8 @@ import { RiAddLine, RiArrowDownSLine, RiCheckLine } from "@remixicon/react"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { Field, FieldContent, FieldLabel } from "@/components/ui/field"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
 import { SearchInput } from "@/components/search-input"
 import { DataTable } from "@/components/data-table/data-table"
 import { useDataTable } from "@/hooks/use-data-table"
@@ -56,22 +45,17 @@ export function UserGroupPolicies({ group, onSearch }: UserGroupPoliciesProps) {
       .filter(Boolean)
   }, [policyStr])
 
-  const policiesData = React.useMemo<PolicyItem[]>(
-    () => currentPolicies.map((name) => ({ name })),
-    [currentPolicies]
-  )
+  const policiesData = React.useMemo<PolicyItem[]>(() => currentPolicies.map((name) => ({ name })), [currentPolicies])
 
   const columns: ColumnDef<PolicyItem>[] = React.useMemo(
     () => [
       {
         id: "name",
         header: () => t("Name"),
-        cell: ({ row }) => (
-          <span className="font-medium">{row.original.name}</span>
-        ),
+        cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
       },
     ],
-    [t]
+    [t],
   )
 
   const { table } = useDataTable<PolicyItem>({
@@ -97,7 +81,7 @@ export function UserGroupPolicies({ group, onSearch }: UserGroupPoliciesProps) {
         setPolicies(
           Object.keys(res ?? {})
             .sort((a, b) => a.localeCompare(b))
-            .map((key) => ({ label: key, value: key }))
+            .map((key) => ({ label: key, value: key })),
         )
       })
       .catch(() => message.error(t("Failed to get data")))
@@ -116,9 +100,7 @@ export function UserGroupPolicies({ group, onSearch }: UserGroupPoliciesProps) {
   }
 
   const togglePolicy = (value: string) => {
-    setSelectedPolicies((prev) =>
-      prev.includes(value) ? prev.filter((p) => p !== value) : [...prev, value]
-    )
+    setSelectedPolicies((prev) => (prev.includes(value) ? prev.filter((p) => p !== value) : [...prev, value]))
   }
 
   const changePolicies = async () => {
@@ -150,11 +132,7 @@ export function UserGroupPolicies({ group, onSearch }: UserGroupPoliciesProps) {
               className="w-full"
             />
           </div>
-          <Button
-            variant="outline"
-            className="inline-flex items-center gap-2"
-            onClick={startEditing}
-          >
+          <Button variant="outline" className="inline-flex items-center gap-2" onClick={startEditing}>
             <RiAddLine className="size-4" />
             {t("Edit Policy")}
           </Button>
@@ -162,14 +140,9 @@ export function UserGroupPolicies({ group, onSearch }: UserGroupPoliciesProps) {
       ) : (
         <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
           <Field className="flex w-full flex-col gap-2">
-            <FieldLabel className="text-sm font-medium">
-              {t("Select user group policies")}
-            </FieldLabel>
+            <FieldLabel className="text-sm font-medium">{t("Select user group policies")}</FieldLabel>
             <FieldContent className="space-y-2">
-              <Popover
-                open={policySelectorOpen}
-                onOpenChange={setPolicySelectorOpen}
-              >
+              <Popover open={policySelectorOpen} onOpenChange={setPolicySelectorOpen}>
                 <PopoverTrigger asChild>
                   <Button
                     type="button"
@@ -178,9 +151,7 @@ export function UserGroupPolicies({ group, onSearch }: UserGroupPoliciesProps) {
                     aria-label={t("Select user group policies")}
                   >
                     <span className="truncate">
-                      {selectedPolicies.length
-                        ? selectedPolicies.join(", ")
-                        : t("Select user group policies")}
+                      {selectedPolicies.length ? selectedPolicies.join(", ") : t("Select user group policies")}
                     </span>
                     <RiArrowDownSLine className="size-4 text-muted-foreground" />
                   </Button>
@@ -200,9 +171,7 @@ export function UserGroupPolicies({ group, onSearch }: UserGroupPoliciesProps) {
                             <RiCheckLine
                               className={cn(
                                 "mr-2 size-4",
-                                selectedPolicies.includes(option.value)
-                                  ? "opacity-100"
-                                  : "opacity-0"
+                                selectedPolicies.includes(option.value) ? "opacity-100" : "opacity-0",
                               )}
                             />
                             <span>{option.label}</span>
diff --git a/components/user-group/set-policies-multiple.tsx b/components/user-group/set-policies-multiple.tsx
index 9fc095c3..938b2302 100644
--- a/components/user-group/set-policies-multiple.tsx
+++ b/components/user-group/set-policies-multiple.tsx
@@ -4,12 +4,7 @@ import * as React from "react"
 import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
 import { Checkbox } from "@/components/ui/checkbox"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { SearchInput } from "@/components/search-input"
 import { DataTable } from "@/components/data-table/data-table"
 import { useDataTable } from "@/hooks/use-data-table"
@@ -50,27 +45,24 @@ export function UserGroupSetPoliciesMultiple({
     return policies.filter((p) => p.name.toLowerCase().includes(keyword))
   }, [policies, searchTerm])
 
-  const allVisibleSelected =
-    filteredPolicies.length > 0 &&
-    filteredPolicies.every((p) => checked.includes(p.name))
+  const allVisibleSelected = filteredPolicies.length > 0 && filteredPolicies.every((p) => checked.includes(p.name))
 
-  const isSelected = (name: string) => checked.includes(name)
+  const isSelected = React.useCallback((name: string) => checked.includes(name), [checked])
 
-  const toggleSelection = (name: string, value: boolean) => {
-    setChecked((prev) =>
-      value ? (prev.includes(name) ? prev : [...prev, name]) : prev.filter((p) => p !== name)
-    )
-  }
+  const toggleSelection = React.useCallback((name: string, value: boolean) => {
+    setChecked((prev) => (value ? (prev.includes(name) ? prev : [...prev, name]) : prev.filter((p) => p !== name)))
+  }, [])
 
-  const toggleSelectAll = (value: boolean) => {
-    const visibleNames = filteredPolicies.map((p) => p.name)
-    if (!visibleNames.length) return
-    setChecked((prev) =>
-      value
-        ? Array.from(new Set([...prev, ...visibleNames]))
-        : prev.filter((n) => !visibleNames.includes(n))
-    )
-  }
+  const toggleSelectAll = React.useCallback(
+    (value: boolean) => {
+      const visibleNames = filteredPolicies.map((p) => p.name)
+      if (!visibleNames.length) return
+      setChecked((prev) =>
+        value ? Array.from(new Set([...prev, ...visibleNames])) : prev.filter((n) => !visibleNames.includes(n)),
+      )
+    },
+    [filteredPolicies],
+  )
 
   const columns: ColumnDef<PolicyItem>[] = React.useMemo(
     () => [
@@ -78,13 +70,7 @@ export function UserGroupSetPoliciesMultiple({
         id: "select",
         header: () => (
           <Checkbox
-            checked={
-              allVisibleSelected
-                ? true
-                : checked.length > 0 && !allVisibleSelected
-                  ? "indeterminate"
-                  : false
-            }
+            checked={allVisibleSelected ? true : checked.length > 0 && !allVisibleSelected ? "indeterminate" : false}
             onCheckedChange={(v) => toggleSelectAll(v === true)}
           />
         ),
@@ -92,9 +78,7 @@ export function UserGroupSetPoliciesMultiple({
         cell: ({ row }) => (
           <Checkbox
             checked={isSelected(row.original.name)}
-            onCheckedChange={(v) =>
-              toggleSelection(row.original.name, v === true)
-            }
+            onCheckedChange={(v) => toggleSelection(row.original.name, v === true)}
           />
         ),
         meta: { maxWidth: "3rem" },
@@ -102,18 +86,14 @@ export function UserGroupSetPoliciesMultiple({
       {
         id: "name",
         header: () => t("Name"),
-        cell: ({ row }) => (
-          <span className="font-medium">{row.original.name}</span>
-        ),
+        cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
         filterFn: (row, _columnId, filterValue) => {
           if (!filterValue) return true
-          return row.original.name
-            .toLowerCase()
-            .includes(String(filterValue).toLowerCase())
+          return row.original.name.toLowerCase().includes(String(filterValue).toLowerCase())
         },
       },
     ],
-    [t, allVisibleSelected, checked]
+    [t, allVisibleSelected, checked, isSelected, toggleSelectAll, toggleSelection],
   )
 
   const { table } = useDataTable<PolicyItem>({
@@ -137,7 +117,7 @@ export function UserGroupSetPoliciesMultiple({
             Object.entries(res ?? {}).map(([key, content]) => ({
               name: key,
               content,
-            }))
+            })),
           )
         })
         .catch(() => message.error(t("Failed to get data")))
@@ -154,8 +134,8 @@ export function UserGroupSetPoliciesMultiple({
             policyName: checked,
             userOrGroup: item,
             isGroup: true,
-          })
-        )
+          }),
+        ),
       )
       message.success(t("Edit Success"))
       onOpenChange(false)
@@ -169,10 +149,7 @@ export function UserGroupSetPoliciesMultiple({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        className="sm:max-w-xl"
-        onPointerDownOutside={(e) => e.preventDefault()}
-      >
+      <DialogContent className="sm:max-w-xl" onPointerDownOutside={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>{t("Batch allocation policies")}</DialogTitle>
         </DialogHeader>
@@ -187,11 +164,7 @@ export function UserGroupSetPoliciesMultiple({
                 className="w-full"
               />
             </div>
-            <Button
-              variant="outline"
-              disabled={!checkedKeys.length || submitting}
-              onClick={changePolicies}
-            >
+            <Button variant="outline" disabled={!checkedKeys.length || submitting} onClick={changePolicies}>
               {t("Submit")}
             </Button>
           </div>
diff --git a/components/user/change-password.tsx b/components/user/change-password.tsx
index 6c16b426..0897262f 100644
--- a/components/user/change-password.tsx
+++ b/components/user/change-password.tsx
@@ -2,13 +2,7 @@
 
 import { useState } from "react"
 import { useTranslation } from "react-i18next"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Spinner } from "@/components/ui/spinner"
@@ -102,9 +96,7 @@ export function ChangePassword({ visible, onVisibleChange }: ChangePasswordProps
 
         <div className="space-y-4 py-4">
           <Field>
-            <FieldLabel htmlFor="password-current">
-              {t("Current Password")}
-            </FieldLabel>
+            <FieldLabel htmlFor="password-current">{t("Current Password")}</FieldLabel>
             <FieldContent>
               <Input
                 id="password-current"
@@ -114,11 +106,7 @@ export function ChangePassword({ visible, onVisibleChange }: ChangePasswordProps
                 autoComplete="off"
               />
             </FieldContent>
-            {errors.current && (
-              <FieldDescription className="text-destructive">
-                {errors.current}
-              </FieldDescription>
-            )}
+            {errors.current && <FieldDescription className="text-destructive">{errors.current}</FieldDescription>}
           </Field>
 
           <Field>
@@ -132,17 +120,11 @@ export function ChangePassword({ visible, onVisibleChange }: ChangePasswordProps
                 autoComplete="off"
               />
             </FieldContent>
-            {errors.new && (
-              <FieldDescription className="text-destructive">
-                {errors.new}
-              </FieldDescription>
-            )}
+            {errors.new && <FieldDescription className="text-destructive">{errors.new}</FieldDescription>}
           </Field>
 
           <Field>
-            <FieldLabel htmlFor="password-new-confirm">
-              {t("Confirm New Password")}
-            </FieldLabel>
+            <FieldLabel htmlFor="password-new-confirm">{t("Confirm New Password")}</FieldLabel>
             <FieldContent>
               <Input
                 id="password-new-confirm"
@@ -153,11 +135,7 @@ export function ChangePassword({ visible, onVisibleChange }: ChangePasswordProps
                 disabled={!newSecretKey}
               />
             </FieldContent>
-            {errors.reNew && (
-              <FieldDescription className="text-destructive">
-                {errors.reNew}
-              </FieldDescription>
-            )}
+            {errors.reNew && <FieldDescription className="text-destructive">{errors.reNew}</FieldDescription>}
           </Field>
         </div>
 
diff --git a/components/user/dropdown.tsx b/components/user/dropdown.tsx
index 7d36c421..54f8970e 100644
--- a/components/user/dropdown.tsx
+++ b/components/user/dropdown.tsx
@@ -7,12 +7,7 @@ import { useTranslation } from "react-i18next"
 import { RiUserLine, RiLockPasswordLine, RiLogoutBoxRLine, RiMore2Line } from "@remixicon/react"
 import { buildRoute } from "@/lib/routes"
 import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { useAuth } from "@/contexts/auth-context"
 import { usePermissions } from "@/hooks/use-permissions"
 import { useUsers } from "@/hooks/use-users"
@@ -63,9 +58,7 @@ export function UserDropdown() {
                 />
               </span>
             </div>
-            {!isCollapsed && (
-              <RiMore2Line className="h-4 w-4 text-muted-foreground" />
-            )}
+            {!isCollapsed && <RiMore2Line className="h-4 w-4 text-muted-foreground" />}
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent className="w-48" align="end" side="top">
@@ -73,9 +66,7 @@ export function UserDropdown() {
             <div className="flex cursor-default items-center gap-2">
               <RiUserLine className="h-4 w-4" />
               {!isAdmin ? (
-                <span>
-                  {(userInfo as { account_name?: string })?.account_name ?? ""}
-                </span>
+                <span>{(userInfo as { account_name?: string })?.account_name ?? ""}</span>
               ) : (
                 <span>rustfsAdmin</span>
               )}
@@ -94,10 +85,7 @@ export function UserDropdown() {
         </DropdownMenuContent>
       </DropdownMenu>
 
-      <ChangePassword
-        visible={changePasswordVisible}
-        onVisibleChange={setChangePasswordVisible}
-      />
+      <ChangePassword visible={changePasswordVisible} onVisibleChange={setChangePasswordVisible} />
     </>
   )
 }
diff --git a/components/user/edit-form.tsx b/components/user/edit-form.tsx
index 6f18f909..a80e47f3 100644
--- a/components/user/edit-form.tsx
+++ b/components/user/edit-form.tsx
@@ -4,12 +4,7 @@ import * as React from "react"
 import { useTranslation } from "react-i18next"
 import { Switch } from "@/components/ui/switch"
 import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { useUsers } from "@/hooks/use-users"
 
 interface UserRow {
@@ -71,7 +66,7 @@ export function UserEditForm({ open, onOpenChange, row, onSuccess }: UserEditFor
       setUser({
         accessKey: row.accessKey,
         memberOf: (row.memberOf as string[]) ?? [],
-        policy: Array.isArray(row.policy) ? row.policy : (row.policyName as string)?.split(",").filter(Boolean) ?? [],
+        policy: Array.isArray(row.policy) ? row.policy : ((row.policyName as string)?.split(",").filter(Boolean) ?? []),
         status: (row.status as string) ?? "enabled",
       })
       setLoading(true)
@@ -87,7 +82,7 @@ export function UserEditForm({ open, onOpenChange, row, onSuccess }: UserEditFor
         .catch(() => {})
         .finally(() => setLoading(false))
     }
-  }, [open, row?.accessKey])
+  }, [open, row, getUser])
 
   const handleStatusChange = async (checked: boolean) => {
     const nextStatus = checked ? "enabled" : "disabled"
@@ -119,11 +114,7 @@ export function UserEditForm({ open, onOpenChange, row, onSuccess }: UserEditFor
         <div className="space-y-4 max-h-[80vh] overflow-auto px-2 -mx-2">
           <div className="flex items-center justify-start gap-2 rounded-md border px-3 py-2">
             <span className="text-sm text-muted-foreground">{t("Status")}</span>
-            <Switch
-              checked={statusBoolean}
-              onCheckedChange={handleStatusChange}
-              disabled={loading}
-            />
+            <Switch checked={statusBoolean} onCheckedChange={handleStatusChange} disabled={loading} />
             <Button variant="outline" className="ml-auto" disabled>
               {t("Change Secret Key")} (Coming soon)
             </Button>
diff --git a/components/user/new-form.tsx b/components/user/new-form.tsx
index 1a7d8718..150c70d8 100644
--- a/components/user/new-form.tsx
+++ b/components/user/new-form.tsx
@@ -7,26 +7,9 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
 import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command"
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Spinner } from "@/components/ui/spinner"
 import { useMessage } from "@/lib/feedback/message"
 import { useUsers } from "@/hooks/use-users"
@@ -66,28 +49,20 @@ export function UserNewForm({ open, onOpenChange, onSuccess }: UserNewFormProps)
       setPolicies([])
       setErrors({ accessKey: "", secretKey: "" })
       Promise.all([
-        listGroup().then((res: string[]) =>
-          setGroupsList((res ?? []).map((g) => ({ label: g, value: g })))
-        ),
+        listGroup().then((res: string[]) => setGroupsList((res ?? []).map((g) => ({ label: g, value: g })))),
         listPolicies().then((res: Record<string, unknown>) =>
-          setPoliciesList(
-            Object.keys(res ?? {}).map((p) => ({ label: p, value: p }))
-          )
+          setPoliciesList(Object.keys(res ?? {}).map((p) => ({ label: p, value: p }))),
         ),
       ]).catch(() => {})
     }
   }, [open, listGroup, listPolicies])
 
   const toggleGroup = (value: string) => {
-    setGroups((prev) =>
-      prev.includes(value) ? prev.filter((g) => g !== value) : [...prev, value]
-    )
+    setGroups((prev) => (prev.includes(value) ? prev.filter((g) => g !== value) : [...prev, value]))
   }
 
   const togglePolicy = (value: string) => {
-    setPolicies((prev) =>
-      prev.includes(value) ? prev.filter((p) => p !== value) : [...prev, value]
-    )
+    setPolicies((prev) => (prev.includes(value) ? prev.filter((p) => p !== value) : [...prev, value]))
   }
 
   const closeModal = () => onOpenChange(false)
@@ -138,8 +113,8 @@ export function UserNewForm({ open, onOpenChange, onSuccess }: UserNewFormProps)
               members: [accessKey.trim()],
               isRemove: false,
               groupStatus: "enabled",
-            })
-          )
+            }),
+          ),
         )
       }
 
@@ -178,9 +153,7 @@ export function UserNewForm({ open, onOpenChange, onSuccess }: UserNewFormProps)
                   autoComplete="new-user-access-key"
                 />
               </FieldContent>
-              {errors.accessKey && (
-                <FieldDescription className="text-destructive">{errors.accessKey}</FieldDescription>
-              )}
+              {errors.accessKey && <FieldDescription className="text-destructive">{errors.accessKey}</FieldDescription>}
             </Field>
 
             <Field>
@@ -195,9 +168,7 @@ export function UserNewForm({ open, onOpenChange, onSuccess }: UserNewFormProps)
                   autoComplete="new-user-password"
                 />
               </FieldContent>
-              {errors.secretKey && (
-                <FieldDescription className="text-destructive">{errors.secretKey}</FieldDescription>
-              )}
+              {errors.secretKey && <FieldDescription className="text-destructive">{errors.secretKey}</FieldDescription>}
             </Field>
           </div>
 
@@ -212,9 +183,7 @@ export function UserNewForm({ open, onOpenChange, onSuccess }: UserNewFormProps)
                     className="min-h-10 justify-between gap-2"
                     aria-label={t("Groups")}
                   >
-                    <span className="truncate">
-                      {groups.length ? groups.join(", ") : t("Select Group")}
-                    </span>
+                    <span className="truncate">{groups.length ? groups.join(", ") : t("Select Group")}</span>
                     <RiArrowDownSLine className="size-4 text-muted-foreground" />
                   </Button>
                 </PopoverTrigger>
@@ -283,7 +252,10 @@ export function UserNewForm({ open, onOpenChange, onSuccess }: UserNewFormProps)
                             onSelect={() => togglePolicy(option.value)}
                           >
                             <RiCheckLine
-                              className={cn("mr-2 size-4", policies.includes(option.value) ? "opacity-100" : "opacity-0")}
+                              className={cn(
+                                "mr-2 size-4",
+                                policies.includes(option.value) ? "opacity-100" : "opacity-0",
+                              )}
                             />
                             <span>{option.label}</span>
                           </CommandItem>
diff --git a/components/user/notice.tsx b/components/user/notice.tsx
index 0b913ea8..f10ac72d 100644
--- a/components/user/notice.tsx
+++ b/components/user/notice.tsx
@@ -2,13 +2,7 @@
 
 import * as React from "react"
 import { useTranslation } from "react-i18next"
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Button } from "@/components/ui/button"
 import { Field, FieldContent, FieldLabel } from "@/components/ui/field"
 import { CopyInput } from "@/components/copy-input"
@@ -46,7 +40,7 @@ export function UserNotice({ open, onOpenChange, data, onClose }: UserNoticeProp
         secretKey,
         api: "s3v4",
         path: "auto",
-      })
+      }),
     )
     closeModal()
   }, [url, accessKey, secretKey, closeModal])
@@ -66,23 +60,13 @@ export function UserNotice({ open, onOpenChange, data, onClose }: UserNoticeProp
           <Field>
             <FieldLabel>{t("Access Key")}</FieldLabel>
             <FieldContent>
-              <CopyInput
-                value={accessKey}
-                readOnly
-                copyIcon
-                className="w-full"
-              />
+              <CopyInput value={accessKey} readOnly copyIcon className="w-full" />
             </FieldContent>
           </Field>
           <Field>
             <FieldLabel>{t("Secret Key")}</FieldLabel>
             <FieldContent>
-              <CopyInput
-                value={secretKey}
-                readOnly
-                copyIcon
-                className="w-full"
-              />
+              <CopyInput value={secretKey} readOnly copyIcon className="w-full" />
             </FieldContent>
           </Field>
         </div>
diff --git a/components/user/selector.tsx b/components/user/selector.tsx
index eeea4c2d..0dd92a14 100644
--- a/components/user/selector.tsx
+++ b/components/user/selector.tsx
@@ -5,19 +5,8 @@ import { useTranslation } from "react-i18next"
 import { RiArrowDownSLine, RiCheckLine } from "@remixicon/react"
 import { Button } from "@/components/ui/button"
 import { Field, FieldContent, FieldLabel } from "@/components/ui/field"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
 import { useMessage } from "@/lib/feedback/message"
 import { useUsers } from "@/hooks/use-users"
 import { cn } from "@/lib/utils"
@@ -53,7 +42,7 @@ export function UserSelector({
             Object.entries(res ?? {}).map(([username]) => ({
               label: username,
               value: username,
-            }))
+            })),
           )
         })
         .catch(() => message.error(t("Failed to get data")))
@@ -64,9 +53,7 @@ export function UserSelector({
   const displayPlaceholder = placeholder ?? t("Select user group members")
 
   const toggleUser = (v: string) => {
-    onChange(
-      value.includes(v) ? value.filter((item) => item !== v) : [...value, v]
-    )
+    onChange(value.includes(v) ? value.filter((item) => item !== v) : [...value, v])
   }
 
   return (
@@ -82,9 +69,7 @@ export function UserSelector({
               disabled={disabled}
               aria-label={displayLabel}
             >
-              <span className="truncate">
-                {value.length ? value.join(", ") : displayPlaceholder}
-              </span>
+              <span className="truncate">{value.length ? value.join(", ") : displayPlaceholder}</span>
               <RiArrowDownSLine className="size-4 text-muted-foreground" />
             </Button>
           </PopoverTrigger>
@@ -95,16 +80,9 @@ export function UserSelector({
                 <CommandEmpty>{t("No Data")}</CommandEmpty>
                 <CommandGroup>
                   {users.map((option) => (
-                    <CommandItem
-                      key={option.value}
-                      value={option.label}
-                      onSelect={() => toggleUser(option.value)}
-                    >
+                    <CommandItem key={option.value} value={option.label} onSelect={() => toggleUser(option.value)}>
                       <RiCheckLine
-                        className={cn(
-                          "mr-2 size-4",
-                          value.includes(option.value) ? "opacity-100" : "opacity-0"
-                        )}
+                        className={cn("mr-2 size-4", value.includes(option.value) ? "opacity-100" : "opacity-0")}
                       />
                       <span>{option.label}</span>
                     </CommandItem>
diff --git a/config/navs.ts b/config/navs.ts
index 3a02a4f4..a037af7f 100644
--- a/config/navs.ts
+++ b/config/navs.ts
@@ -42,8 +42,8 @@ export default [
     isAdminOnly: true,
   },
   {
-    label: "Performance",
-    to: "/performance",
+    label: "Running Status",
+    to: "/status",
     icon: "ri:bar-chart-box-line",
     isAdminOnly: true,
   },
diff --git a/contexts/api-context.tsx b/contexts/api-context.tsx
index 7a9baf82..2e749c74 100644
--- a/contexts/api-context.tsx
+++ b/contexts/api-context.tsx
@@ -71,13 +71,9 @@ export function ApiProvider({ children }: { children: React.ReactNode }) {
     return () => {
       cancelled = true
     }
-  }, [isAuthenticated, credentials?.AccessKeyId, logout])
+  }, [isAuthenticated, credentials?.AccessKeyId, credentials?.SecretAccessKey, credentials?.SessionToken, logout])
 
-  return (
-    <ApiContext.Provider value={{ api: apiClient, isReady }}>
-      {children}
-    </ApiContext.Provider>
-  )
+  return <ApiContext.Provider value={{ api: apiClient, isReady }}>{children}</ApiContext.Provider>
 }
 
 export function useApi() {
diff --git a/contexts/auth-context.tsx b/contexts/auth-context.tsx
index 2453185b..719e9d66 100644
--- a/contexts/auth-context.tsx
+++ b/contexts/auth-context.tsx
@@ -1,12 +1,6 @@
 "use client"
 
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  type ReactNode,
-} from "react"
+import { createContext, useCallback, useContext, useMemo, type ReactNode } from "react"
 import type { AwsCredentialIdentity, AwsCredentialIdentityProvider } from "@aws-sdk/types"
 import { getStsToken } from "@/lib/sts"
 import type { SiteConfig } from "@/types/config"
@@ -23,7 +17,7 @@ interface Credentials {
 interface AuthContextValue {
   login: (
     credentials: AwsCredentialIdentity | AwsCredentialIdentityProvider,
-    customConfig?: SiteConfig
+    customConfig?: SiteConfig,
   ) => Promise<unknown>
   logout: () => void
   logoutAndRedirect: () => void
@@ -46,30 +40,27 @@ function isValidCredentials(credentials: Credentials): boolean {
   ) {
     return false
   }
-  const isExpired = (exp: string) =>
-    exp ? new Date(exp) < new Date() : false
+  const isExpired = (exp: string) => (exp ? new Date(exp) < new Date() : false)
   return !isExpired(credentials.Expiration)
 }
 
 export function AuthProvider({ children }: { children: ReactNode }) {
   const [store, setStore] = useLocalStorage<Credentials>("auth.credentials", {})
-  const [isAdminStore, setIsAdminStore] = useLocalStorage<boolean>(
-    "auth.isAdmin",
-    false
-  )
-  const [permanentStore, setPermanentStore] = useLocalStorage<
-    Credentials | undefined
-  >("auth.permanent", undefined)
+  const [isAdminStore, setIsAdminStore] = useLocalStorage<boolean>("auth.isAdmin", false)
+  const [permanentStore, setPermanentStore] = useLocalStorage<Credentials | undefined>("auth.permanent", undefined)
 
-  const setCredentials = useCallback((credentials: Credentials) => {
-    setStore(credentials)
-  }, [setStore])
+  const setCredentials = useCallback(
+    (credentials: Credentials) => {
+      setStore(credentials)
+    },
+    [setStore],
+  )
 
   const setPermanentCredentials = useCallback(
     (credentials: Credentials) => {
       setPermanentStore(credentials)
     },
-    [setPermanentStore]
+    [setPermanentStore],
   )
 
   const getCredentials = useCallback(() => {
@@ -81,7 +72,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     (value: boolean) => {
       setIsAdminStore(value)
     },
-    [setIsAdminStore]
+    [setIsAdminStore],
   )
 
   const getIsAdmin = useCallback(() => {
@@ -89,20 +80,13 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   }, [isAdminStore])
 
   const login = useCallback(
-    async (
-      credentials: AwsCredentialIdentity | AwsCredentialIdentityProvider,
-      customConfig?: SiteConfig
-    ) => {
+    async (credentials: AwsCredentialIdentity | AwsCredentialIdentityProvider, customConfig?: SiteConfig) => {
       if (!customConfig) {
         const { configManager } = await import("@/lib/config")
         customConfig = await configManager.loadConfig()
       }
 
-      const credentialsResponse = await getStsToken(
-        credentials,
-        "arn:aws:iam::*:role/Admin",
-        customConfig
-      )
+      const credentialsResponse = await getStsToken(credentials, "arn:aws:iam::*:role/Admin", customConfig)
 
       setCredentials({
         ...credentialsResponse,
@@ -112,10 +96,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         Expiration: credentialsResponse.Expiration?.toISOString(),
       })
 
-      if (
-        typeof credentials === "object" &&
-        !("sessionToken" in credentials && credentials.sessionToken)
-      ) {
+      if (typeof credentials === "object" && !("sessionToken" in credentials && credentials.sessionToken)) {
         setPermanentCredentials({
           AccessKeyId: credentials.accessKeyId,
           SecretAccessKey: credentials.secretAccessKey,
@@ -126,11 +107,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
       return credentialsResponse
     },
-    [
-      setCredentials,
-      setPermanentCredentials,
-      setPermanentStore,
-    ]
+    [setCredentials, setPermanentCredentials, setPermanentStore],
   )
 
   const logout = useCallback(() => {
@@ -163,16 +140,16 @@ export function AuthProvider({ children }: { children: ReactNode }) {
       login,
       logout,
       logoutAndRedirect,
+      setIsAdmin,
+      getIsAdmin,
       credentials,
       permanentStore,
       isAuthenticated,
       isAdminStore,
-    ]
+    ],
   )
 
-  return (
-    <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
-  )
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
 }
 
 export function useAuth() {
diff --git a/contexts/s3-context.tsx b/contexts/s3-context.tsx
index a42d8f19..d2c2803d 100644
--- a/contexts/s3-context.tsx
+++ b/contexts/s3-context.tsx
@@ -115,7 +115,7 @@ export function S3Provider({ children }: { children: React.ReactNode }) {
     return () => {
       cancelled = true
     }
-  }, [isAuthenticated, credentials?.AccessKeyId, logout])
+  }, [isAuthenticated, credentials?.AccessKeyId, credentials?.SecretAccessKey, credentials?.SessionToken, logout])
 
   return <S3Context.Provider value={{ client: s3Client, isReady }}>{children}</S3Context.Provider>
 }
diff --git a/contexts/task-context.tsx b/contexts/task-context.tsx
index f35dba36..9cf8c6c9 100644
--- a/contexts/task-context.tsx
+++ b/contexts/task-context.tsx
@@ -41,12 +41,7 @@ const emptyManager = {
 const TaskContext = React.createContext<{
   taskManager: TaskManager<AnyTask, string>
   addUploadFiles: (items: { file: File; key: string }[], bucketName: string) => void
-  addDeleteKeys: (
-    keys: string[],
-    bucketName: string,
-    prefix?: string,
-    options?: { forceDelete?: boolean }
-  ) => void
+  addDeleteKeys: (keys: string[], bucketName: string, prefix?: string, options?: { forceDelete?: boolean }) => void
   isTaskPanelOpen: boolean
   setTaskPanelOpen: (open: boolean) => void
 }>({
@@ -101,29 +96,24 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
       const activeKeys = new Set(
         allTasks
           .filter((t) => ["pending", "running", "failed", "paused"].includes(t.status))
-          .map((t) => `${t.bucketName ?? ""}/${t.key ?? ""}`)
+          .map((t) => `${t.bucketName ?? ""}/${t.key ?? ""}`),
       )
       const newTasks = uploadHelpers
         .createTasks(items, bucketName)
         .filter((t) => !activeKeys.has(`${t.bucketName}/${t.key}`))
       manager.enqueue(newTasks as AnyTask[])
     },
-    [managerState]
+    [managerState],
   )
 
   const addDeleteKeys = React.useCallback(
-    (
-      keys: string[],
-      bucketName: string,
-      prefix?: string,
-      options?: { forceDelete?: boolean }
-    ) => {
+    (keys: string[], bucketName: string, prefix?: string, options?: { forceDelete?: boolean }) => {
       if (!managerState) return
       const { manager, deleteHelpers } = managerState
       const newTasks = deleteHelpers.createTasks(keys, bucketName, prefix, options)
       manager.enqueue(newTasks as AnyTask[])
     },
-    [managerState]
+    [managerState],
   )
 
   const value = React.useMemo(
@@ -134,7 +124,7 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
       isTaskPanelOpen,
       setTaskPanelOpen,
     }),
-    [taskManager, addUploadFiles, addDeleteKeys, isTaskPanelOpen]
+    [taskManager, addUploadFiles, addDeleteKeys, isTaskPanelOpen],
   )
 
   return <TaskContext.Provider value={value}>{children}</TaskContext.Provider>
@@ -150,7 +140,7 @@ export function useTasks() {
   const tasks = useSyncExternalStore(
     (cb) => taskManager.subscribe(cb),
     () => taskManager.getTasks(),
-    () => taskManager.getTasks()
+    () => taskManager.getTasks(),
   )
   return tasks as AnyTask[]
 }
diff --git a/hooks/use-access-keys.ts b/hooks/use-access-keys.ts
index 87d6a5d0..ed5710d8 100644
--- a/hooks/use-access-keys.ts
+++ b/hooks/use-access-keys.ts
@@ -12,42 +12,42 @@ export function useAccessKeys() {
       const url = query ? `/list-service-accounts?${query}` : "/list-service-accounts"
       return api.get(url)
     },
-    [api]
+    [api],
   )
 
   const createServiceAccount = useCallback(
     async (data: Record<string, unknown>) => {
       return api.put("/add-service-accounts", data)
     },
-    [api]
+    [api],
   )
 
   const getServiceAccount = useCallback(
     async (name: string) => {
       return api.get(`/info-service-account?accessKey=${encodeURIComponent(name)}`)
     },
-    [api]
+    [api],
   )
 
   const updateServiceAccount = useCallback(
     async (name: string, data: Record<string, unknown>) => {
       return api.post(`/update-service-account?accessKey=${encodeURIComponent(name)}`, data)
     },
-    [api]
+    [api],
   )
 
   const deleteServiceAccount = useCallback(
     async (name: string) => {
       return api.delete(`/delete-service-accounts?accessKey=${encodeURIComponent(name)}`)
     },
-    [api]
+    [api],
   )
 
   const createServiceAccountCreds = useCallback(
     async (data: Record<string, unknown>) => {
       return api.post("/service-account-credentials", data)
     },
-    [api]
+    [api],
   )
 
   return {
diff --git a/hooks/use-bucket.ts b/hooks/use-bucket.ts
index 41d3d5b7..9d4c98b6 100644
--- a/hooks/use-bucket.ts
+++ b/hooks/use-bucket.ts
@@ -1,6 +1,6 @@
-"use client";
+"use client"
 
-import { useCallback } from "react";
+import { useCallback } from "react"
 import {
   CreateBucketCommand,
   DeleteBucketCommand,
@@ -15,6 +15,7 @@ import {
   GetObjectRetentionCommand,
   HeadBucketCommand,
   ListBucketsCommand,
+  type ListBucketsCommandOutput,
   PutBucketEncryptionCommand,
   PutBucketLifecycleConfigurationCommand,
   PutBucketPolicyCommand,
@@ -31,45 +32,96 @@ import {
   GetBucketNotificationConfigurationCommand,
   MFADelete,
   BucketVersioningStatus,
-} from "@aws-sdk/client-s3";
-import { useS3 } from "@/contexts/s3-context";
-import { useApi } from "@/contexts/api-context";
+  type S3Client,
+} from "@aws-sdk/client-s3"
+import { useS3 } from "@/contexts/s3-context"
+import { useApi } from "@/contexts/api-context"
+
+const BUCKETS_CACHE_DURATION = 10000
+let listBucketsCache: ListBucketsCommandOutput | null = null
+let listBucketsCacheTime = 0
+let listBucketsPromise: Promise<ListBucketsCommandOutput> | null = null
+let listBucketsClient: S3Client | null = null
+
+const invalidateBucketsCache = () => {
+  listBucketsCache = null
+  listBucketsCacheTime = 0
+}
 
-export function useBucket() {
-  const client = useS3();
-  const api = useApi();
+const ensureBucketsClient = (client: S3Client) => {
+  if (listBucketsClient !== client) {
+    listBucketsClient = client
+    listBucketsCache = null
+    listBucketsCacheTime = 0
+    listBucketsPromise = null
+  }
+}
 
-  const listBuckets = useCallback(async () => {
-    return client.send(new ListBucketsCommand({}));
-  }, [client]);
+export function useBucket() {
+  const client = useS3()
+  const api = useApi()
+
+  const listBuckets = useCallback(
+    async (options?: { force?: boolean }) => {
+      ensureBucketsClient(client)
+
+      if (options?.force) {
+        invalidateBucketsCache()
+      }
+
+      const now = Date.now()
+      if (!options?.force && listBucketsCache && now - listBucketsCacheTime < BUCKETS_CACHE_DURATION) {
+        return listBucketsCache
+      }
+
+      if (listBucketsPromise) {
+        return listBucketsPromise
+      }
+
+      listBucketsPromise = client.send(new ListBucketsCommand({})) as Promise<ListBucketsCommandOutput>
+      try {
+        const result = await listBucketsPromise
+        listBucketsCache = result
+        listBucketsCacheTime = Date.now()
+        return result
+      } finally {
+        listBucketsPromise = null
+      }
+    },
+    [client],
+  )
 
   const createBucket = useCallback(
     async (params: { Bucket: string; ObjectLockEnabledForBucket?: boolean }) => {
-      return client.send(new CreateBucketCommand(params));
+      const result = await client.send(new CreateBucketCommand(params))
+      invalidateBucketsCache()
+      return result
     },
-    [client]
-  );
+    [client],
+  )
 
   const headBucket = useCallback(
     async (bucket: string) => {
-      return client.send(new HeadBucketCommand({ Bucket: bucket }));
+      return client.send(new HeadBucketCommand({ Bucket: bucket }))
     },
-    [client]
-  );
+    [client],
+  )
 
   const deleteBucket = useCallback(
     async (bucket: string) => {
-      return client.send(new DeleteBucketCommand({ Bucket: bucket }));
+      const result = await client.send(new DeleteBucketCommand({ Bucket: bucket }))
+      invalidateBucketsCache()
+      return result
     },
-    [client]
-  );
+    [client],
+  )
 
   const getBucketTagging = useCallback(
     async (bucket: string) => {
-      return client.send(new GetBucketTaggingCommand({ Bucket: bucket }));
+      return client.send(new GetBucketTaggingCommand({ Bucket: bucket }))
     },
-    [client]
-  );
+    [client],
+  )
 
   const putBucketTagging = useCallback(
     async (bucket: string, tagging: unknown) => {
@@ -77,18 +129,18 @@ export function useBucket() {
         new PutBucketTaggingCommand({
           Bucket: bucket,
           Tagging: tagging as never,
-        })
-      );
+        }),
+      )
     },
-    [client]
-  );
+    [client],
+  )
 
   const deleteBucketTagging = useCallback(
     async (bucket: string) => {
-      return client.send(new DeleteBucketTaggingCommand({ Bucket: bucket }));
+      return client.send(new DeleteBucketTaggingCommand({ Bucket: bucket }))
     },
-    [client]
-  );
+    [client],
+  )
 
   const putBucketVersioning = useCallback(
     async (bucket: string, status: string) => {
@@ -96,56 +148,49 @@ export function useBucket() {
         new PutBucketVersioningCommand({
           Bucket: bucket,
           VersioningConfiguration: {
-            Status:
-              status === "Enabled"
-                ? BucketVersioningStatus.Enabled
-                : BucketVersioningStatus.Suspended,
+            Status: status === "Enabled" ? BucketVersioningStatus.Enabled : BucketVersioningStatus.Suspended,
             MFADelete: MFADelete.Enabled,
           },
-        })
-      );
+        }),
+      )
     },
-    [client]
-  );
+    [client],
+  )
 
   const getBucketVersioning = useCallback(
     async (bucket: string) => {
-      return client.send(new GetBucketVersioningCommand({ Bucket: bucket }));
+      return client.send(new GetBucketVersioningCommand({ Bucket: bucket }))
     },
-    [client]
-  );
+    [client],
+  )
 
   const getBucketPolicy = useCallback(
     async (bucket: string) => {
-      return client.send(new GetBucketPolicyCommand({ Bucket: bucket }));
+      return client.send(new GetBucketPolicyCommand({ Bucket: bucket }))
     },
-    [client]
-  );
+    [client],
+  )
 
   const getBucketPolicyStatus = useCallback(
     async (bucket: string) => {
-      return client.send(new GetBucketPolicyStatusCommand({ Bucket: bucket }));
+      return client.send(new GetBucketPolicyStatusCommand({ Bucket: bucket }))
     },
-    [client]
-  );
+    [client],
+  )
 
   const putBucketPolicy = useCallback(
     async (bucket: string, policy: string) => {
-      return client.send(
-        new PutBucketPolicyCommand({ Bucket: bucket, Policy: policy })
-      );
+      return client.send(new PutBucketPolicyCommand({ Bucket: bucket, Policy: policy }))
     },
-    [client]
-  );
+    [client],
+  )
 
   const getObjectLockConfiguration = useCallback(
     async (bucket: string) => {
-      return client.send(
-        new GetObjectLockConfigurationCommand({ Bucket: bucket })
-      );
+      return client.send(new GetObjectLockConfigurationCommand({ Bucket: bucket }))
     },
-    [client]
-  );
+    [client],
+  )
 
   const putObjectLockConfiguration = useCallback(
     async (bucket: string, objectLockConfiguration: unknown) => {
@@ -153,20 +198,18 @@ export function useBucket() {
         new PutObjectLockConfigurationCommand({
           Bucket: bucket,
           ObjectLockConfiguration: objectLockConfiguration as never,
-        })
-      );
+        }),
+      )
     },
-    [client]
-  );
+    [client],
+  )
 
   const getBucketLifecycleConfiguration = useCallback(
     async (bucket: string) => {
-      return client.send(
-        new GetBucketLifecycleConfigurationCommand({ Bucket: bucket })
-      );
+      return client.send(new GetBucketLifecycleConfigurationCommand({ Bucket: bucket }))
     },
-    [client]
-  );
+    [client],
+  )
 
   const putBucketLifecycleConfiguration = useCallback(
     async (bucket: string, lifecycleConfiguration: unknown) => {
@@ -174,18 +217,18 @@ export function useBucket() {
         new PutBucketLifecycleConfigurationCommand({
           Bucket: bucket,
           LifecycleConfiguration: lifecycleConfiguration as never,
-        })
-      );
+        }),
+      )
     },
-    [client]
-  );
+    [client],
+  )
 
   const deleteBucketLifecycle = useCallback(
     async (bucket: string) => {
-      return client.send(new DeleteBucketLifecycleCommand({ Bucket: bucket }));
+      return client.send(new DeleteBucketLifecycleCommand({ Bucket: bucket }))
     },
-    [client]
-  );
+    [client],
+  )
 
   const putObjectRetention = useCallback(
     async (bucket: string, key: string, retention: unknown) => {
@@ -194,27 +237,25 @@ export function useBucket() {
           Bucket: bucket,
           Key: key,
           Retention: retention as never,
-        })
-      );
+        }),
+      )
     },
-    [client]
-  );
+    [client],
+  )
 
   const getObjectRetention = useCallback(
     async (bucket: string, key: string) => {
-      return client.send(
-        new GetObjectRetentionCommand({ Bucket: bucket, Key: key })
-      );
+      return client.send(new GetObjectRetentionCommand({ Bucket: bucket, Key: key }))
     },
-    [client]
-  );
+    [client],
+  )
 
   const getBucketEncryption = useCallback(
     async (bucket: string) => {
-      return client.send(new GetBucketEncryptionCommand({ Bucket: bucket }));
+      return client.send(new GetBucketEncryptionCommand({ Bucket: bucket }))
     },
-    [client]
-  );
+    [client],
+  )
 
   const putBucketEncryption = useCallback(
     async (bucket: string, encryption: unknown) => {
@@ -222,25 +263,25 @@ export function useBucket() {
         new PutBucketEncryptionCommand({
           Bucket: bucket,
           ServerSideEncryptionConfiguration: encryption as never,
-        })
-      );
+        }),
+      )
     },
-    [client]
-  );
+    [client],
+  )
 
   const deleteBucketEncryption = useCallback(
     async (bucket: string) => {
-      return client.send(new DeleteBucketEncryptionCommand({ Bucket: bucket }));
+      return client.send(new DeleteBucketEncryptionCommand({ Bucket: bucket }))
     },
-    [client]
-  );
+    [client],
+  )
 
   const getBucketReplication = useCallback(
     async (bucket: string) => {
-      return client.send(new GetBucketReplicationCommand({ Bucket: bucket }));
+      return client.send(new GetBucketReplicationCommand({ Bucket: bucket }))
     },
-    [client]
-  );
+    [client],
+  )
 
   const putBucketReplication = useCallback(
     async (bucket: string, replication: unknown) => {
@@ -248,46 +289,39 @@ export function useBucket() {
         new PutBucketReplicationCommand({
           Bucket: bucket,
           ReplicationConfiguration: replication as never,
-        })
-      );
+        }),
+      )
     },
-    [client]
-  );
+    [client],
+  )
 
   const deleteBucketReplication = useCallback(
     async (bucket: string) => {
-      return client.send(new DeleteBucketReplicationCommand({ Bucket: bucket }));
+      return client.send(new DeleteBucketReplicationCommand({ Bucket: bucket }))
     },
-    [client]
-  );
+    [client],
+  )
 
   const deleteRemoteReplicationTarget = useCallback(
     async (bucket: string, arn: string) => {
-      return api.delete(
-        `/remove-remote-target?bucket=${bucket}&arn=${encodeURIComponent(arn)}`
-      );
+      return api.delete(`/remove-remote-target?bucket=${bucket}&arn=${encodeURIComponent(arn)}`)
     },
-    [api]
-  );
+    [api],
+  )
 
   const setRemoteReplicationTarget = useCallback(
     async (bucket: string, data: unknown) => {
-      return api.put(
-        `/set-remote-target?bucket=${encodeURIComponent(bucket)}`,
-        data
-      );
+      return api.put(`/set-remote-target?bucket=${encodeURIComponent(bucket)}`, data)
     },
-    [api]
-  );
+    [api],
+  )
 
   const listBucketNotifications = useCallback(
     async (bucket: string) => {
-      return client.send(
-        new GetBucketNotificationConfigurationCommand({ Bucket: bucket })
-      );
+      return client.send(new GetBucketNotificationConfigurationCommand({ Bucket: bucket }))
     },
-    [client]
-  );
+    [client],
+  )
 
   const putBucketNotifications = useCallback(
     async (bucket: string, data: unknown) => {
@@ -295,32 +329,20 @@ export function useBucket() {
         new PutBucketNotificationConfigurationCommand({
           Bucket: bucket,
           NotificationConfiguration: data as never,
-        })
-      );
+        }),
+      )
     },
-    [client]
-  );
+    [client],
+  )
 
-  const getBucketQuota = useCallback(
-    async (bucket: string) => api.get(`/quota/${bucket}`),
-    [api]
-  );
+  const getBucketQuota = useCallback(async (bucket: string) => api.get(`/quota/${bucket}`), [api])
   const putBucketQuota = useCallback(
     async (bucket: string, quota: unknown) => api.put(`/quota/${bucket}`, quota),
-    [api]
-  );
-  const deleteBucketQuota = useCallback(
-    async (bucket: string) => api.delete(`/quota/${bucket}`),
-    [api]
-  );
-  const getBucketQuotaUsage = useCallback(
-    async (bucket: string) => api.get(`/quota-stats/${bucket}`),
-    [api]
-  );
-  const checkBucketQuota = useCallback(
-    async (bucket: string) => api.get(`/quota-check/${bucket}`),
-    [api]
-  );
+    [api],
+  )
+  const deleteBucketQuota = useCallback(async (bucket: string) => api.delete(`/quota/${bucket}`), [api])
+  const getBucketQuotaUsage = useCallback(async (bucket: string) => api.get(`/quota-stats/${bucket}`), [api])
+  const checkBucketQuota = useCallback(async (bucket: string) => api.get(`/quota-check/${bucket}`), [api])
 
   return {
     listBuckets,
@@ -357,5 +379,5 @@ export function useBucket() {
     deleteBucketQuota,
     getBucketQuotaUsage,
     checkBucketQuota,
-  };
+  }
 }
diff --git a/hooks/use-data-table.tsx b/hooks/use-data-table.tsx
index 6d7ecf04..6ceb5f4a 100644
--- a/hooks/use-data-table.tsx
+++ b/hooks/use-data-table.tsx
@@ -61,9 +61,7 @@ function createSelectColumn<TData extends RowData>(): ColumnDef<TData> {
   }
 }
 
-export function useDataTable<TData extends RowData>(
-  options: UseDataTableOptions<TData>
-): UseDataTableReturn<TData> {
+export function useDataTable<TData extends RowData>(options: UseDataTableOptions<TData>): UseDataTableReturn<TData> {
   const [sorting, setSorting] = useState<SortingState>(options.initialSorting ?? [])
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
@@ -80,6 +78,7 @@ export function useDataTable<TData extends RowData>(
     return base
   }, [options.columns, options.enableRowSelection])
 
+  // eslint-disable-next-line react-hooks/incompatible-library -- tanstack table hook is required for table state
   const table = useReactTable({
     data: options.data,
     columns,
diff --git a/hooks/use-event-target.ts b/hooks/use-event-target.ts
index 3607c467..879a949d 100644
--- a/hooks/use-event-target.ts
+++ b/hooks/use-event-target.ts
@@ -17,24 +17,17 @@ export function useEventTarget() {
   }, [api])
 
   const updateEventTarget = useCallback(
-    async (
-      targetType: string,
-      targetName: string,
-      targetData: Record<string, unknown>
-    ) => {
-      return api.put(
-        `/target/${targetType}/${targetName}`,
-        targetData
-      )
+    async (targetType: string, targetName: string, targetData: Record<string, unknown>) => {
+      return api.put(`/target/${targetType}/${targetName}`, targetData)
     },
-    [api]
+    [api],
   )
 
   const deleteEventTarget = useCallback(
     async (targetType: string, targetName: string) => {
       return api.delete(`/target/${targetType}/${targetName}/reset`)
     },
-    [api]
+    [api],
   )
 
   const getEventTargetArnList = useCallback(async () => {
diff --git a/hooks/use-groups.ts b/hooks/use-groups.ts
index 9e0866d7..98706106 100644
--- a/hooks/use-groups.ts
+++ b/hooks/use-groups.ts
@@ -8,41 +8,27 @@ export function useGroups() {
 
   const listGroup = useCallback(async () => api.get("/groups"), [api])
 
-  const getGroup = useCallback(
-    async (name: string) => api.get(`/group?group=${encodeURIComponent(name)}`),
-    [api]
-  )
+  const getGroup = useCallback(async (name: string) => api.get(`/group?group=${encodeURIComponent(name)}`), [api])
 
-  const createGroup = useCallback(
-    async (data: Record<string, unknown>) => api.post("/groups", data),
-    [api]
-  )
+  const createGroup = useCallback(async (data: Record<string, unknown>) => api.post("/groups", data), [api])
 
-  const removeGroup = useCallback(
-    async (name: string) => api.delete(`/group/${encodeURIComponent(name)}`),
-    [api]
-  )
+  const removeGroup = useCallback(async (name: string) => api.delete(`/group/${encodeURIComponent(name)}`), [api])
 
   const updateGroup = useCallback(
-    async (name: string, data: Record<string, unknown>) =>
-      api.put(`/group/${encodeURIComponent(name)}`, data),
-    [api]
+    async (name: string, data: Record<string, unknown>) => api.put(`/group/${encodeURIComponent(name)}`, data),
+    [api],
   )
 
   const updateGroupStatus = useCallback(
     async (name: string, data: { status: string }) =>
       api.put(`/set-group-status?group=${encodeURIComponent(name)}&status=${data.status}`, data),
-    [api]
+    [api],
   )
 
   const updateGroupMembers = useCallback(
-    async (data: {
-      group: string
-      members: string[]
-      isRemove: boolean
-      groupStatus?: string
-    }) => api.put("/update-group-members", data),
-    [api]
+    async (data: { group: string; members: string[]; isRemove: boolean; groupStatus?: string }) =>
+      api.put("/update-group-members", data),
+    [api],
   )
 
   return {
diff --git a/hooks/use-import-export.ts b/hooks/use-import-export.ts
index d43fee87..7a11ac9b 100644
--- a/hooks/use-import-export.ts
+++ b/hooks/use-import-export.ts
@@ -22,7 +22,7 @@ export function useImportExport() {
           method: "GET",
           headers: { Accept: "application/zip" },
         },
-        false
+        false,
       )
 
       if (!response || !(response instanceof Response)) {
@@ -45,9 +45,7 @@ export function useImportExport() {
       message.success(t("IAM configuration exported successfully"))
     } catch (error) {
       console.error("IAM export error:", error)
-      message.error(
-        (error as Error).message || t("Failed to export IAM configuration")
-      )
+      message.error((error as Error).message || t("Failed to export IAM configuration"))
     } finally {
       setIsLoading(false)
     }
@@ -65,15 +63,13 @@ export function useImportExport() {
         message.success(t("IAM configuration imported successfully"))
       } catch (error) {
         console.error("IAM import error:", error)
-        message.error(
-          (error as Error).message || t("Failed to import IAM configuration")
-        )
+        message.error((error as Error).message || t("Failed to import IAM configuration"))
         throw error
       } finally {
         setIsLoading(false)
       }
     },
-    [api, message, t]
+    [api, message, t],
   )
 
   return { isLoading, exportIamConfig, importIamConfig }
diff --git a/hooks/use-local-storage.ts b/hooks/use-local-storage.ts
index c61b4c5b..b85da12f 100644
--- a/hooks/use-local-storage.ts
+++ b/hooks/use-local-storage.ts
@@ -27,9 +27,7 @@ function setStorageValue<T>(key: string, value: T) {
 }
 
 export function useLocalStorage<T>(key: string, defaultValue: T) {
-  const [value, setValue] = useState<T>(() =>
-    getStorageValue(key, defaultValue)
-  )
+  const [value, setValue] = useState<T>(() => getStorageValue(key, defaultValue))
 
   useEffect(() => {
     const handleStorage = (e: StorageEvent) => {
@@ -49,15 +47,12 @@ export function useLocalStorage<T>(key: string, defaultValue: T) {
   const setStoredValue = useCallback(
     (newValue: T | ((prev: T) => T)) => {
       setValue((prev) => {
-        const next =
-          typeof newValue === "function"
-            ? (newValue as (prev: T) => T)(prev)
-            : newValue
+        const next = typeof newValue === "function" ? (newValue as (prev: T) => T)(prev) : newValue
         setStorageValue(key, next)
         return next
       })
     },
-    [key]
+    [key],
   )
 
   return [value, setStoredValue] as const
diff --git a/hooks/use-object.ts b/hooks/use-object.ts
index b40ebac5..eff3a44d 100644
--- a/hooks/use-object.ts
+++ b/hooks/use-object.ts
@@ -3,7 +3,6 @@
 import { useCallback } from "react"
 import {
   DeleteObjectCommand,
-  GetObjectLegalHoldCommand,
   GetObjectRetentionCommand,
   GetObjectTaggingCommand,
   GetObjectCommand,
@@ -22,14 +21,13 @@ import { useS3 } from "@/contexts/s3-context"
 function attachIncludeDeletedHeader(command: ListObjectsV2Command) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ;(command.middlewareStack.add as any)(
-    (next: (args: unknown) => Promise<unknown>) =>
-      async (args: { request?: { headers?: Record<string, string> } }) => {
-        if (args?.request?.headers) {
-          args.request.headers["X-Rustfs-Include-Deleted"] = "true"
-        }
-        return next(args)
-      },
-    { step: "build", name: "includeDeletedMiddleware", tags: ["INCLUDE_DELETED"] }
+    (next: (args: unknown) => Promise<unknown>) => async (args: { request?: { headers?: Record<string, string> } }) => {
+      if (args?.request?.headers) {
+        args.request.headers["X-Rustfs-Include-Deleted"] = "true"
+      }
+      return next(args)
+    },
+    { step: "build", name: "includeDeletedMiddleware", tags: ["INCLUDE_DELETED"] },
   )
 }
 
@@ -40,7 +38,7 @@ export function useObject(bucket: string) {
     async (key: string) => {
       return client.send(new HeadObjectCommand({ Bucket: bucket, Key: key }))
     },
-    [client, bucket]
+    [client, bucket],
   )
 
   const getSignedUrlFn = useCallback(
@@ -48,14 +46,14 @@ export function useObject(bucket: string) {
       const command = new GetObjectCommand({ Bucket: bucket, Key: key })
       return getSignedUrl(client, command, { expiresIn })
     },
-    [client, bucket]
+    [client, bucket],
   )
 
   const putObject = useCallback(
     async (key: string, body: Blob | string) => {
       return client.send(new PutObjectCommand({ Bucket: bucket, Key: key, Body: body }))
     },
-    [client, bucket]
+    [client, bucket],
   )
 
   const attachForceDeleteHeader = (command: DeleteObjectCommand) => {
@@ -68,16 +66,12 @@ export function useObject(bucket: string) {
           }
           return next(args)
         },
-      { step: "build", name: "forceDeleteMiddleware", tags: ["FORCE_DELETE"] }
+      { step: "build", name: "forceDeleteMiddleware", tags: ["FORCE_DELETE"] },
     )
   }
 
   const deleteObject = useCallback(
-    async (
-      key: string,
-      versionId?: string,
-      options?: { forceDelete?: boolean }
-    ) => {
+    async (key: string, versionId?: string, options?: { forceDelete?: boolean }) => {
       const params: { Bucket: string; Key: string; VersionId?: string } = {
         Bucket: bucket,
         Key: key,
@@ -89,7 +83,7 @@ export function useObject(bucket: string) {
 
       return client.send(command)
     },
-    [client, bucket]
+    [client, bucket],
   )
 
   const listObject = useCallback(
@@ -98,7 +92,7 @@ export function useObject(bucket: string) {
       prefix?: string,
       pageSize = 25,
       continuationToken?: string,
-      options?: { includeDeleted?: boolean }
+      options?: { includeDeleted?: boolean },
     ) => {
       const command = new ListObjectsV2Command({
         Bucket: bucketName,
@@ -112,15 +106,11 @@ export function useObject(bucket: string) {
       }
       return client.send(command)
     },
-    [client]
+    [client],
   )
 
   const mapAllFiles = useCallback(
-    async (
-      bucketName: string,
-      prefix: string,
-      callback: (fileKey: string) => void
-    ) => {
+    async (bucketName: string, prefix: string, callback: (fileKey: string) => void) => {
       let isTruncated = true
       let continuationToken: string | undefined
 
@@ -130,7 +120,7 @@ export function useObject(bucket: string) {
             Bucket: bucketName,
             Prefix: prefix,
             ContinuationToken: continuationToken,
-          })
+          }),
         )
 
         data.Contents?.forEach((item) => {
@@ -141,35 +131,30 @@ export function useObject(bucket: string) {
         continuationToken = data.NextContinuationToken
       }
     },
-    [client]
+    [client],
   )
 
   const getObjectInfo = useCallback(
     async (key: string) => {
-      const [meta, signedUrl] = await Promise.all([
-        headObject(key),
-        getSignedUrlFn(key),
-      ])
+      const [meta, signedUrl] = await Promise.all([headObject(key), getSignedUrlFn(key)])
       return {
         ...meta,
         Key: key,
         SignedUrl: signedUrl,
       }
     },
-    [headObject, getSignedUrlFn]
+    [headObject, getSignedUrlFn],
   )
 
   const getObjectTags = useCallback(
     async (key: string): Promise<Array<{ Key: string; Value: string }>> => {
-      const response = await client.send(
-        new GetObjectTaggingCommand({ Bucket: bucket, Key: key })
-      )
+      const response = await client.send(new GetObjectTaggingCommand({ Bucket: bucket, Key: key }))
       return (response.TagSet ?? []).map((tag) => ({
         Key: tag.Key ?? "",
         Value: tag.Value ?? "",
       }))
     },
-    [client, bucket]
+    [client, bucket],
   )
 
   const putObjectTags = useCallback(
@@ -182,27 +167,23 @@ export function useObject(bucket: string) {
           Bucket: bucket,
           Key: key,
           Tagging: { TagSet: sanitizedTags },
-        })
+        }),
       )
     },
-    [client, bucket]
+    [client, bucket],
   )
 
   const getObjectRetention = useCallback(
     async (key: string): Promise<{ Mode: string; RetainUntilDate: string }> => {
       try {
-        const response = await client.send(
-          new GetObjectRetentionCommand({ Bucket: bucket, Key: key })
-        )
+        const response = await client.send(new GetObjectRetentionCommand({ Bucket: bucket, Key: key }))
         const retention = response?.Retention
         if (!retention || Object.keys(retention).length === 0) {
           return { Mode: "", RetainUntilDate: "" }
         }
         return {
           Mode: retention.Mode ?? "",
-          RetainUntilDate: retention.RetainUntilDate
-            ? new Date(retention.RetainUntilDate).toISOString()
-            : "",
+          RetainUntilDate: retention.RetainUntilDate ? new Date(retention.RetainUntilDate).toISOString() : "",
         }
       } catch (err) {
         const msg = (err as Error)?.message ?? ""
@@ -212,7 +193,7 @@ export function useObject(bucket: string) {
         throw err
       }
     },
-    [client, bucket]
+    [client, bucket],
   )
 
   const putObjectRetention = useCallback(
@@ -221,7 +202,7 @@ export function useObject(bucket: string) {
       retention: {
         Mode: "GOVERNANCE" | "COMPLIANCE"
         RetainUntilDate?: string
-      }
+      },
     ) => {
       return client.send(
         new PutObjectRetentionCommand({
@@ -229,17 +210,13 @@ export function useObject(bucket: string) {
           Key: key,
           Retention: {
             Mode:
-              retention.Mode === "COMPLIANCE"
-                ? ObjectLockRetentionMode.COMPLIANCE
-                : ObjectLockRetentionMode.GOVERNANCE,
-            ...(retention.RetainUntilDate
-              ? { RetainUntilDate: new Date(retention.RetainUntilDate) }
-              : {}),
+              retention.Mode === "COMPLIANCE" ? ObjectLockRetentionMode.COMPLIANCE : ObjectLockRetentionMode.GOVERNANCE,
+            ...(retention.RetainUntilDate ? { RetainUntilDate: new Date(retention.RetainUntilDate) } : {}),
           },
-        })
+        }),
       )
     },
-    [client, bucket]
+    [client, bucket],
   )
 
   const setLegalHold = useCallback(
@@ -249,10 +226,10 @@ export function useObject(bucket: string) {
           Bucket: bucket,
           Key: key,
           LegalHold: { Status: enabled ? "ON" : "OFF" },
-        })
+        }),
       )
     },
-    [client, bucket]
+    [client, bucket],
   )
 
   const listObjectVersions = useCallback(
@@ -262,23 +239,15 @@ export function useObject(bucket: string) {
           Bucket: bucket,
           Prefix: key,
           Delimiter: "/",
-        })
+        }),
       )
       const Versions = (res.Versions ?? []).filter((v) => v.Key === key)
       const DeleteMarkers = (res.DeleteMarkers ?? []).filter((m) => m.Key === key)
-      Versions.sort(
-        (a, b) =>
-          new Date(b.LastModified!).getTime() -
-          new Date(a.LastModified!).getTime()
-      )
-      DeleteMarkers.sort(
-        (a, b) =>
-          new Date(b.LastModified!).getTime() -
-          new Date(a.LastModified!).getTime()
-      )
+      Versions.sort((a, b) => new Date(b.LastModified!).getTime() - new Date(a.LastModified!).getTime())
+      DeleteMarkers.sort((a, b) => new Date(b.LastModified!).getTime() - new Date(a.LastModified!).getTime())
       return { ...res, Versions, DeleteMarkers }
     },
-    [client, bucket]
+    [client, bucket],
   )
 
   return {
diff --git a/hooks/use-permissions.tsx b/hooks/use-permissions.tsx
index 06686a72..0bc485f9 100644
--- a/hooks/use-permissions.tsx
+++ b/hooks/use-permissions.tsx
@@ -1,17 +1,7 @@
 "use client"
 
-import {
-  createContext,
-  useContext,
-  useState,
-  useCallback,
-  useEffect,
-  useMemo,
-} from "react"
-import {
-  hasConsoleScopes,
-  type ConsolePolicy,
-} from "@/lib/console-policy-parser"
+import { createContext, useContext, useState, useCallback, useEffect, useMemo } from "react"
+import { hasConsoleScopes, type ConsolePolicy } from "@/lib/console-policy-parser"
 import { PAGE_PERMISSIONS } from "@/lib/console-permissions"
 import { useAuth } from "@/contexts/auth-context"
 import { useApiOptional } from "@/contexts/api-context"
@@ -20,6 +10,7 @@ interface PermissionsContextValue {
   userPolicy: ConsolePolicy | null
   userInfo: Record<string, unknown> | null
   isLoading: boolean
+  hasFetchedPolicy: boolean
   fetchUserPolicy: () => Promise<void>
   hasPermission: (action: string | string[], matchAll?: boolean) => boolean
   canAccessPath: (path: string) => boolean
@@ -35,6 +26,7 @@ export function PermissionsProvider({ children }: { children: React.ReactNode })
   const [userPolicy, setUserPolicy] = useState<ConsolePolicy | null>(null)
   const [userInfo, setUserInfo] = useState<Record<string, unknown> | null>(null)
   const [isLoading, setIsLoading] = useState(false)
+  const [hasFetchedPolicy, setHasFetchedPolicy] = useState(false)
 
   const fetchUserPolicy = useCallback(async () => {
     if (!api) return
@@ -54,6 +46,7 @@ export function PermissionsProvider({ children }: { children: React.ReactNode })
       setUserPolicy(null)
     } finally {
       setIsLoading(false)
+      setHasFetchedPolicy(true)
     }
   }, [api])
 
@@ -65,7 +58,7 @@ export function PermissionsProvider({ children }: { children: React.ReactNode })
       const actions = Array.isArray(action) ? action : [action]
       return hasConsoleScopes(userPolicy, actions, matchAll)
     },
-    [isAdmin, userPolicy]
+    [isAdmin, userPolicy],
   )
 
   const canAccessPath = useCallback(
@@ -74,9 +67,7 @@ export function PermissionsProvider({ children }: { children: React.ReactNode })
 
       let requiredScopes = PAGE_PERMISSIONS[path]
       if (!requiredScopes) {
-        const match = Object.keys(PAGE_PERMISSIONS).find((key) =>
-          path.startsWith(key)
-        )
+        const match = Object.keys(PAGE_PERMISSIONS).find((key) => path.startsWith(key))
         if (match) {
           requiredScopes = PAGE_PERMISSIONS[match]
         }
@@ -86,7 +77,7 @@ export function PermissionsProvider({ children }: { children: React.ReactNode })
 
       return hasPermission(requiredScopes)
     },
-    [isAdmin, hasPermission]
+    [isAdmin, hasPermission],
   )
 
   useEffect(() => {
@@ -100,27 +91,16 @@ export function PermissionsProvider({ children }: { children: React.ReactNode })
       userPolicy,
       userInfo,
       isLoading,
+      hasFetchedPolicy,
       fetchUserPolicy,
       hasPermission,
       canAccessPath,
       isAdmin,
     }),
-    [
-      userPolicy,
-      userInfo,
-      isLoading,
-      fetchUserPolicy,
-      hasPermission,
-      canAccessPath,
-      isAdmin,
-    ]
+    [userPolicy, userInfo, isLoading, hasFetchedPolicy, fetchUserPolicy, hasPermission, canAccessPath, isAdmin],
   )
 
-  return (
-    <PermissionsContext.Provider value={value}>
-      {children}
-    </PermissionsContext.Provider>
-  )
+  return <PermissionsContext.Provider value={value}>{children}</PermissionsContext.Provider>
 }
 
 export function usePermissions() {
diff --git a/hooks/use-policies.ts b/hooks/use-policies.ts
index f53140bf..f0a05494 100644
--- a/hooks/use-policies.ts
+++ b/hooks/use-policies.ts
@@ -9,52 +9,42 @@ export function usePolicies() {
   const listPolicies = useCallback(async () => api.get("/list-canned-policies"), [api])
 
   const addPolicy = useCallback(
-    async (name: string, data: unknown) =>
-      api.put(`/add-canned-policy?name=${encodeURIComponent(name)}`, data),
-    [api]
+    async (name: string, data: unknown) => api.put(`/add-canned-policy?name=${encodeURIComponent(name)}`, data),
+    [api],
   )
 
   const getPolicy = useCallback(
-    async (policyName: string) =>
-      api.get(`/info-canned-policy?name=${encodeURIComponent(policyName)}`),
-    [api]
+    async (policyName: string) => api.get(`/info-canned-policy?name=${encodeURIComponent(policyName)}`),
+    [api],
   )
 
   const removePolicy = useCallback(
-    async (policyName: string) =>
-      api.delete(`/remove-canned-policy?name=${encodeURIComponent(policyName)}`),
-    [api]
+    async (policyName: string) => api.delete(`/remove-canned-policy?name=${encodeURIComponent(policyName)}`),
+    [api],
   )
 
   const listUsersForPolicy = useCallback(
-    async (policyName: string) =>
-      api.get(`/policy/${encodeURIComponent(policyName)}/users`),
-    [api]
+    async (policyName: string) => api.get(`/policy/${encodeURIComponent(policyName)}/users`),
+    [api],
   )
 
   const listGroupsForPolicy = useCallback(async () => api.get("/groups"), [api])
 
   const setPolicyMultiple = useCallback(
     async (data: Record<string, unknown>) => api.put("/set-policy-multi", data),
-    [api]
+    [api],
   )
 
   const setUserOrGroupPolicy = useCallback(
-    async (data: {
-      policyName?: string[]
-      userOrGroup?: string
-      isGroup?: boolean
-    }) => {
-      const uniquePolicies = data.policyName
-        ? Array.from(new Set(data.policyName))
-        : undefined
+    async (data: { policyName?: string[]; userOrGroup?: string; isGroup?: boolean }) => {
+      const uniquePolicies = data.policyName ? Array.from(new Set(data.policyName)) : undefined
       const params: Record<string, string> = {}
       if (uniquePolicies?.length) params.policyName = uniquePolicies.join(",")
       if (data.userOrGroup) params.userOrGroup = data.userOrGroup
       if (data.isGroup !== undefined) params.isGroup = String(data.isGroup)
       return api.put("/set-user-or-group-policy", {}, { params })
     },
-    [api]
+    [api],
   )
 
   return {
diff --git a/hooks/use-sse.ts b/hooks/use-sse.ts
index cd088511..6cce980b 100644
--- a/hooks/use-sse.ts
+++ b/hooks/use-sse.ts
@@ -14,7 +14,7 @@ export function useSSE() {
     async (data: Record<string, unknown>) => {
       return api.post("/kms/configure", data)
     },
-    [api]
+    [api],
   )
 
   const startKMS = useCallback(async () => {
@@ -38,11 +38,7 @@ export function useSSE() {
   }, [api])
 
   const createKey = useCallback(
-    async (data: {
-      KeyUsage?: string
-      Description?: string
-      Tags?: Record<string, string>
-    }) => {
+    async (data: { KeyUsage?: string; Description?: string; Tags?: Record<string, string> }) => {
       const requestData = {
         key_usage: data.KeyUsage || "EncryptDecrypt",
         description: data.Description,
@@ -50,14 +46,14 @@ export function useSSE() {
       }
       return api.post("/kms/keys", requestData)
     },
-    [api]
+    [api],
   )
 
   const getKeyDetails = useCallback(
     async (keyId: string) => {
       return api.get(`/kms/keys/${keyId}`)
     },
-    [api]
+    [api],
   )
 
   const getKeyList = useCallback(
@@ -65,12 +61,10 @@ export function useSSE() {
       const queryParams = new URLSearchParams()
       if (params?.limit) queryParams.append("limit", params.limit.toString())
       if (params?.marker) queryParams.append("marker", params.marker)
-      const url = queryParams.toString()
-        ? `/kms/keys?${queryParams}`
-        : "/kms/keys"
+      const url = queryParams.toString() ? `/kms/keys?${queryParams}` : "/kms/keys"
       return api.get(url)
     },
-    [api]
+    [api],
   )
 
   const deleteKey = useCallback(
@@ -78,7 +72,7 @@ export function useSSE() {
       const url = `/kms/keys/delete?keyId=${encodeURIComponent(keyId)}`
       return api.delete(url)
     },
-    [api]
+    [api],
   )
 
   const forceDeleteKey = useCallback(
@@ -86,7 +80,7 @@ export function useSSE() {
       const url = `/kms/keys/delete?keyId=${encodeURIComponent(keyId)}&force_immediate=true`
       return api.delete(url)
     },
-    [api]
+    [api],
   )
 
   return {
diff --git a/hooks/use-tiers.ts b/hooks/use-tiers.ts
index 25ced88a..8986cd4f 100644
--- a/hooks/use-tiers.ts
+++ b/hooks/use-tiers.ts
@@ -33,14 +33,14 @@ export function useTiers() {
     async (data: Record<string, unknown>) => {
       return api.put("/tier?force=false", data)
     },
-    [api]
+    [api],
   )
 
   const updateTiers = useCallback(
     async (name: string, data: Record<string, unknown>) => {
       return api.post(`/tier/${encodeURIComponent(name)}`, data)
     },
-    [api]
+    [api],
   )
 
   const listTiers = useCallback(async () => {
@@ -51,7 +51,7 @@ export function useTiers() {
     async (name: string) => {
       return api.delete(`/tier/${encodeURIComponent(name)}?force=true`, {})
     },
-    [api]
+    [api],
   )
 
   return {
diff --git a/hooks/use-users.ts b/hooks/use-users.ts
index dfb4348d..4e6a125c 100644
--- a/hooks/use-users.ts
+++ b/hooks/use-users.ts
@@ -15,12 +15,9 @@ export function useUsers() {
     async (data: Record<string, unknown>) => {
       if (!api) return null
       const { accessKey, ...rest } = data
-      return api.put(
-        `/add-user?accessKey=${encodeURIComponent(accessKey as string)}`,
-        rest
-      )
+      return api.put(`/add-user?accessKey=${encodeURIComponent(accessKey as string)}`, rest)
     },
-    [api]
+    [api],
   )
 
   const getUser = useCallback(
@@ -28,7 +25,7 @@ export function useUsers() {
       if (!api) return null
       return api.get(`/user-info?accessKey=${encodeURIComponent(name)}`)
     },
-    [api]
+    [api],
   )
 
   const updateUser = useCallback(
@@ -36,18 +33,15 @@ export function useUsers() {
       if (!api) return null
       return api.put(`/user/${encodeURIComponent(name)}`, data)
     },
-    [api]
+    [api],
   )
 
   const changeUserStatus = useCallback(
     async (name: string, data: { status: string }) => {
       if (!api) return null
-      return api.put(
-        `/set-user-status?accessKey=${encodeURIComponent(name)}&status=${data.status}`,
-        data
-      )
+      return api.put(`/set-user-status?accessKey=${encodeURIComponent(name)}&status=${data.status}`, data)
     },
-    [api]
+    [api],
   )
 
   const deleteUser = useCallback(
@@ -55,7 +49,7 @@ export function useUsers() {
       if (!api) return null
       return api.delete(`/remove-user?accessKey=${encodeURIComponent(name)}`, {})
     },
-    [api]
+    [api],
   )
 
   const updateUserGroups = useCallback(
@@ -63,7 +57,7 @@ export function useUsers() {
       if (!api) return null
       return api.put(`/user/${encodeURIComponent(name)}/groups`, data)
     },
-    [api]
+    [api],
   )
 
   const getUserPolicy = useCallback(async () => {
@@ -76,7 +70,7 @@ export function useUsers() {
       if (!api) return null
       return api.get(`/user/${encodeURIComponent(name)}/policies`)
     },
-    [api]
+    [api],
   )
 
   const setPolicy = useCallback(
@@ -84,7 +78,7 @@ export function useUsers() {
       if (!api) return null
       return api.put("/set-policy", data)
     },
-    [api]
+    [api],
   )
 
   const listAllUserServiceAccounts = useCallback(
@@ -92,29 +86,23 @@ export function useUsers() {
       if (!api) return null
       return api.get(`/user/${encodeURIComponent(name)}/service-accounts`)
     },
-    [api]
+    [api],
   )
 
   const createAUserServiceAccount = useCallback(
     async (name: string, data: Record<string, unknown>) => {
       if (!api) return null
-      return api.post(
-        `/user/${encodeURIComponent(name)}/service-accounts`,
-        data
-      )
+      return api.post(`/user/${encodeURIComponent(name)}/service-accounts`, data)
     },
-    [api]
+    [api],
   )
 
   const createServiceAccountCredentials = useCallback(
     async (name: string, data: Record<string, unknown>) => {
       if (!api) return null
-      return api.post(
-        `/user/${encodeURIComponent(name)}/service-account-credentials`,
-        data
-      )
+      return api.post(`/user/${encodeURIComponent(name)}/service-account-credentials`, data)
     },
-    [api]
+    [api],
   )
 
   const isAdminUser = useCallback(async () => {
diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
index ccaa48ad..895f1672 100644
--- a/i18n/locales/de-DE.json
+++ b/i18n/locales/de-DE.json
@@ -640,6 +640,7 @@
   "Rule ID": "Regel-ID",
   "Running": "Läuft",
   "Running (Unhealthy)": "Läuft (ungesund)",
+  "Running Status": "Betriebsstatus",
   "Rust-based": "Rust-basiert",
   "RustFS": "RustFS",
   "RustFS built-in cold storage": "RustFS integrierter Kaltlagerung",
diff --git a/i18n/locales/en-US.json b/i18n/locales/en-US.json
index 6dbd964e..1c28c5f3 100644
--- a/i18n/locales/en-US.json
+++ b/i18n/locales/en-US.json
@@ -621,6 +621,7 @@
   "Rule ID": "Rule ID",
   "Running": "Running",
   "Running (Unhealthy)": "Running (Unhealthy)",
+  "Running Status": "Running Status",
   "Rust-based": "Rust-based",
   "RustFS": "RustFS",
   "RustFS built-in cold storage": "RustFS built-in cold storage",
diff --git a/i18n/locales/es-ES.json b/i18n/locales/es-ES.json
index 2b5a76f9..5a3f5708 100644
--- a/i18n/locales/es-ES.json
+++ b/i18n/locales/es-ES.json
@@ -640,6 +640,7 @@
   "Rule ID": "ID de Regla",
   "Running": "En Ejecución",
   "Running (Unhealthy)": "En Ejecución (No Saludable)",
+  "Running Status": "Estado operativo",
   "Rust-based": "Basado en Rust",
   "RustFS": "RustFS",
   "RustFS built-in cold storage": "Almacenamiento frío integrado RustFS",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index bf690af0..fa89cfc8 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -640,6 +640,7 @@
   "Rule ID": "ID de règle",
   "Running": "En cours d'exécution",
   "Running (Unhealthy)": "En cours d'exécution (Malsain)",
+  "Running Status": "État de fonctionnement",
   "Rust-based": "Basé sur Rust",
   "RustFS": "RustFS",
   "RustFS built-in cold storage": "Stockage à froid intégré RustFS",
diff --git a/i18n/locales/id-ID.json b/i18n/locales/id-ID.json
index f2d4c0ff..e380076d 100644
--- a/i18n/locales/id-ID.json
+++ b/i18n/locales/id-ID.json
@@ -640,6 +640,7 @@
   "Rule ID": "ID Aturan",
   "Running": "Berjalan",
   "Running (Unhealthy)": "Berjalan (Tidak Sehat)",
+  "Running Status": "Status operasi",
   "Rust-based": "Berbasis Rust",
   "RustFS": "KaratFS",
   "RustFS built-in cold storage": "Penyimpanan dingin bawaan RustFS",
diff --git a/i18n/locales/it-IT.json b/i18n/locales/it-IT.json
index eae29bca..1a2291cd 100644
--- a/i18n/locales/it-IT.json
+++ b/i18n/locales/it-IT.json
@@ -640,6 +640,7 @@
   "Rule ID": "ID regola",
   "Running": "In esecuzione",
   "Running (Unhealthy)": "In esecuzione (non sano)",
+  "Running Status": "Stato operativo",
   "Rust-based": "Basato su Rust",
   "RustFS": "RustFS",
   "RustFS built-in cold storage": "Archiviazione fredda integrata RustFS",
diff --git a/i18n/locales/ja-JP.json b/i18n/locales/ja-JP.json
index 733ef57d..e954b547 100644
--- a/i18n/locales/ja-JP.json
+++ b/i18n/locales/ja-JP.json
@@ -640,6 +640,7 @@
   "Rule ID": "ルールID",
   "Running": "実行中",
   "Running (Unhealthy)": "実行中（不健全）",
+  "Running Status": "稼働状況",
   "Rust-based": "Rustベース",
   "RustFS": "RustFS",
   "RustFS built-in cold storage": "RustFS組み込みコールドストレージ",
diff --git a/i18n/locales/ko-KR.json b/i18n/locales/ko-KR.json
index 84421b75..38b21b76 100644
--- a/i18n/locales/ko-KR.json
+++ b/i18n/locales/ko-KR.json
@@ -640,6 +640,7 @@
   "Rule ID": "규칙 ID",
   "Running": "실행 중",
   "Running (Unhealthy)": "실행 중 (비정상)",
+  "Running Status": "운영 상태",
   "Rust-based": "Rust 기반",
   "RustFS": "러스트FS",
   "RustFS built-in cold storage": "RustFS 내장 콜드 스토리지",
diff --git a/i18n/locales/pt-BR.json b/i18n/locales/pt-BR.json
index c0de104a..95d2dcb2 100644
--- a/i18n/locales/pt-BR.json
+++ b/i18n/locales/pt-BR.json
@@ -640,6 +640,7 @@
   "Rule ID": "ID da Regra",
   "Running": "Em Execução",
   "Running (Unhealthy)": "Em Execução (Não Saudável)",
+  "Running Status": "Status de operação",
   "Rust-based": "Baseado em Rust",
   "RustFS": "RustFS",
   "RustFS built-in cold storage": "Armazenamento frio integrado RustFS",
diff --git a/i18n/locales/ru-RU.json b/i18n/locales/ru-RU.json
index 40f887ed..696554e5 100644
--- a/i18n/locales/ru-RU.json
+++ b/i18n/locales/ru-RU.json
@@ -640,6 +640,7 @@
   "Rule ID": "ID правила",
   "Running": "Запущен",
   "Running (Unhealthy)": "Запущен (неисправен)",
+  "Running Status": "Состояние работы",
   "Rust-based": "На основе Rust",
   "RustFS": "РустФС",
   "RustFS built-in cold storage": "Встроенное холодное хранилище RustFS",
diff --git a/i18n/locales/tr-TR.json b/i18n/locales/tr-TR.json
index 835f9d6a..3ac2ad33 100644
--- a/i18n/locales/tr-TR.json
+++ b/i18n/locales/tr-TR.json
@@ -640,6 +640,7 @@
   "Rule ID": "Kural Kimliği",
   "Running": "Koşma",
   "Running (Unhealthy)": "Koşu (Sağlıksız)",
+  "Running Status": "Çalışma durumu",
   "Rust-based": "Rust Tabanlı",
   "RustFS": "RustFS",
   "RustFS built-in cold storage": "RustFS yerleşik soğuk hava deposu",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index b2b7a0c6..59defc8a 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -640,6 +640,7 @@
   "Rule ID": "规则 ID",
   "Running": "运行中",
   "Running (Unhealthy)": "运行中（不健康）",
+  "Running Status": "运行状态",
   "Rust-based": "基于 Rust 的",
   "RustFS": "RustFS",
   "RustFS built-in cold storage": "RustFS 内置冷存储",
diff --git a/lib/api-client.ts b/lib/api-client.ts
index 50e9a5c5..ba1199e0 100644
--- a/lib/api-client.ts
+++ b/lib/api-client.ts
@@ -15,8 +15,11 @@ interface RequestOptions {
   headers?: Record<string, string>
   body?: unknown
   params?: Record<string, string>
+  dedupe?: boolean
 }
 
+const inflightGetRequests = new Map<string, Promise<unknown>>()
+
 export class ApiClient {
   private $api: AwsClient
   private config?: ApiClientOptions
@@ -35,6 +38,8 @@ export class ApiClient {
   async request(url: string, options: RequestOptions = {}, parseJson: boolean = true) {
     url = this.config?.baseUrl ? joinURL(this.config?.baseUrl, url) : url
     options.headers = { ...this.config?.headers, ...options.headers }
+    const method = (options.method ?? "GET").toUpperCase()
+    options.method = method
     if (
       options.body &&
       !(options.body instanceof FormData) &&
@@ -52,73 +57,95 @@ export class ApiClient {
       delete options.params
     }
 
-    logger.log("[request] url:", url)
-    logger.log("[request] options:", options)
+    const shouldDedupe = method === "GET" && parseJson && options.dedupe !== false
+    const dedupeKey = shouldDedupe ? `${method}:${url}` : null
+
+    const executeRequest = async () => {
+      logger.log("[request] url:", url)
+      logger.log("[request] options:", options)
 
-    const response = await this.$api.fetch(
-      url,
-      options as RequestInit & { body?: BodyInit | null; aws?: Record<string, unknown> },
-    )
+      const response = await this.$api.fetch(
+        url,
+        options as RequestInit & { body?: BodyInit | null; aws?: Record<string, unknown> },
+      )
 
-    logger.log("[request] response:", response)
+      logger.log("[request] response:", response)
 
-    if (response.status === 401) {
-      if (this.errorHandler) {
-        await this.errorHandler.handle401()
+      if (response.status === 401) {
+        if (this.errorHandler) {
+          await this.errorHandler.handle401()
+        }
+        return
       }
-      return
-    }
-    if (response.status === 403) {
-      try {
-        const cloned = response.clone()
-        let codeText = ""
+      if (response.status === 403) {
         try {
-          const data = (await cloned.json()) as Record<string, unknown>
-          let code: string | undefined = (data?.code as string | undefined) || (data?.Code as string | undefined)
-          if (data && typeof data === "object" && "error" in data) {
-            const errObj = (data as { error?: unknown }).error
-            if (errObj && typeof errObj === "object") {
-              const e = errObj as { code?: unknown }
-              if (typeof e.code === "string") code = code ?? e.code
+          const cloned = response.clone()
+          let codeText = ""
+          try {
+            const data = (await cloned.json()) as Record<string, unknown>
+            let code: string | undefined = (data?.code as string | undefined) || (data?.Code as string | undefined)
+            if (data && typeof data === "object" && "error" in data) {
+              const errObj = (data as { error?: unknown }).error
+              if (errObj && typeof errObj === "object") {
+                const e = errObj as { code?: unknown }
+                if (typeof e.code === "string") code = code ?? e.code
+              }
             }
+            codeText = typeof code === "string" ? code : ""
+          } catch {
+            codeText = ""
           }
-          codeText = typeof code === "string" ? code : ""
-        } catch {
-          codeText = ""
-        }
 
-        const normalizedCode = codeText.toLowerCase()
-        const isUnauthorizedAccess = normalizedCode === "unauthorizedaccess"
-        const isInvalidAccessKey = normalizedCode === "invalidaccesskeyid"
+          const normalizedCode = codeText.toLowerCase()
+          const isUnauthorizedAccess = normalizedCode === "unauthorizedaccess"
+          const isInvalidAccessKey = normalizedCode === "invalidaccesskeyid"
 
-        if (this.errorHandler) {
-          if (isUnauthorizedAccess || isInvalidAccessKey) {
-            await this.errorHandler.handle401()
-          } else {
+          if (this.errorHandler) {
+            if (isUnauthorizedAccess || isInvalidAccessKey) {
+              await this.errorHandler.handle401()
+            } else {
+              await this.errorHandler.handle403()
+            }
+          }
+        } catch {
+          if (this.errorHandler) {
             await this.errorHandler.handle403()
           }
         }
-      } catch {
-        if (this.errorHandler) {
-          await this.errorHandler.handle403()
-        }
+        return
+      }
+
+      if (!response.ok) {
+        const errorMsg = await parseApiError(response)
+        throw new Error(errorMsg)
+      }
+
+      if (response.status === 204 || response.headers.get("content-length") === "0" || !response.body) {
+        return null
+      }
+
+      if (parseJson) {
+        return await response.json()
+      } else {
+        return response
       }
-      return
     }
 
-    if (!response.ok) {
-      const errorMsg = await parseApiError(response)
-      throw new Error(errorMsg)
+    if (!dedupeKey) {
+      return executeRequest()
     }
 
-    if (response.status === 204 || response.headers.get("content-length") === "0" || !response.body) {
-      return null
+    const inflight = inflightGetRequests.get(dedupeKey)
+    if (inflight) {
+      return inflight
     }
 
-    if (parseJson) {
-      return await response.json()
-    } else {
-      return response
+    const requestPromise = executeRequest()
+    inflightGetRequests.set(dedupeKey, requestPromise)
+    try {
+      return await requestPromise
+    } finally {
+      inflightGetRequests.delete(dedupeKey)
     }
   }
 
diff --git a/lib/aws4fetch.ts b/lib/aws4fetch.ts
index 4853859d..db34d654 100644
--- a/lib/aws4fetch.ts
+++ b/lib/aws4fetch.ts
@@ -3,7 +3,7 @@
 // use forge to create HMAC and SHA256 hashes
 // because crypto.subtle is not available in non-secure contexts
 // https://developer.mozilla.org/zh-CN/docs/Web/API/SubtleCrypto
-import forge from 'node-forge'
+import forge from "node-forge"
 
 /**
  * @license MIT <https://opensource.org/licenses/MIT>
@@ -12,29 +12,29 @@ import forge from 'node-forge'
 const encoder = new TextEncoder()
 
 const HOST_SERVICES: Record<string, string> = {
-  appstream2: 'appstream',
-  cloudhsmv2: 'cloudhsm',
-  email: 'ses',
-  marketplace: 'aws-marketplace',
-  mobile: 'AWSMobileHubService',
-  pinpoint: 'mobiletargeting',
-  queue: 'sqs',
-  'git-codecommit': 'codecommit',
-  'mturk-requester-sandbox': 'mturk-requester',
-  'personalize-runtime': 'personalize',
+  appstream2: "appstream",
+  cloudhsmv2: "cloudhsm",
+  email: "ses",
+  marketplace: "aws-marketplace",
+  mobile: "AWSMobileHubService",
+  pinpoint: "mobiletargeting",
+  queue: "sqs",
+  "git-codecommit": "codecommit",
+  "mturk-requester-sandbox": "mturk-requester",
+  "personalize-runtime": "personalize",
 }
 
 // https://github.com/aws/aws-sdk-js/blob/cc29728c1c4178969ebabe3bbe6b6f3159436394/lib/signers/v4.js#L190-L198
 const UNSIGNABLE_HEADERS = new Set([
-  'authorization',
-  'content-type',
-  'content-length',
-  'user-agent',
-  'presigned-expires',
-  'expect',
-  'x-amzn-trace-id',
-  'range',
-  'connection',
+  "authorization",
+  "content-type",
+  "content-length",
+  "user-agent",
+  "presigned-expires",
+  "expect",
+  "x-amzn-trace-id",
+  "range",
+  "connection",
 ])
 
 export class AwsClient {
@@ -78,8 +78,8 @@ export class AwsClient {
     retries?: number
     initRetryMs?: number
   }) {
-    if (accessKeyId == null) throw new TypeError('accessKeyId is a required option')
-    if (secretAccessKey == null) throw new TypeError('secretAccessKey is a required option')
+    if (accessKeyId == null) throw new TypeError("accessKeyId is a required option")
+    if (secretAccessKey == null) throw new TypeError("secretAccessKey is a required option")
     this.accessKeyId = accessKeyId
     this.secretAccessKey = secretAccessKey
     this.sessionToken = sessionToken
@@ -114,13 +114,16 @@ export class AwsClient {
    */
   async sign(
     input: string | Request,
-    init?: RequestInit & { body?: BodyInit | ArrayBuffer | ReadableStream<Uint8Array<ArrayBufferLike>> | null; aws?: Record<string, unknown> }
+    init?: RequestInit & {
+      body?: BodyInit | ArrayBuffer | ReadableStream<Uint8Array<ArrayBufferLike>> | null
+      aws?: Record<string, unknown>
+    },
   ) {
     if (input instanceof Request) {
       const { method, url, headers, body } = input
       init = Object.assign({ method, url, headers }, init)
-      if (init.body == null && headers.has('Content-Type')) {
-        init.body = body != null && headers.has('X-Amz-Content-Sha256') ? body : await input.clone().arrayBuffer()
+      if (init.body == null && headers.has("Content-Type")) {
+        init.body = body != null && headers.has("X-Amz-Content-Sha256") ? body : await input.clone().arrayBuffer()
       }
       input = url
     }
@@ -132,7 +135,7 @@ export class AwsClient {
     } catch (e) {
       if (e instanceof TypeError) {
         // https://bugs.chromium.org/p/chromium/issues/detail?id=1360943
-        return new Request(signed.url.toString(), Object.assign({ duplex: 'half' }, signed))
+        return new Request(signed.url.toString(), Object.assign({ duplex: "half" }, signed))
       }
       throw e
     }
@@ -143,10 +146,7 @@ export class AwsClient {
    * @param {?AwsRequestInit} [init]
    * @returns {Promise<Response>}
    */
-  async fetch(
-    input: string | Request,
-    init?: RequestInit & { body?: BodyInit | null; aws?: Record<string, unknown> }
-  ) {
+  async fetch(input: string | Request, init?: RequestInit & { body?: BodyInit | null; aws?: Record<string, unknown> }) {
     for (let i = 0; i <= this.retries; i++) {
       const fetched = fetch(await this.sign(input, init))
       if (i === this.retries) {
@@ -156,9 +156,9 @@ export class AwsClient {
       if (res.status < 500 && res.status !== 429) {
         return res
       }
-      await new Promise(resolve => setTimeout(resolve, Math.random() * this.initRetryMs * Math.pow(2, i)))
+      await new Promise((resolve) => setTimeout(resolve, Math.random() * this.initRetryMs * Math.pow(2, i)))
     }
-    throw new Error('An unknown error occurred, ensure retries is not negative')
+    throw new Error("An unknown error occurred, ensure retries is not negative")
   }
 }
 
@@ -234,11 +234,11 @@ export class AwsV4Signer {
     allHeaders?: boolean
     singleEncode?: boolean
   }) {
-    if (url == null) throw new TypeError('url is a required option')
-    if (accessKeyId == null) throw new TypeError('accessKeyId is a required option')
-    if (secretAccessKey == null) throw new TypeError('secretAccessKey is a required option')
+    if (url == null) throw new TypeError("url is a required option")
+    if (accessKeyId == null) throw new TypeError("accessKeyId is a required option")
+    if (secretAccessKey == null) throw new TypeError("secretAccessKey is a required option")
 
-    this.method = method || (body ? 'POST' : 'GET')
+    this.method = method || (body ? "POST" : "GET")
     this.url = new URL(url)
     this.headers = new Headers(headers || {})
     this.body = body
@@ -251,66 +251,66 @@ export class AwsV4Signer {
     if (!service || !region) {
       ;[guessedService, guessedRegion] = guessServiceRegion(this.url, this.headers)
     }
-    this.service = service || guessedService || ''
-    this.region = region || guessedRegion || 'us-east-1'
+    this.service = service || guessedService || ""
+    this.region = region || guessedRegion || "us-east-1"
 
     /** @type {Map<string, ArrayBuffer>} */
     this.cache = cache || new Map()
-    this.datetime = datetime || new Date().toISOString().replace(/[:-]|\.\d{3}/g, '')
+    this.datetime = datetime || new Date().toISOString().replace(/[:-]|\.\d{3}/g, "")
     this.signQuery = signQuery
-    this.appendSessionToken = appendSessionToken || this.service === 'iotdevicegateway'
+    this.appendSessionToken = appendSessionToken || this.service === "iotdevicegateway"
 
-    this.headers.delete('Host') // Can't be set in insecure env anyway
+    this.headers.delete("Host") // Can't be set in insecure env anyway
 
-    if (this.service === 's3' && !this.signQuery && !this.headers.has('X-Amz-Content-Sha256')) {
-      this.headers.set('X-Amz-Content-Sha256', 'UNSIGNED-PAYLOAD')
+    if (this.service === "s3" && !this.signQuery && !this.headers.has("X-Amz-Content-Sha256")) {
+      this.headers.set("X-Amz-Content-Sha256", "UNSIGNED-PAYLOAD")
     }
 
     const params = this.signQuery ? this.url.searchParams : this.headers
 
-    params.set('X-Amz-Date', this.datetime)
+    params.set("X-Amz-Date", this.datetime)
     if (this.sessionToken && !this.appendSessionToken) {
-      params.set('X-Amz-Security-Token', this.sessionToken)
+      params.set("X-Amz-Security-Token", this.sessionToken)
     }
 
     // headers are always lowercase in keys()
-    this.signableHeaders = ['host', ...this.headers.keys()]
-      .filter(header => allHeaders || !UNSIGNABLE_HEADERS.has(header))
+    this.signableHeaders = ["host", ...this.headers.keys()]
+      .filter((header) => allHeaders || !UNSIGNABLE_HEADERS.has(header))
       .sort()
 
-    this.signedHeaders = this.signableHeaders.join(';')
+    this.signedHeaders = this.signableHeaders.join(";")
 
     // headers are always trimmed:
     // https://fetch.spec.whatwg.org/#concept-header-value-normalize
     this.canonicalHeaders = this.signableHeaders
       .map(
-        header =>
-          header + ':' + (header === 'host' ? this.url.host : (this.headers.get(header) || '').replace(/\s+/g, ' '))
+        (header) =>
+          header + ":" + (header === "host" ? this.url.host : (this.headers.get(header) || "").replace(/\s+/g, " ")),
       )
-      .join('\n')
+      .join("\n")
 
-    this.credentialString = [this.datetime.slice(0, 8), this.region, this.service, 'aws4_request'].join('/')
+    this.credentialString = [this.datetime.slice(0, 8), this.region, this.service, "aws4_request"].join("/")
 
     if (this.signQuery) {
-      if (this.service === 's3' && !params.has('X-Amz-Expires')) {
-        params.set('X-Amz-Expires', '86400') // 24 hours
+      if (this.service === "s3" && !params.has("X-Amz-Expires")) {
+        params.set("X-Amz-Expires", "86400") // 24 hours
       }
-      params.set('X-Amz-Algorithm', 'AWS4-HMAC-SHA256')
-      params.set('X-Amz-Credential', this.accessKeyId + '/' + this.credentialString)
-      params.set('X-Amz-SignedHeaders', this.signedHeaders)
+      params.set("X-Amz-Algorithm", "AWS4-HMAC-SHA256")
+      params.set("X-Amz-Credential", this.accessKeyId + "/" + this.credentialString)
+      params.set("X-Amz-SignedHeaders", this.signedHeaders)
     }
 
-    if (this.service === 's3') {
+    if (this.service === "s3") {
       try {
-        this.encodedPath = decodeURIComponent(this.url.pathname.replace(/\+/g, ' '))
+        this.encodedPath = decodeURIComponent(this.url.pathname.replace(/\+/g, " "))
       } catch {
         this.encodedPath = this.url.pathname
       }
     } else {
-      this.encodedPath = this.url.pathname.replace(/\/+/g, '/')
+      this.encodedPath = this.url.pathname.replace(/\/+/g, "/")
     }
     if (!singleEncode) {
-      this.encodedPath = encodeURIComponent(this.encodedPath).replace(/%2F/g, '/')
+      this.encodedPath = encodeURIComponent(this.encodedPath).replace(/%2F/g, "/")
     }
     this.encodedPath = encodeRfc3986(this.encodedPath)
 
@@ -318,24 +318,24 @@ export class AwsV4Signer {
     this.encodedSearch = [...this.url.searchParams]
       .filter(([k]) => {
         if (!k) return false // no empty keys
-        if (this.service === 's3') {
+        if (this.service === "s3") {
           if (seenKeys.has(k)) return false // first val only for S3
           seenKeys.add(k)
         }
         return true
       })
-      .map(pair => pair.map(p => encodeRfc3986(encodeURIComponent(p))))
+      .map((pair) => pair.map((p) => encodeRfc3986(encodeURIComponent(p))))
       .sort((a, b) => {
-        const [k1 = '', v1 = ''] = a ?? []
-        const [k2 = '', v2 = ''] = b ?? []
+        const [k1 = "", v1 = ""] = a ?? []
+        const [k2 = "", v2 = ""] = b ?? []
         if (k1 < k2) return -1
         if (k1 > k2) return 1
         if (v1 < v2) return -1
         if (v1 > v2) return 1
         return 0
       })
-      .map(pair => pair.join('='))
-      .join('&')
+      .map((pair) => pair.join("="))
+      .join("&")
   }
 
   /**
@@ -348,12 +348,12 @@ export class AwsV4Signer {
    */
   async sign() {
     if (this.signQuery) {
-      this.url.searchParams.set('X-Amz-Signature', await this.signature())
+      this.url.searchParams.set("X-Amz-Signature", await this.signature())
       if (this.sessionToken && this.appendSessionToken) {
-        this.url.searchParams.set('X-Amz-Security-Token', this.sessionToken)
+        this.url.searchParams.set("X-Amz-Security-Token", this.sessionToken)
       }
     } else {
-      this.headers.set('Authorization', await this.authHeader())
+      this.headers.set("Authorization", await this.authHeader())
     }
 
     return {
@@ -369,10 +369,10 @@ export class AwsV4Signer {
    */
   async authHeader() {
     return [
-      'AWS4-HMAC-SHA256 Credential=' + this.accessKeyId + '/' + this.credentialString,
-      'SignedHeaders=' + this.signedHeaders,
-      'Signature=' + (await this.signature()),
-    ].join(', ')
+      "AWS4-HMAC-SHA256 Credential=" + this.accessKeyId + "/" + this.credentialString,
+      "SignedHeaders=" + this.signedHeaders,
+      "Signature=" + (await this.signature()),
+    ].join(", ")
   }
 
   /**
@@ -383,10 +383,10 @@ export class AwsV4Signer {
     const cacheKey = [this.secretAccessKey, date, this.region, this.service].join()
     let kCredentials = this.cache.get(cacheKey)
     if (!kCredentials) {
-      const kDate = await hmac('AWS4' + this.secretAccessKey, date)
+      const kDate = await hmac("AWS4" + this.secretAccessKey, date)
       const kRegion = await hmac(kDate, this.region)
       const kService = await hmac(kRegion, this.service)
-      kCredentials = await hmac(kService, 'aws4_request')
+      kCredentials = await hmac(kService, "aws4_request")
       this.cache.set(cacheKey, kCredentials)
     }
     return buf2hex(await hmac(kCredentials, await this.stringToSign()))
@@ -397,11 +397,11 @@ export class AwsV4Signer {
    */
   async stringToSign() {
     return [
-      'AWS4-HMAC-SHA256',
+      "AWS4-HMAC-SHA256",
       this.datetime,
       this.credentialString,
       buf2hex(await hash(await this.canonicalString())),
-    ].join('\n')
+    ].join("\n")
   }
 
   /**
@@ -412,10 +412,10 @@ export class AwsV4Signer {
       this.method.toUpperCase(),
       this.encodedPath,
       this.encodedSearch,
-      this.canonicalHeaders + '\n',
+      this.canonicalHeaders + "\n",
       this.signedHeaders,
       await this.hexBodyHash(),
-    ].join('\n')
+    ].join("\n")
   }
 
   /**
@@ -423,14 +423,14 @@ export class AwsV4Signer {
    */
   async hexBodyHash() {
     let hashHeader =
-      this.headers.get('X-Amz-Content-Sha256') || (this.service === 's3' && this.signQuery ? 'UNSIGNED-PAYLOAD' : null)
+      this.headers.get("X-Amz-Content-Sha256") || (this.service === "s3" && this.signQuery ? "UNSIGNED-PAYLOAD" : null)
     if (hashHeader == null) {
-      if (this.body && typeof this.body !== 'string' && !('byteLength' in this.body)) {
+      if (this.body && typeof this.body !== "string" && !("byteLength" in this.body)) {
         throw new Error(
-          'body must be a string, ArrayBuffer or ArrayBufferView, unless you include the X-Amz-Content-Sha256 header'
+          "body must be a string, ArrayBuffer or ArrayBufferView, unless you include the X-Amz-Content-Sha256 header",
         )
       }
-      hashHeader = buf2hex(await hash(this.body || ''))
+      hashHeader = buf2hex(await hash(this.body || ""))
     }
     return hashHeader
   }
@@ -443,32 +443,32 @@ export class AwsV4Signer {
  */
 async function hmac(
   key: string | ArrayBuffer | ArrayBufferView | forge.util.ByteStringBuffer | null,
-  string: string | undefined
+  string: string | undefined,
 ) {
   const hmac = forge.hmac.create()
 
   // Handle key conversion
-  if (typeof key === 'string') {
-    hmac.start('sha256', key)
+  if (typeof key === "string") {
+    hmac.start("sha256", key)
   } else if (key instanceof ArrayBuffer) {
     const keyArray = new Uint8Array(key)
     const keyString = String.fromCharCode.apply(null, [...keyArray])
-    hmac.start('sha256', keyString)
-  } else if (key && 'getBytes' in key) {
+    hmac.start("sha256", keyString)
+  } else if (key && "getBytes" in key) {
     // Forge ByteStringBuffer object
-    hmac.start('sha256', key.getBytes())
+    hmac.start("sha256", key.getBytes())
   } else if (key) {
     // ArrayBufferView
     const keyArray = new Uint8Array(key.buffer)
     const keyString = String.fromCharCode.apply(null, [...keyArray])
-    hmac.start('sha256', keyString)
+    hmac.start("sha256", keyString)
   } else {
     // Handle null
-    hmac.start('sha256', '')
+    hmac.start("sha256", "")
   }
 
   // Handle input string
-  if (typeof string === 'string') {
+  if (typeof string === "string") {
     hmac.update(string)
   } else {
     const encoded = encoder.encode(string)
@@ -493,7 +493,7 @@ async function hmac(
 async function hash(content: string | ArrayBufferView<ArrayBufferLike> | ArrayBuffer) {
   const md = forge.md.sha256.create()
 
-  if (typeof content === 'string') {
+  if (typeof content === "string") {
     md.update(content)
   } else {
     // Convert BufferSource to forge format
@@ -512,7 +512,7 @@ async function hash(content: string | ArrayBufferView<ArrayBufferLike> | ArrayBu
   return buffer.buffer
 }
 
-const HEX_CHARS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
+const HEX_CHARS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]
 
 /**
  * @param {ArrayBufferLike} arrayBuffer
@@ -520,7 +520,7 @@ const HEX_CHARS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', '
  */
 function buf2hex(arrayBuffer: ArrayBuffer) {
   const buffer = new Uint8Array(arrayBuffer)
-  let out = ''
+  let out = ""
   for (let idx = 0; idx < buffer.length; idx++) {
     const n = buffer[idx]
     if (n === undefined) {
@@ -537,7 +537,7 @@ function buf2hex(arrayBuffer: ArrayBuffer) {
  * @returns {string}
  */
 function encodeRfc3986(urlEncodedStr: string) {
-  return urlEncodedStr.replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase())
+  return urlEncodedStr.replace(/[!'()*]/g, (c) => "%" + c.charCodeAt(0).toString(16).toUpperCase())
 }
 
 /**
@@ -548,49 +548,49 @@ function encodeRfc3986(urlEncodedStr: string) {
 function guessServiceRegion(url: URL, headers: Headers) {
   const { hostname, pathname } = url
 
-  if (hostname.endsWith('.on.aws')) {
+  if (hostname.endsWith(".on.aws")) {
     const match = hostname.match(/^[^.]{1,63}\.lambda-url\.([^.]{1,63})\.on\.aws$/)
-    return match != null ? ['lambda', match[1] || ''] : ['', '']
+    return match != null ? ["lambda", match[1] || ""] : ["", ""]
   }
-  if (hostname.endsWith('.r2.cloudflarestorage.com')) {
-    return ['s3', 'auto']
+  if (hostname.endsWith(".r2.cloudflarestorage.com")) {
+    return ["s3", "auto"]
   }
-  if (hostname.endsWith('.backblazeb2.com')) {
+  if (hostname.endsWith(".backblazeb2.com")) {
     const match = hostname.match(/^(?:[^.]{1,63}\.)?s3\.([^.]{1,63})\.backblazeb2\.com$/)
-    return match != null ? ['s3', match[1] || ''] : ['', '']
+    return match != null ? ["s3", match[1] || ""] : ["", ""]
   }
-  const match = hostname.replace('dualstack.', '').match(/([^.]{1,63})\.(?:([^.]{0,63})\.)?amazonaws\.com(?:\.cn)?$/)
-  let service = (match && match[1]) || ''
+  const match = hostname.replace("dualstack.", "").match(/([^.]{1,63})\.(?:([^.]{0,63})\.)?amazonaws\.com(?:\.cn)?$/)
+  let service = (match && match[1]) || ""
   let region = match && match[2]
 
-  if (region === 'us-gov') {
-    region = 'us-gov-west-1'
-  } else if (region === 's3' || region === 's3-accelerate') {
-    region = 'us-east-1'
-    service = 's3'
-  } else if (service === 'iot') {
-    if (hostname.startsWith('iot.')) {
-      service = 'execute-api'
-    } else if (hostname.startsWith('data.jobs.iot.')) {
-      service = 'iot-jobs-data'
+  if (region === "us-gov") {
+    region = "us-gov-west-1"
+  } else if (region === "s3" || region === "s3-accelerate") {
+    region = "us-east-1"
+    service = "s3"
+  } else if (service === "iot") {
+    if (hostname.startsWith("iot.")) {
+      service = "execute-api"
+    } else if (hostname.startsWith("data.jobs.iot.")) {
+      service = "iot-jobs-data"
     } else {
-      service = pathname === '/mqtt' ? 'iotdevicegateway' : 'iotdata'
+      service = pathname === "/mqtt" ? "iotdevicegateway" : "iotdata"
     }
-  } else if (service === 'autoscaling') {
-    const targetPrefix = (headers.get('X-Amz-Target') || '').split('.')[0]
-    if (targetPrefix === 'AnyScaleFrontendService') {
-      service = 'application-autoscaling'
-    } else if (targetPrefix === 'AnyScaleScalingPlannerFrontendService') {
-      service = 'autoscaling-plans'
+  } else if (service === "autoscaling") {
+    const targetPrefix = (headers.get("X-Amz-Target") || "").split(".")[0]
+    if (targetPrefix === "AnyScaleFrontendService") {
+      service = "application-autoscaling"
+    } else if (targetPrefix === "AnyScaleScalingPlannerFrontendService") {
+      service = "autoscaling-plans"
     }
-  } else if (region == null && service.startsWith('s3-')) {
-    region = service.slice(3).replace(/^fips-|^external-1/, '')
-    service = 's3'
-  } else if (service.endsWith('-fips')) {
+  } else if (region == null && service.startsWith("s3-")) {
+    region = service.slice(3).replace(/^fips-|^external-1/, "")
+    service = "s3"
+  } else if (service.endsWith("-fips")) {
     service = service.slice(0, -5)
   } else if (region && /-\d$/.test(service) && !/-\d$/.test(region)) {
     ;[service, region] = [region, service]
   }
 
-  return [HOST_SERVICES[service] || service, region || '']
+  return [HOST_SERVICES[service] || service, region || ""]
 }
diff --git a/lib/bucket-policy.ts b/lib/bucket-policy.ts
index c9916edb..6b3f0409 100644
--- a/lib/bucket-policy.ts
+++ b/lib/bucket-policy.ts
@@ -45,13 +45,7 @@ const writeOnlyObjectActions = new Set<string>([
   "s3:ListMultipartUploadParts",
   "s3:PutObject",
 ])
-export type BucketPolicyType =
-  | "none"
-  | "readonly"
-  | "readwrite"
-  | "writeonly"
-  | "private"
-  | "public"
+export type BucketPolicyType = "none" | "readonly" | "readwrite" | "writeonly" | "private" | "public"
 
 export interface PolicyResource {
   bucket: string
@@ -73,11 +67,7 @@ function formatResourceArn(resource: PolicyResource): string {
   return resource.object ? `${awsResourcePrefix}${bn}/${resource.object}` : `${awsResourcePrefix}${bn}`
 }
 
-function createAllowStatement(
-  principals: string[],
-  actions: string[],
-  resources: PolicyResource[]
-): PolicyStatement {
+function createAllowStatement(principals: string[], actions: string[], resources: PolicyResource[]): PolicyStatement {
   return {
     Effect: "Allow",
     Principal: { AWS: principals },
@@ -86,11 +76,7 @@ function createAllowStatement(
   }
 }
 
-function createDenyStatement(
-  principals: string[],
-  actions: string[],
-  resources: PolicyResource[]
-): PolicyStatement {
+function createDenyStatement(principals: string[], actions: string[], resources: PolicyResource[]): PolicyStatement {
   return {
     Effect: "Deny",
     Principal: { AWS: principals },
@@ -102,16 +88,8 @@ function createDenyStatement(
 function createPrivatePolicy(bucketName: string, prefix: string): PolicyStatement[] {
   const objectPattern = prefix ? `${prefix}*` : "*"
   return [
-    createAllowStatement(
-      ["arn:aws:iam::*:root"],
-      ["s3:*"],
-      [{ bucket: bucketName, object: objectPattern }]
-    ),
-    createDenyStatement(
-      ["*"],
-      ["s3:*"],
-      [{ bucket: bucketName, object: objectPattern }]
-    ),
+    createAllowStatement(["arn:aws:iam::*:root"], ["s3:*"], [{ bucket: bucketName, object: objectPattern }]),
+    createDenyStatement(["*"], ["s3:*"], [{ bucket: bucketName, object: objectPattern }]),
   ]
 }
 
@@ -120,23 +98,13 @@ function createPublicPolicy(bucketName: string, prefix: string): PolicyStatement
   return [
     createAllowStatement(
       ["*"],
-      [
-        "s3:GetObject",
-        "s3:GetObjectTagging",
-        "s3:ListBucket",
-        "s3:GetBucketLocation",
-      ],
-      [{ bucket: bucketName, object: objectPattern }]
+      ["s3:GetObject", "s3:GetObjectTagging", "s3:ListBucket", "s3:GetBucketLocation"],
+      [{ bucket: bucketName, object: objectPattern }],
     ),
     createAllowStatement(
       ["arn:aws:iam::*:root"],
-      [
-        "s3:PutObject",
-        "s3:DeleteObject",
-        "s3:PutObjectTagging",
-        "s3:DeleteObjectTagging",
-      ],
-      [{ bucket: bucketName, object: objectPattern }]
+      ["s3:PutObject", "s3:DeleteObject", "s3:PutObjectTagging", "s3:DeleteObjectTagging"],
+      [{ bucket: bucketName, object: objectPattern }],
     ),
   ]
 }
@@ -147,7 +115,7 @@ function createPublicPolicy(bucketName: string, prefix: string): PolicyStatement
 export function detectBucketPolicy(
   statements: PolicyStatement[],
   bucketName: string,
-  prefix: string
+  prefix: string,
 ): BucketPolicyType {
   const objectResource = `${awsResourcePrefix}${bucketName}/${prefix}*`
 
@@ -157,8 +125,8 @@ export function detectBucketPolicy(
       s.Principal?.AWS?.includes("*") &&
       s.Resource?.includes(objectResource) &&
       s.Action?.some((a) =>
-        ["s3:GetObject", "s3:GetObjectTagging", "s3:ListBucket", "s3:GetBucketLocation"].includes(a)
-      )
+        ["s3:GetObject", "s3:GetObjectTagging", "s3:ListBucket", "s3:GetBucketLocation"].includes(a),
+      ),
   )
   const hasOwnerWriteAccess = statements.some(
     (s) =>
@@ -166,8 +134,8 @@ export function detectBucketPolicy(
       s.Principal?.AWS?.includes("arn:aws:iam::*:root") &&
       s.Resource?.includes(objectResource) &&
       s.Action?.some((a) =>
-        ["s3:PutObject", "s3:DeleteObject", "s3:PutObjectTagging", "s3:DeleteObjectTagging"].includes(a)
-      )
+        ["s3:PutObject", "s3:DeleteObject", "s3:PutObjectTagging", "s3:DeleteObjectTagging"].includes(a),
+      ),
   )
   if (hasPublicReadAccess && hasOwnerWriteAccess) return "public"
 
@@ -176,14 +144,14 @@ export function detectBucketPolicy(
       s.Effect === "Allow" &&
       s.Principal?.AWS?.includes("arn:aws:iam::*:root") &&
       s.Resource?.includes(objectResource) &&
-      s.Action?.includes("s3:*")
+      s.Action?.includes("s3:*"),
   )
   const hasDenyAllOthers = statements.some(
     (s) =>
       s.Effect === "Deny" &&
       s.Principal?.AWS?.includes("*") &&
       s.Resource?.includes(objectResource) &&
-      s.Action?.includes("s3:*")
+      s.Action?.includes("s3:*"),
   )
   if (hasOwnerFullAccess && hasDenyAllOthers) return "private"
 
@@ -197,13 +165,13 @@ export function setBucketPolicy(
   statements: PolicyStatement[],
   policy: BucketPolicyType,
   bucketName: string,
-  prefix: string
+  prefix: string,
 ): PolicyStatement[] {
   const bucketResource = `${awsResourcePrefix}${bucketName}`
   const objectResource = `${awsResourcePrefix}${bucketName}/${prefix}*`
 
   const filtered = statements.filter(
-    (s) => !s.Resource?.includes(bucketResource) && !s.Resource?.includes(objectResource)
+    (s) => !s.Resource?.includes(bucketResource) && !s.Resource?.includes(objectResource),
   )
 
   let newStatements: PolicyStatement[] = []
@@ -213,39 +181,17 @@ export function setBucketPolicy(
   } else if (policy === "public") {
     newStatements = createPublicPolicy(bucketName, prefix)
   } else {
-    newStatements.push(
-      createAllowStatement(
-        ["*"],
-        Array.from(commonBucketActions),
-        [{ bucket: bucketName }]
-      )
-    )
+    newStatements.push(createAllowStatement(["*"], Array.from(commonBucketActions), [{ bucket: bucketName }]))
     if (policy === "readonly" || policy === "readwrite") {
       newStatements.push(
-        createAllowStatement(
-          ["*"],
-          Array.from(readOnlyBucketActions),
-          [{ bucket: bucketName }]
-        ),
-        createAllowStatement(
-          ["*"],
-          Array.from(readOnlyObjectActions),
-          [{ bucket: bucketName, object: `${prefix}*` }]
-        )
+        createAllowStatement(["*"], Array.from(readOnlyBucketActions), [{ bucket: bucketName }]),
+        createAllowStatement(["*"], Array.from(readOnlyObjectActions), [{ bucket: bucketName, object: `${prefix}*` }]),
       )
     }
     if (policy === "writeonly" || policy === "readwrite") {
       newStatements.push(
-        createAllowStatement(
-          ["*"],
-          Array.from(writeOnlyBucketActions),
-          [{ bucket: bucketName }]
-        ),
-        createAllowStatement(
-          ["*"],
-          Array.from(writeOnlyObjectActions),
-          [{ bucket: bucketName, object: `${prefix}*` }]
-        )
+        createAllowStatement(["*"], Array.from(writeOnlyBucketActions), [{ bucket: bucketName }]),
+        createAllowStatement(["*"], Array.from(writeOnlyObjectActions), [{ bucket: bucketName, object: `${prefix}*` }]),
       )
     }
   }
diff --git a/lib/config-helpers.ts b/lib/config-helpers.ts
index 36b89b61..2524cbdb 100644
--- a/lib/config-helpers.ts
+++ b/lib/config-helpers.ts
@@ -1,4 +1,5 @@
 import type { SiteConfig } from "@/types/config"
+import { AwsClient } from "@/lib/aws4fetch"
 import { logger } from "./logger"
 
 type ConfigSource = "browser" | "localStorage" | "server" | "default"
@@ -22,6 +23,8 @@ interface HostInfo {
 }
 
 const STORAGE_KEY = "rustfs-server-host"
+const CREDENTIALS_KEY = "auth.credentials"
+const PERMANENT_CREDENTIALS_KEY = "auth.permanent"
 const DEFAULT_REGION = "us-east-1"
 const API_PATH = "/rustfs/admin/v3"
 const VERSION_PATH = "/rustfs/console/version"
@@ -86,13 +89,76 @@ export const getCurrentBrowserConfig = (): ConfigResult => {
   return { config, source: "browser" }
 }
 
-export const fetchVersionConfigFromServer = async (
-  serverHost: string
-): Promise<VersionConfigResponse | null> => {
+const parseStoredJson = <T>(value: string | null): T | null => {
+  if (!value) return null
+  try {
+    return JSON.parse(value) as T
+  } catch {
+    return null
+  }
+}
+
+const isExpired = (expiration?: string) => {
+  if (!expiration) return false
+  return new Date(expiration) < new Date()
+}
+
+const getStoredSigningCredentials = (): {
+  accessKeyId: string
+  secretAccessKey: string
+  sessionToken?: string
+} | null => {
+  if (!isBrowser()) return null
+
+  const stored = parseStoredJson<{
+    AccessKeyId?: string
+    SecretAccessKey?: string
+    SessionToken?: string
+    Expiration?: string
+  }>(localStorage.getItem(CREDENTIALS_KEY))
+
+  if (stored?.AccessKeyId && stored?.SecretAccessKey && stored?.SessionToken && !isExpired(stored.Expiration)) {
+    return {
+      accessKeyId: stored.AccessKeyId,
+      secretAccessKey: stored.SecretAccessKey,
+      sessionToken: stored.SessionToken,
+    }
+  }
+
+  const permanent = parseStoredJson<{
+    AccessKeyId?: string
+    SecretAccessKey?: string
+  }>(localStorage.getItem(PERMANENT_CREDENTIALS_KEY))
+
+  if (permanent?.AccessKeyId && permanent?.SecretAccessKey) {
+    return {
+      accessKeyId: permanent.AccessKeyId,
+      secretAccessKey: permanent.SecretAccessKey,
+    }
+  }
+
+  return null
+}
+
+export const fetchVersionConfigFromServer = async (serverHost: string): Promise<VersionConfigResponse | null> => {
   const configUrl = `${serverHost}${VERSION_PATH}`
 
   try {
-    const response = await fetch(configUrl, {
+    const credentials = getStoredSigningCredentials()
+    if (!credentials) {
+      logger.warn("Skip version config fetch: no signing credentials available")
+      return null
+    }
+
+    const client = new AwsClient({
+      accessKeyId: credentials.accessKeyId,
+      secretAccessKey: credentials.secretAccessKey,
+      sessionToken: credentials.sessionToken,
+      service: "s3",
+      region: DEFAULT_REGION,
+    })
+
+    const response = await client.fetch(configUrl, {
       method: "GET",
       headers: { "Content-Type": "application/json" },
       signal: AbortSignal.timeout(REQUEST_TIMEOUT),
@@ -113,7 +179,7 @@ export const fetchVersionConfigFromServer = async (
     return data
   } catch (error) {
     logger.warn(
-      `Error fetching version config from server: ${error instanceof Error ? error.message : "Unknown error"}`
+      `Error fetching version config from server: ${error instanceof Error ? error.message : "Unknown error"}`,
     )
     return null
   }
@@ -125,9 +191,7 @@ export const getServerDefaultConfig = (): ConfigResult => {
   return { config, source: "default" }
 }
 
-export const validateConfig = (
-  config: SiteConfig
-): { valid: boolean; errors: string[] } => {
+export const validateConfig = (config: SiteConfig): { valid: boolean; errors: string[] } => {
   const errors: string[] = []
 
   if (!config.serverHost) {
diff --git a/lib/config.ts b/lib/config.ts
index b3db716d..f51a21e5 100644
--- a/lib/config.ts
+++ b/lib/config.ts
@@ -10,37 +10,30 @@ import { logger } from "./logger"
 
 let configCache: SiteConfig | null = null
 let configCacheTime = 0
+let configPromise: Promise<SiteConfig> | null = null
 const CACHE_DURATION = 60000
 
 function loadRuntimeConfig(): SiteConfig | null {
   try {
     const serverHost =
       process.env.NEXT_PUBLIC_SERVER_HOST ||
-      (process.env.NEXT_PUBLIC_API_BASE_URL ?? "").replace(
-        /\/rustfs\/admin\/v3$/,
-        ""
-      )
+      (process.env.NEXT_PUBLIC_API_BASE_URL ?? "").replace(/\/rustfs\/admin\/v3$/, "")
 
     if (serverHost) {
       return {
         serverHost,
         api: {
-          baseURL:
-            process.env.NEXT_PUBLIC_API_BASE_URL ||
-            `${serverHost}/rustfs/admin/v3`,
+          baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || `${serverHost}/rustfs/admin/v3`,
         },
         s3: {
-          endpoint:
-            process.env.NEXT_PUBLIC_S3_ENDPOINT || serverHost,
+          endpoint: process.env.NEXT_PUBLIC_S3_ENDPOINT || serverHost,
           region: process.env.NEXT_PUBLIC_S3_REGION || "us-east-1",
           accessKeyId: "",
           secretAccessKey: "",
         },
         session: process.env.NEXT_PUBLIC_SESSION_DURATION_SECONDS
           ? {
-              durationSeconds: Number(
-                process.env.NEXT_PUBLIC_SESSION_DURATION_SECONDS
-              ),
+              durationSeconds: Number(process.env.NEXT_PUBLIC_SESSION_DURATION_SECONDS),
             }
           : undefined,
         release:
@@ -67,50 +60,62 @@ export const configManager = {
     if (configCache && now - configCacheTime < CACHE_DURATION) {
       return configCache
     }
+    if (configPromise) {
+      return configPromise
+    }
 
-    let config: SiteConfig
+    configPromise = (async () => {
+      let config: SiteConfig
 
-    const storedResult = getStoredHostConfig()
-    if (storedResult.config) {
-      config = storedResult.config
-    } else {
-      const browserResult = getCurrentBrowserConfig()
-      if (browserResult.config) {
-        config = browserResult.config
+      const storedResult = getStoredHostConfig()
+      if (storedResult.config) {
+        config = storedResult.config
       } else {
-        const runtimeConfig = this.loadRuntimeConfig()
-        if (runtimeConfig) {
-          config = runtimeConfig
+        const browserResult = getCurrentBrowserConfig()
+        if (browserResult.config) {
+          config = browserResult.config
         } else {
-          const defaultResult = getServerDefaultConfig()
-          config = defaultResult.config!
+          const runtimeConfig = this.loadRuntimeConfig()
+          if (runtimeConfig) {
+            config = runtimeConfig
+          } else {
+            const defaultResult = getServerDefaultConfig()
+            config = defaultResult.config!
+          }
         }
       }
-    }
 
-    try {
-      const serverConfig = await fetchVersionConfigFromServer(config.serverHost)
-      if (serverConfig?.version && serverConfig?.date) {
-        config = {
-          ...config,
-          release: {
-            version: serverConfig.version,
-            date: serverConfig.date,
-          },
+      try {
+        const serverConfig = await fetchVersionConfigFromServer(config.serverHost)
+        if (serverConfig?.version && serverConfig?.date) {
+          config = {
+            ...config,
+            release: {
+              version: serverConfig.version,
+              date: serverConfig.date,
+            },
+          }
         }
+      } catch (error) {
+        logger.warn("Failed to get release info from server:", error)
       }
-    } catch (error) {
-      logger.warn("Failed to get release info from server:", error)
-    }
 
-    configCache = config
-    configCacheTime = now
-    return config
+      configCache = config
+      configCacheTime = Date.now()
+      return config
+    })()
+
+    try {
+      return await configPromise
+    } finally {
+      configPromise = null
+    }
   },
 
   clearCache() {
     configCache = null
     configCacheTime = 0
+    configPromise = null
   },
 
   async hasValidConfig(): Promise<boolean> {
diff --git a/lib/console-permissions.ts b/lib/console-permissions.ts
index feb634b2..168dcec1 100644
--- a/lib/console-permissions.ts
+++ b/lib/console-permissions.ts
@@ -25,7 +25,7 @@ export const PAGE_PERMISSIONS: Record<string, ConsoleScope[]> = {
   "/users": [CONSOLE_SCOPES.VIEW_USERS],
   "/user-groups": [CONSOLE_SCOPES.VIEW_USER_GROUPS],
   "/import-export": [CONSOLE_SCOPES.VIEW_IMPORT_EXPORT],
-  "/performance": [CONSOLE_SCOPES.VIEW_PERFORMANCE],
+  "/status": [CONSOLE_SCOPES.VIEW_PERFORMANCE],
   "/events": [CONSOLE_SCOPES.VIEW_BUCKET_EVENTS],
   "/replication": [CONSOLE_SCOPES.VIEW_BUCKET_REPLICATION],
   "/lifecycle": [CONSOLE_SCOPES.VIEW_BUCKET_LIFECYCLE],
diff --git a/lib/console-policy-parser.ts b/lib/console-policy-parser.ts
index 8f216753..8a4fa591 100644
--- a/lib/console-policy-parser.ts
+++ b/lib/console-policy-parser.ts
@@ -13,9 +13,7 @@ export interface ConsolePolicy {
 }
 
 function matchAction(policyActions: string[], requestAction: string): boolean {
-  return policyActions.some((pattern) =>
-    resourceMatch(pattern, requestAction)
-  )
+  return policyActions.some((pattern) => resourceMatch(pattern, requestAction))
 }
 
 const IMPLIED_SCOPES: Record<string, string[]> = {
@@ -61,18 +59,8 @@ const IMPLIED_SCOPES: Record<string, string[]> = {
     "admin:DeleteUser",
     "admin:*",
   ],
-  [CONSOLE_SCOPES.VIEW_USER_GROUPS]: [
-    "admin:ListGroups",
-    "admin:AddUserToGroup",
-    "admin:GetGroup",
-    "admin:*",
-  ],
-  [CONSOLE_SCOPES.VIEW_PERFORMANCE]: [
-    "admin:ServerInfo",
-    "admin:OBDInfo",
-    "admin:ServerTrace",
-    "admin:*",
-  ],
+  [CONSOLE_SCOPES.VIEW_USER_GROUPS]: ["admin:ListGroups", "admin:AddUserToGroup", "admin:GetGroup", "admin:*"],
+  [CONSOLE_SCOPES.VIEW_PERFORMANCE]: ["admin:ServerInfo", "admin:OBDInfo", "admin:ServerTrace", "admin:*"],
   [CONSOLE_SCOPES.VIEW_IMPORT_EXPORT]: ["admin:ConfigUpdate", "admin:*"],
   [CONSOLE_SCOPES.VIEW_BUCKET_EVENTS]: [
     "s3:GetBucketNotification",
@@ -86,37 +74,24 @@ const IMPLIED_SCOPES: Record<string, string[]> = {
     "s3:PutReplicationConfiguration",
     "s3:*",
   ],
-  [CONSOLE_SCOPES.VIEW_BUCKET_LIFECYCLE]: [
-    "s3:GetLifecycleConfiguration",
-    "s3:PutLifecycleConfiguration",
-    "s3:*",
-  ],
+  [CONSOLE_SCOPES.VIEW_BUCKET_LIFECYCLE]: ["s3:GetLifecycleConfiguration", "s3:PutLifecycleConfiguration", "s3:*"],
   [CONSOLE_SCOPES.VIEW_TIERED_STORAGE]: ["admin:ConfigUpdate", "admin:*"],
   [CONSOLE_SCOPES.VIEW_EVENT_DESTINATIONS]: ["admin:ConfigUpdate", "admin:*"],
-  [CONSOLE_SCOPES.VIEW_SSE_SETTINGS]: [
-    "admin:ConfigUpdate",
-    "admin:*",
-    "kms:*",
-  ],
+  [CONSOLE_SCOPES.VIEW_SSE_SETTINGS]: ["admin:ConfigUpdate", "admin:*", "kms:*"],
   [CONSOLE_SCOPES.VIEW_LICENSE]: ["admin:ServerInfo", "admin:*"],
 }
 
-function matchResource(
-  policyResources: string[] | undefined,
-  requestResource: string
-): boolean {
+function matchResource(policyResources: string[] | undefined, requestResource: string): boolean {
   if (!policyResources || policyResources.length === 0) {
     return true
   }
-  return policyResources.some((pattern) =>
-    resourceMatch(pattern, requestResource)
-  )
+  return policyResources.some((pattern) => resourceMatch(pattern, requestResource))
 }
 
 export function hasConsolePermission(
   policy: ConsolePolicy | ConsoleStatement[] | undefined,
   action: string,
-  resource: string = "console"
+  resource: string = "console",
 ): boolean {
   if (!policy) return false
 
@@ -124,10 +99,7 @@ export function hasConsolePermission(
   if (statements.length === 0) return false
 
   const denied = statements.some(
-    (s) =>
-      s.Effect === "Deny" &&
-      matchAction(s.Action, action) &&
-      matchResource(s.Resource, resource)
+    (s) => s.Effect === "Deny" && matchAction(s.Action, action) && matchResource(s.Resource, resource),
   )
 
   if (denied) return false
@@ -141,11 +113,7 @@ export function hasConsolePermission(
     const adminStarMatch = matchAction(s.Action, "admin:*")
 
     const explicitMatch =
-      (actionMatch ||
-        adminMatch ||
-        wildcardMatch ||
-        adminStarMatch) &&
-      matchResource(s.Resource, resource)
+      (actionMatch || adminMatch || wildcardMatch || adminStarMatch) && matchResource(s.Resource, resource)
     if (explicitMatch) return true
 
     const impliedActions = IMPLIED_SCOPES[action]
@@ -164,7 +132,7 @@ export function hasConsolePermission(
 export function hasConsoleScopes(
   policy: ConsolePolicy | ConsoleStatement[] | undefined,
   scopes: string[],
-  matchAll: boolean = true
+  matchAll: boolean = true,
 ): boolean {
   if (!scopes || scopes.length === 0) return true
 
diff --git a/lib/delete-task.ts b/lib/delete-task.ts
index 07645fe8..3a9e5ac3 100644
--- a/lib/delete-task.ts
+++ b/lib/delete-task.ts
@@ -26,13 +26,13 @@ export interface DeleteTaskHelpers {
     keys: string[],
     bucketName: string,
     prefix?: string,
-    options?: { forceDelete?: boolean }
+    options?: { forceDelete?: boolean },
   ) => DeleteTask[]
   createVersionedTasks: (
     items: { key: string; versionId?: string }[],
     bucketName: string,
     prefix?: string,
-    options?: { forceDelete?: boolean }
+    options?: { forceDelete?: boolean },
   ) => DeleteTask[]
 }
 
@@ -47,21 +47,17 @@ const lifecycle: TaskLifecycleStatus<DeleteStatus> = {
 function attachForceDeleteHeader(command: DeleteObjectCommand) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ;(command.middlewareStack.add as any)(
-    (next: (args: unknown) => Promise<unknown>) =>
-      async (args: { request?: { headers?: Record<string, string> } }) => {
-        if (args?.request?.headers) {
-          args.request.headers["X-Rustfs-Force-Delete"] = "true"
-        }
-        return next(args)
-      },
-    { step: "build", name: "forceDeleteMiddleware", tags: ["FORCE_DELETE"] }
+    (next: (args: unknown) => Promise<unknown>) => async (args: { request?: { headers?: Record<string, string> } }) => {
+      if (args?.request?.headers) {
+        args.request.headers["X-Rustfs-Force-Delete"] = "true"
+      }
+      return next(args)
+    },
+    { step: "build", name: "forceDeleteMiddleware", tags: ["FORCE_DELETE"] },
   )
 }
 
-export function createDeleteTaskHelpers(
-  s3Client: S3Client,
-  config: DeleteTaskConfig = {}
-): DeleteTaskHelpers {
+export function createDeleteTaskHelpers(s3Client: S3Client, config: DeleteTaskConfig = {}): DeleteTaskHelpers {
   const maxRetries = config.maxRetries ?? 3
   const retryDelay = config.retryDelay ?? 1000
 
@@ -86,13 +82,7 @@ export function createDeleteTaskHelpers(
     if (task.status === lifecycle.canceled) return false
     if ((task.retryCount ?? 0) >= maxRetries) return false
     const errorMessage = String((error as Error)?.message ?? "").toLowerCase()
-    const nonRetryableErrors = [
-      "access denied",
-      "forbidden",
-      "invalid credentials",
-      "bucket not found",
-      "no such key",
-    ]
+    const nonRetryableErrors = ["access denied", "forbidden", "invalid credentials", "bucket not found", "no such key"]
     return !nonRetryableErrors.some((msg) => errorMessage.includes(msg))
   }
 
@@ -101,8 +91,7 @@ export function createDeleteTaskHelpers(
     perform,
     shouldRetry,
     isCanceledError: (error) =>
-      (error as Error)?.name === "AbortError" ||
-      String((error as Error)?.message ?? "").includes("canceled"),
+      (error as Error)?.name === "AbortError" || String((error as Error)?.message ?? "").includes("canceled"),
     maxRetries,
     retryDelay,
   }
@@ -110,7 +99,7 @@ export function createDeleteTaskHelpers(
   const createTasksFromItems = (
     items: { key: string; versionId?: string; forceDelete?: boolean }[],
     bucketName: string,
-    prefix?: string
+    prefix?: string,
   ): DeleteTask[] =>
     items.map((item) => ({
       id: `${Date.now()}-${Math.random().toString(36).slice(2, 11)}-${item.key}-${item.versionId ?? "latest"}`,
@@ -130,28 +119,23 @@ export function createDeleteTaskHelpers(
       retryCount: 0,
     }))
 
-  const createTasks = (
-    keys: string[],
-    bucketName: string,
-    prefix?: string,
-    options?: { forceDelete?: boolean }
-  ) =>
+  const createTasks = (keys: string[], bucketName: string, prefix?: string, options?: { forceDelete?: boolean }) =>
     createTasksFromItems(
       keys.map((key) => ({ key, forceDelete: options?.forceDelete })),
       bucketName,
-      prefix
+      prefix,
     )
 
   const createVersionedTasks = (
     items: { key: string; versionId?: string }[],
     bucketName: string,
     prefix?: string,
-    options?: { forceDelete?: boolean }
+    options?: { forceDelete?: boolean },
   ) =>
     createTasksFromItems(
       items.map((item) => ({ ...item, forceDelete: options?.forceDelete })),
       bucketName,
-      prefix
+      prefix,
     )
 
   return { handler, createTasks, createVersionedTasks }
diff --git a/lib/error-handler.ts b/lib/error-handler.ts
index bc27ffac..2457fdaa 100644
--- a/lib/error-handler.ts
+++ b/lib/error-handler.ts
@@ -9,11 +9,7 @@ export class ConfigLoadError extends Error {
   code: "INVALID_URL" | "STORAGE_ERROR" | "NETWORK_ERROR" | "UNKNOWN_ERROR"
   originalError?: Error
 
-  constructor(
-    message: string,
-    code: ConfigLoadError["code"] = "UNKNOWN_ERROR",
-    originalError?: Error
-  ) {
+  constructor(message: string, code: ConfigLoadError["code"] = "UNKNOWN_ERROR", originalError?: Error) {
     super(message)
     this.name = "ConfigLoadError"
     this.code = code
@@ -24,19 +20,13 @@ export class ConfigLoadError extends Error {
 export const parseApiError = async (response: Response): Promise<string> => {
   try {
     const errorData = await response.clone().json()
-    return (
-      (errorData as { message?: string }).message ||
-      JSON.stringify(errorData) ||
-      response.statusText
-    )
+    return (errorData as { message?: string }).message || JSON.stringify(errorData) || response.statusText
   } catch {
     try {
       const text = await response.clone().text()
       if (text) {
         if (text.trim().startsWith("<")) {
-          const match =
-            text.match(/<Message>(.*?)<\/Message>/i) ||
-            text.match(/<Error>(.*?)<\/Error>/i)
+          const match = text.match(/<Message>(.*?)<\/Message>/i) || text.match(/<Error>(.*?)<\/Error>/i)
           return match?.[1] ?? text
         }
         return text
@@ -48,47 +38,26 @@ export const parseApiError = async (response: Response): Promise<string> => {
   return response.statusText
 }
 
-export const handleConfigError = (
-  error: unknown,
-  context: string
-): ConfigLoadError => {
+export const handleConfigError = (error: unknown, context: string): ConfigLoadError => {
   if (error instanceof ConfigLoadError) {
     return error
   }
 
   if (error instanceof Error) {
     if (error.message.includes("Invalid URL")) {
-      return new ConfigLoadError(
-        `Invalid URL in ${context}: ${error.message}`,
-        "INVALID_URL",
-        error
-      )
+      return new ConfigLoadError(`Invalid URL in ${context}: ${error.message}`, "INVALID_URL", error)
     }
-    if (
-      error.message.includes("localStorage") ||
-      error.message.includes("storage")
-    ) {
-      return new ConfigLoadError(
-        `Storage error in ${context}: ${error.message}`,
-        "STORAGE_ERROR",
-        error
-      )
+    if (error.message.includes("localStorage") || error.message.includes("storage")) {
+      return new ConfigLoadError(`Storage error in ${context}: ${error.message}`, "STORAGE_ERROR", error)
     }
-    if (
-      error.message.includes("fetch") ||
-      error.message.includes("network")
-    ) {
-      return new ConfigLoadError(
-        `Network error in ${context}: ${error.message}`,
-        "NETWORK_ERROR",
-        error
-      )
+    if (error.message.includes("fetch") || error.message.includes("network")) {
+      return new ConfigLoadError(`Network error in ${context}: ${error.message}`, "NETWORK_ERROR", error)
     }
   }
 
   return new ConfigLoadError(
     `Unknown error in ${context}: ${error}`,
     "UNKNOWN_ERROR",
-    error instanceof Error ? error : new Error(String(error))
+    error instanceof Error ? error : new Error(String(error)),
   )
 }
diff --git a/lib/events.ts b/lib/events.ts
index fad25664..4945ef91 100644
--- a/lib/events.ts
+++ b/lib/events.ts
@@ -24,13 +24,10 @@ export const EVENT_DISPLAY_MAP: Record<string, string> = {
 }
 
 export const TYPE_BADGE_CLASSES: Record<NotificationItem["type"], string> = {
-  Lambda:
-    "bg-amber-100 text-amber-900 dark:bg-amber-900/40 dark:text-amber-100",
+  Lambda: "bg-amber-100 text-amber-900 dark:bg-amber-900/40 dark:text-amber-100",
   SQS: "bg-sky-100 text-sky-900 dark:bg-sky-900/40 dark:text-sky-100",
-  SNS:
-    "bg-emerald-100 text-emerald-900 dark:bg-emerald-900/40 dark:text-emerald-100",
-  Topic:
-    "bg-indigo-100 text-indigo-900 dark:bg-indigo-900/40 dark:text-indigo-100",
+  SNS: "bg-emerald-100 text-emerald-900 dark:bg-emerald-900/40 dark:text-emerald-100",
+  Topic: "bg-indigo-100 text-indigo-900 dark:bg-indigo-900/40 dark:text-indigo-100",
 }
 
 export function getDisplayEvents(events: string[]): string[] {
diff --git a/lib/export-file.ts b/lib/export-file.ts
index e6b53588..8f08edb6 100644
--- a/lib/export-file.ts
+++ b/lib/export-file.ts
@@ -20,15 +20,11 @@ export function exportFile(res: ExportFileRes, fileName: string) {
   const file = res.data
   const name = decodeURIComponent(res.headers.filename ?? "")
 
-  if (
-    typeof window !== "undefined" &&
-    "navigator" in window &&
-    "msSaveOrOpenBlob" in window.navigator
-  ) {
+  if (typeof window !== "undefined" && "navigator" in window && "msSaveOrOpenBlob" in window.navigator) {
     const blob = new Blob([file], { type: res.headers["content-type"] ?? "application/octet-stream" })
     ;(window.navigator as unknown as { msSaveOrOpenBlob: (blob: Blob, name: string) => void }).msSaveOrOpenBlob(
       blob,
-      fileName || name
+      fileName || name,
     )
   } else {
     const type = res.headers["content-type"] ?? "application/octet-stream"
diff --git a/lib/feedback/dialog.tsx b/lib/feedback/dialog.tsx
index 44bb5a6a..8324e448 100644
--- a/lib/feedback/dialog.tsx
+++ b/lib/feedback/dialog.tsx
@@ -50,7 +50,7 @@ export function DialogProvider({ children }: { children: React.ReactNode }) {
       setDialogs((prev) => prev.map((d) => (d.id === id ? { ...d, open: false } : d)))
       setTimeout(() => remove(id), REMOVAL_DELAY)
     },
-    [remove]
+    [remove],
   )
 
   const open = useCallback(
@@ -69,7 +69,7 @@ export function DialogProvider({ children }: { children: React.ReactNode }) {
         destroy: () => close(id),
       }
     },
-    [close]
+    [close],
   )
 
   const setOpen = useCallback(
@@ -77,7 +77,7 @@ export function DialogProvider({ children }: { children: React.ReactNode }) {
       if (value) return
       close(id)
     },
-    [close]
+    [close],
   )
 
   const controller: DialogController = {
@@ -87,9 +87,7 @@ export function DialogProvider({ children }: { children: React.ReactNode }) {
     setOpen,
   }
 
-  return (
-    <DialogContext.Provider value={controller}>{children}</DialogContext.Provider>
-  )
+  return <DialogContext.Provider value={controller}>{children}</DialogContext.Provider>
 }
 
 export function useDialogController() {
diff --git a/lib/feedback/message.tsx b/lib/feedback/message.tsx
index 0b442b4f..17a92118 100644
--- a/lib/feedback/message.tsx
+++ b/lib/feedback/message.tsx
@@ -24,11 +24,7 @@ export interface MessageApi {
 const MessageContext = createContext<MessageApi | null>(null)
 
 function createMessageApi(): MessageApi {
-  const show = (
-    type: "success" | "error" | "warning" | "info",
-    content: string,
-    options?: MessageOptions
-  ) => {
+  const show = (type: "success" | "error" | "warning" | "info", content: string, options?: MessageOptions) => {
     const mapped: { duration?: number; description?: string } = {}
     if (options?.duration !== undefined) {
       mapped.duration = options.duration === 0 ? Infinity : options.duration
@@ -51,10 +47,7 @@ function createMessageApi(): MessageApi {
     }
   }
 
-  const loading = (
-    content: string,
-    options?: MessageOptions
-  ): MessageHandle => {
+  const loading = (content: string, options?: MessageOptions): MessageHandle => {
     const mapped: { duration?: number } = {}
     if (options?.duration !== undefined) {
       mapped.duration = options.duration === 0 ? Infinity : options.duration
@@ -79,9 +72,7 @@ const messageApi = createMessageApi()
 
 export function MessageProvider({ children }: { children: React.ReactNode }) {
   const value = useMemo(() => messageApi, [])
-  return (
-    <MessageContext.Provider value={value}>{children}</MessageContext.Provider>
-  )
+  return <MessageContext.Provider value={value}>{children}</MessageContext.Provider>
 }
 
 export function useMessage(): MessageApi {
diff --git a/lib/i18n.ts b/lib/i18n.ts
index 73d3d9cf..181e378b 100644
--- a/lib/i18n.ts
+++ b/lib/i18n.ts
@@ -21,9 +21,7 @@ const LOCALE_FILE_MAP: Record<string, string> = {
 }
 
 export type Locale = keyof typeof LOCALE_FILE_MAP
-export const LOCALE_CODES: Locale[] = Object.keys(
-  LOCALE_FILE_MAP
-) as Locale[]
+export const LOCALE_CODES: Locale[] = Object.keys(LOCALE_FILE_MAP) as Locale[]
 
 const loadLocale = async (file: string) => {
   const mod = await import(`@/i18n/locales/${file}.json`)
diff --git a/lib/sts.ts b/lib/sts.ts
index ff38cd52..a1b97271 100644
--- a/lib/sts.ts
+++ b/lib/sts.ts
@@ -1,14 +1,11 @@
 import { AssumeRoleCommand, STSClient } from "@aws-sdk/client-sts"
-import type {
-  AwsCredentialIdentity,
-  AwsCredentialIdentityProvider,
-} from "@aws-sdk/types"
+import type { AwsCredentialIdentity, AwsCredentialIdentityProvider } from "@aws-sdk/types"
 import type { SiteConfig } from "@/types/config"
 
 export async function getStsToken(
   credentials: AwsCredentialIdentity | AwsCredentialIdentityProvider,
   roleArn: string,
-  customConfig: SiteConfig
+  customConfig: SiteConfig,
 ) {
   const stsClient = new STSClient({
     endpoint: customConfig.s3.endpoint,
diff --git a/lib/task-manager.ts b/lib/task-manager.ts
index 52055dc2..761edc0e 100644
--- a/lib/task-manager.ts
+++ b/lib/task-manager.ts
@@ -1,10 +1,4 @@
-export type TaskEventType =
-  | "enqueued"
-  | "running"
-  | "completed"
-  | "failed"
-  | "canceled"
-  | "drained"
+export type TaskEventType = "enqueued" | "running" | "completed" | "failed" | "canceled" | "drained"
 
 export type TaskEventHandler<TTask> = (task: TTask) => void
 export type AllCompletedEventHandler = () => void
@@ -32,17 +26,14 @@ export interface TaskHandler<TTask, TStatus extends string> {
   lifecycle: TaskLifecycleStatus<TStatus>
   perform: (task: TTask) => Promise<void>
   shouldRetry?: (task: TTask, error: unknown) => boolean
-  handleError?: (
-    task: TTask,
-    error: unknown
-  ) => Promise<"retry" | "handled" | "fail"> | "retry" | "handled" | "fail"
+  handleError?: (task: TTask, error: unknown) => Promise<"retry" | "handled" | "fail"> | "retry" | "handled" | "fail"
   isCanceledError?: (error: unknown) => boolean
   maxRetries?: number
   retryDelay?: number
 }
 
 export interface TaskManagerOptions<TTask extends ManagedTask<TStatus>, TStatus extends string> {
-  handlers: Record<string, TaskHandler<unknown, string>>
+  handlers: Record<string, TaskHandler<TTask, TStatus>>
   maxConcurrent?: number
   maxRetries?: number
   retryDelay?: number
@@ -54,7 +45,7 @@ type Listener = () => void
 
 export class TaskManager<TTask extends ManagedTask<TStatus>, TStatus extends string> {
   private tasks: TTask[] = []
-  private readonly handlers: Record<string, TaskHandler<unknown, string>>
+  private readonly handlers: Record<string, TaskHandler<TTask, TStatus>>
   readonly maxConcurrent: number
   readonly maxRetries: number
   readonly retryDelay: number
diff --git a/lib/upload-task.ts b/lib/upload-task.ts
index 85017067..38386ff8 100644
--- a/lib/upload-task.ts
+++ b/lib/upload-task.ts
@@ -32,10 +32,7 @@ export interface UploadTaskConfig {
 
 export interface UploadTaskHelpers {
   handler: TaskHandler<UploadTask, UploadStatus>
-  createTasks: (
-    items: { file: File; key: string }[],
-    bucketName: string
-  ) => UploadTask[]
+  createTasks: (items: { file: File; key: string }[], bucketName: string) => UploadTask[]
 }
 
 const lifecycle: TaskLifecycleStatus<UploadStatus> = {
@@ -47,10 +44,7 @@ const lifecycle: TaskLifecycleStatus<UploadStatus> = {
   paused: "paused",
 }
 
-export function createUploadTaskHelpers(
-  s3Client: S3Client,
-  config: UploadTaskConfig = {}
-): UploadTaskHelpers {
+export function createUploadTaskHelpers(s3Client: S3Client, config: UploadTaskConfig = {}): UploadTaskHelpers {
   const chunkSize = (config.chunkSize ?? 5) * 1024 * 1024
   const maxRetries = config.maxRetries ?? 3
   const retryDelay = config.retryDelay ?? 1000
@@ -142,7 +136,7 @@ async function putObject(task: UploadTask, s3Client: S3Client) {
       Body: file,
       ContentType: file.type || "application/octet-stream",
     }),
-    { abortSignal: abortController.signal }
+    { abortSignal: abortController.signal },
   )
   task.progress = 100
 }
@@ -163,7 +157,7 @@ async function multipartUpload(task: UploadTask, s3Client: S3Client, chunkSize:
           Key: key,
           ContentType: file.type || "application/octet-stream",
         }),
-        { abortSignal: abortController.signal }
+        { abortSignal: abortController.signal },
       )
       uploadId = createResponse.UploadId
       task.uploadId = uploadId
@@ -189,7 +183,7 @@ async function multipartUpload(task: UploadTask, s3Client: S3Client, chunkSize:
           PartNumber: partNumber,
           Body: chunk,
         }),
-        { abortSignal: abortController.signal }
+        { abortSignal: abortController.signal },
       )
       if (!ETag) throw new Error(`Failed to upload part ${partNumber}`)
       completedParts.push({ ETag, PartNumber: partNumber })
@@ -204,7 +198,7 @@ async function multipartUpload(task: UploadTask, s3Client: S3Client, chunkSize:
         UploadId: uploadId,
         MultipartUpload: { Parts: completedParts },
       }),
-      { abortSignal: abortController.signal }
+      { abortSignal: abortController.signal },
     )
     task.uploadId = undefined
     task.completedParts = undefined
@@ -212,9 +206,7 @@ async function multipartUpload(task: UploadTask, s3Client: S3Client, chunkSize:
     if (!task._pauseRequested && uploadId) {
       try {
         const { AbortMultipartUploadCommand } = await import("@aws-sdk/client-s3")
-        await s3Client.send(
-          new AbortMultipartUploadCommand({ Bucket: bucketName, Key: key, UploadId: uploadId })
-        )
+        await s3Client.send(new AbortMultipartUploadCommand({ Bucket: bucketName, Key: key, UploadId: uploadId }))
       } catch {
         // ignore cleanup errors
       }
diff --git a/lib/utils.ts b/lib/utils.ts
index 56592569..3948ac33 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -5,9 +5,6 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 
-export function valueUpdater<T>(
-  updater: (prev: T) => T,
-  setter: (value: T | ((prev: T) => T)) => void
-) {
+export function valueUpdater<T>(updater: (prev: T) => T, setter: (value: T | ((prev: T) => T)) => void) {
   setter(updater)
 }
diff --git a/postcss.config.mjs b/postcss.config.mjs
index 61e36849..2f8795a9 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -2,6 +2,6 @@ const config = {
   plugins: {
     "@tailwindcss/postcss": {},
   },
-};
+}
 
-export default config;
+export default config