feat: change header label to nav analysis button.

src/components/dashboards/DashboardClient.tsx

@@ -8,6 +8,7 @@ import {
   Meh,
   MessageSquareText,
   Smile,
+  Sparkles,
   TrendingUp,
 } from "lucide-react";
 import { StatCard } from "./StatCard";
@@ -19,6 +20,7 @@ import { useDashboards } from "@/src/hooks/useDashboard";
 import { WordCloud } from "./WordCloud";
 import AnalysisClient from "./AnalysisClient";
 import Footer from "./Footer";
+import { Button } from "../ui/button";
 
 export default function DashboardClient() {
   const {
@@ -29,6 +31,7 @@ export default function DashboardClient() {
     loading,
     modelData,
     percentage,
+    scrollToResult,
   } = useDashboards();
 
   return (
@@ -47,15 +50,14 @@ export default function DashboardClient() {
             Sistem klasifikasi sentimen menggunakan algoritma XGBoost untuk
             menganalisis ulasan produk laptop pada platform Tokopedia
           </p>
-          <div className="mt-6 flex items-center justify-center gap-4 text-sm text-white/70">
+          <div className="flex items-center justify-center gap-4 text-sm text-white/70">
-            <span className="flex items-center gap-1">
+            <Button
-              <TrendingUp className="h-4 w-4" />
+              onClick={scrollToResult}
-              Akurasi 82.0%
+              className="bg-[#F8FBFF] cursor-pointer hover:bg-card hover:text-primary text-black mt-4"
-            </span>
+            >
-            <span>•</span>
+              <Sparkles className="h-5 w-5" />
-            <span>XGBoost + SMOTE + Chi-Square</span>
+              <span>Coba Analisis Sentimen</span>
-            <span>•</span>
+            </Button>
-            <span>Real-time Analysis</span>
           </div>
         </div>
 
@@ -133,9 +135,11 @@ export default function DashboardClient() {
           )}
         </div>
 
-        <div className="mb-8">
+        <section id="analysis-form" className="mt-10 scroll-mt-50">
-          <AnalysisClient />
+          <div className="mb-8 ">
-        </div>
+            <AnalysisClient />
+          </div>
+        </section>
 
         <div className="space-y-6">
           <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">

src/hooks/useDashboard.ts

@@ -67,6 +67,13 @@ export const useDashboards = () => {
   const percentage = (value: number, total: number) =>
     total > 0 ? ((value / total) * 100).toFixed(1) : "0.0";
 
+  const scrollToResult = () => {
+    const element = document.getElementById("analysis-form");
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
   return {
     totalReviews: stats.totalReviews,
     positiveCount: stats.positive,
@@ -78,5 +85,6 @@ export const useDashboards = () => {
     modelData,
     setSelectedBrand,
     percentage,
+    scrollToResult,
   };
 };