From 64fc7134403ae7d68d6552df5fc9649460501de1 Mon Sep 17 00:00:00 2001
From: nntrivi2001 <vinnt@smartgift.vn>
Date: Wed, 26 Aug 2026 08:39:57 +0700
Subject: [PATCH] fix(dashboard): swap Analytics/Monitor tab order, shrink Sagi
 avatar size

Sagi avatar 90->68px, tab buttons render Analytics before Monitor.
---
 client/src/components/Sagi/SagiAvatar.tsx     |  2 +-
 client/src/components/Sagi/useSagiPosition.ts |  2 +-
 client/src/pages/Dashboard.tsx                | 20 ++++-----
 .../screens.snapshot.test.tsx.snap            | 42 +++++++++----------
 4 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/client/src/components/Sagi/SagiAvatar.tsx b/client/src/components/Sagi/SagiAvatar.tsx
index 45ab4b90..c959f9d1 100644
--- a/client/src/components/Sagi/SagiAvatar.tsx
+++ b/client/src/components/Sagi/SagiAvatar.tsx
@@ -76,7 +76,7 @@ if (typeof window !== "undefined") {
   });
 }
 
-export function SagiAvatar({ mood, reducedMotion, size = 90 }: SagiAvatarProps) {
+export function SagiAvatar({ mood, reducedMotion, size = 68 }: SagiAvatarProps) {
   const rootRef = useRef<SVGSVGElement | null>(null);
   const rafRef = useRef<number>();
   const [pupil, setPupil] = useState({ x: 0, y: 0 });
diff --git a/client/src/components/Sagi/useSagiPosition.ts b/client/src/components/Sagi/useSagiPosition.ts
index 1cfdef9c..acbdded6 100644
--- a/client/src/components/Sagi/useSagiPosition.ts
+++ b/client/src/components/Sagi/useSagiPosition.ts
@@ -74,7 +74,7 @@ import { sagiPrefs, type SagiPos } from "./prefs";
 import type { PointerEvent as ReactPointerEvent } from "react";
 
 // Avatar footprint + edge gap, in px. SIZE matches SagiAvatar's default size.
-export const SAGI_SIZE = 90;
+export const SAGI_SIZE = 68;
 export const SAGI_MARGIN = 16;
 const DRAG_THRESHOLD = 5;
 
diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx
index 916a21b9..1f0363e6 100644
--- a/client/src/pages/Dashboard.tsx
+++ b/client/src/pages/Dashboard.tsx
@@ -2554,16 +2554,6 @@ export function Dashboard() {
         <div className="flex items-center gap-3">
           {/* Tabs */}
           <div className="flex bg-surface-2 rounded-lg p-0.5 border border-border">
-            <button
-              onClick={() => setActiveTab("monitor")}
-              className={`px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 ${
-                activeTab === "monitor"
-                  ? "bg-accent/15 text-accent shadow-sm"
-                  : "text-fg-muted hover:text-fg-secondary"
-              }`}
-            >
-              <Activity className="w-3.5 h-3.5" /> Monitor
-            </button>
             <button
               onClick={() => setActiveTab("analytics")}
               className={`px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 ${
@@ -2574,6 +2564,16 @@ export function Dashboard() {
             >
               <BarChart3 className="w-3.5 h-3.5" /> Analytics
             </button>
+            <button
+              onClick={() => setActiveTab("monitor")}
+              className={`px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 ${
+                activeTab === "monitor"
+                  ? "bg-accent/15 text-accent shadow-sm"
+                  : "text-fg-muted hover:text-fg-secondary"
+              }`}
+            >
+              <Activity className="w-3.5 h-3.5" /> Monitor
+            </button>
             <button
               onClick={() => setActiveTab("health")}
               className={`px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 ${
diff --git a/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap b/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
index b44e4349..7a37fe43 100644
--- a/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
+++ b/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
@@ -2557,27 +2557,6 @@ exports[`screen snapshots > Dashboard 1`] = `
         <div
           class="flex bg-surface-2 rounded-lg p-0.5 border border-border"
         >
-          <button
-            class="px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 text-fg-muted hover:text-fg-secondary"
-          >
-            <svg
-              class="lucide lucide-activity w-3.5 h-3.5"
-              fill="none"
-              height="24"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
-              />
-            </svg>
-             Monitor
-          </button>
           <button
             class="px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 bg-accent/15 text-accent shadow-sm"
           >
@@ -2608,6 +2587,27 @@ exports[`screen snapshots > Dashboard 1`] = `
             </svg>
              Analytics
           </button>
+          <button
+            class="px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 text-fg-muted hover:text-fg-secondary"
+          >
+            <svg
+              class="lucide lucide-activity w-3.5 h-3.5"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
+              />
+            </svg>
+             Monitor
+          </button>
           <button
             class="px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 text-fg-muted hover:text-fg-secondary"
           >