feat: integrate models endpoint fastAPI to analyzer form

src/components/dashboards/DashboardClient.tsx

@@ -16,11 +16,11 @@ import {
 } from "@/src/app/dashboard/lib/data";
 import { ModelInfoSkeleton } from "../skeletons/ModelInfoSkeleton";
 import { ModelInfo } from "./ModelInfo";
-import { SentimentAnalyzer } from "./SentimentAnalyzer";
 import { BrandFilter } from "./BrandFilter";
 import { ReviewTable } from "./ReviewTable";
 import { SentimentChart, TrendChart, WordCloud } from "@/src/utils/dImports";
 import { useDashboards } from "@/src/hooks/useDashboard";
+import SentimentForm from "./SentimentAnalyzer";
 
 export default function DashboardClient() {
   const {
@@ -136,7 +136,7 @@ export default function DashboardClient() {
         </div>
 
         <div className="mb-8">
-          <SentimentAnalyzer />
+          <SentimentForm />
         </div>
 
         <div className="space-y-6">

src/components/dashboards/ReviewTable.tsx

@@ -8,7 +8,6 @@ import {
 } from "../../components/ui/table";
 import { ReviewTableProps } from "@/src/types";
 import getSentimentBadge from "./SentimentBadge";
-import renderStars from "./RenderStars";
 
 export function ReviewTable({ reviews }: ReviewTableProps) {
   return (
@@ -48,7 +47,7 @@ export function ReviewTable({ reviews }: ReviewTableProps) {
                 </p>
               </TableCell>
 
-              <TableCell>{renderStars(review.rating)}</TableCell>
+              {/* <TableCell>{renderStars(review.rating)}</TableCell> */}
               <TableCell>{getSentimentBadge(review.sentiment)}</TableCell>
               <TableCell className="text-right">
                 <span className="font-medium">

src/components/dashboards/SentimentAnalyzer.tsx

@@ -1,10 +1,8 @@
-import { Button } from "../../components/ui/button";
+"use client";
-import { Textarea } from "../../components/ui/textarea";
+
-import { Badge } from "../../components/ui/badge";
+import { Send, Loader2, AlertCircle, Sparkles } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { Loader2, Send, Sparkles } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
-import { Input } from "../ui/input";
+import { cn } from "@/lib/utils";
 import {
   Combobox,
   ComboboxContent,
@@ -14,25 +12,30 @@ import {
   ComboboxList,
 } from "../ui/combobox";
 import { Item, ItemContent, ItemDescription, ItemTitle } from "../ui/item";
-import { useSentiment } from "@/src/hooks/useSentiment";
+import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
+import { Button } from "../ui/button";
+import { Badge } from "../ui/badge";
+import { getSentimentDisplay } from "@/src/utils/datas";
+import { useSentimentForm } from "@/src/hooks/useSentimentForm";
 
-export function SentimentAnalyzer() {
+export default function SentimentForm() {
   const {
     selectedModel,
-    setSelectedModel,
-    text,
-    setText,
-    laptopName,
-    setLaptopName,
-    isAnalyzing,
-    analyzeText,
-    result,
-    getSentimentDisplay,
     searchQuery,
-    setSearchQuery,
+    laptopName,
+    text,
+    isAnalyzing,
+    result,
     filteredItems,
     isFormValid,
-  } = useSentiment();
+    error,
+    analyzeText,
+    setSelectedModel,
+    setSearchQuery,
+    setLaptopName,
+    setText,
+  } = useSentimentForm();
 
   return (
     <div className="rounded-xl border bg-card p-6">
@@ -40,17 +43,29 @@ export function SentimentAnalyzer() {
         <Sparkles className="h-5 w-5 text-primary" />
         <h3 className="text-lg font-semibold">Analisis Sentimen Real-time</h3>
       </div>
+
       <p className="mb-4 text-sm text-muted-foreground">
         Masukkan ulasan produk laptop untuk menganalisis sentimennya menggunakan
         model XGBoost
       </p>
 
-      <form action="">
+      <form onSubmit={(e) => e.preventDefault()}>
         <div className="space-y-4">
+          {error && (
+            <div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md flex items-center gap-2">
+              <AlertCircle size={16} />
+              {error}
+            </div>
+          )}
+
           <div className="flex gap-4">
             <Combobox
               value={selectedModel}
-              onValueChange={(val) => setSelectedModel(val)}
+              onValueChange={(value) => {
+                if (value !== null) {
+                  setSelectedModel(value);
+                }
+              }}
               itemToStringValue={(model) => model?.label ?? ""}
             >
               <ComboboxInput
@@ -58,14 +73,12 @@ export function SentimentAnalyzer() {
                 className="focus:ring-primary/20 border-border w-1/2"
                 onChange={(e) => setSearchQuery(e.target.value)}
               />
-
+              <ComboboxContent className="bg-card border-border shadow-lg animate-in fade-in zoom-in-95 duration-200 z-50">
-              <ComboboxContent className="bg-card border-border shadow-lg animate-in fade-in zoom-in-95 duration-200">
                 {filteredItems.length === 0 && (
                   <ComboboxEmpty className="text-muted-foreground py-3 px-4 text-sm text-center">
                     Model "{searchQuery}" tidak ditemukan.
                   </ComboboxEmpty>
                 )}
-
                 <ComboboxList className="p-1">
                   {filteredItems.map((model) => (
                     <ComboboxItem
@@ -78,8 +91,8 @@ export function SentimentAnalyzer() {
                           <ItemTitle className="whitespace-nowrap font-medium text-foreground">
                             {model.label}
                           </ItemTitle>
-                          <ItemDescription className="text-muted-foreground/80">
+                          <ItemDescription className="text-muted-foreground/80 text-xs">
-                            {model.desc} ({model.code})
+                            {model.desc}
                           </ItemDescription>
                         </ItemContent>
                       </Item>
@@ -91,14 +104,14 @@ export function SentimentAnalyzer() {
 
             <Input
               className="w-1/2"
-              placeholder="Masukkan nama laptop"
+              placeholder="Masukkan nama laptop (misal: Asus ROG)"
               value={laptopName}
               onChange={(e) => setLaptopName(e.target.value)}
             />
           </div>
 
           <Textarea
-            placeholder="Contoh: Laptop ini sangat bagus..."
+            placeholder="Tulis ulasan laptop di sini... (Contoh: Baterainya awet tapi kipas berisik)"
             value={text}
             onChange={(e) => setText(e.target.value)}
             rows={4}
@@ -113,7 +126,7 @@ export function SentimentAnalyzer() {
             {isAnalyzing ? (
               <>
                 <Loader2 className="h-4 w-4 animate-spin" />
-                Menganalisis...
+                Sedang Menganalisis...
               </>
             ) : (
               <>
@@ -139,23 +152,23 @@ export function SentimentAnalyzer() {
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-3">
                     {(() => {
-                      const Icon = getSentimentDisplay(result.sentiment).icon;
+                      const {
+                        icon: Icon,
+                        bgClass,
+                        textClass,
+                      } = getSentimentDisplay(result.sentiment);
                       return (
                         <div
                           className={cn(
-                            "flex h-12 w-12 items-center justify-center rounded-full",
+                            "flex h-12 w-12 items-center justify-center rounded-full bg-white/50",
-                            getSentimentDisplay(result.sentiment).bgClass,
+                            textClass,
                           )}
                         >
-                          <Icon
+                          <Icon className="h-6 w-6" />
-                            className={cn(
-                              "h-6 w-6",
-                              getSentimentDisplay(result.sentiment).textClass,
-                            )}
-                          />
                         </div>
                       );
                     })()}
+
                     <div>
                       <p
                         className={cn(
@@ -166,22 +179,24 @@ export function SentimentAnalyzer() {
                         {getSentimentDisplay(result.sentiment).label}
                       </p>
                       <p className="text-sm text-muted-foreground">
-                        Confidence: {(result.confidence * 100).toFixed(1)}%
+                        Tingkat Keyakinan (Confidence):{" "}
+                        {(result.confidence * 100).toFixed(1)}%
                       </p>
                     </div>
                   </div>
                 </div>
 
-                {result.keywords.length > 0 && (
+                {result.keywords && result.keywords.length > 0 && (
-                  <div className="mt-4">
+                  <div className="mt-4 pt-4 border-t border-black/5 dark:border-white/5">
-                    <p className="mb-2 text-sm font-medium text-muted-foreground">
+                    <p className="mb-2 text-sm font-medium text-muted-foreground flex items-center gap-2">
                       Kata Kunci Terdeteksi:
                     </p>
                     <div className="flex flex-wrap gap-2">
                       {result.keywords.map((keyword, index) => (
                         <Badge
                           key={index}
-                          className="text-xs bg-white text-black"
+                          variant="secondary"
+                          className="text-xs px-2 py-1 bg-white/80 dark:bg-black/20 hover:bg-white border-black/10"
                         >
                           {keyword}
                         </Badge>

src/components/dashboards/SentimentBadge.tsx

@@ -3,16 +3,16 @@ import { Badge } from "../ui/badge";
 import { cn } from "@/lib/utils";
 
 const getSentimentBadge = (sentiment: Review["sentiment"]) => {
-  const styles = {
+  const styles: Record<Review["sentiment"], string> = {
-    positif: "sentiment-positive",
+    positive: "sentiment-positive",
-    negatif: "sentiment-negative",
+    negative: "sentiment-negative",
-    netral: "sentiment-neutral",
+    neutral: "sentiment-neutral",
   };
 
-  const labels = {
+  const labels: Record<Review["sentiment"], string> = {
-    positif: "Positif",
+    positive: "Positif",
-    negatif: "Negatif",
+    negative: "Negatif",
-    netral: "Netral",
+    neutral: "Netral",
   };
 
   return (

src/hooks/useSentimentForm.ts

@@ -0,0 +1,81 @@
+"use client";
+
+import { useState } from "react";
+import { MODEL_OPTIONS } from "../utils/datas";
+
+export const useSentimentForm = () => {
+  const [selectedModel, setSelectedModel] = useState(MODEL_OPTIONS[2]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [laptopName, setLaptopName] = useState("");
+  const [text, setText] = useState("");
+  const [isAnalyzing, setIsAnalyzing] = useState(false);
+  const [result, setResult] = useState<{
+    sentiment: string;
+    confidence: number;
+    keywords: string[];
+  } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const filteredItems = MODEL_OPTIONS.filter((item) =>
+    item.label.toLowerCase().includes(searchQuery.toLowerCase()),
+  );
+
+  const isFormValid = selectedModel && laptopName.trim() && text.trim();
+
+  const analyzeText = async (e: any) => {
+    e.preventDefault();
+    if (!isFormValid) return;
+
+    setIsAnalyzing(true);
+    setError(null);
+    setResult(null);
+
+    try {
+      const response = await fetch("http://127.0.0.1:8000/predict", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          laptop_name: laptopName,
+          review_text: text,
+          model_type: selectedModel.code,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Error: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+
+      setResult({
+        sentiment: data.sentiment,
+        confidence: data.confidenceScore,
+        keywords: data.keywords || [],
+      });
+    } catch (err) {
+      console.error("Failed to analyze:", err);
+      setError("Gagal menghubungi server. Pastikan API berjalan.");
+    } finally {
+      setIsAnalyzing(false);
+    }
+  };
+
+  return {
+    selectedModel,
+    searchQuery,
+    laptopName,
+    text,
+    isAnalyzing,
+    result,
+    filteredItems,
+    isFormValid,
+    error,
+    analyzeText,
+    setSelectedModel,
+    setSearchQuery,
+    setLaptopName,
+    setText,
+  };
+};

src/utils/datas.ts

@@ -0,0 +1,51 @@
+import { Frown, Meh, Smile } from "lucide-react";
+
+export const MODEL_OPTIONS = [
+  {
+    label: "Model XGBoost (Baseline)",
+    code: "baseline",
+    desc: "Raw Data (Imbalanced)",
+  },
+  {
+    label: "Model XGBoost (Tuned)",
+    code: "tuned",
+    desc: "Hyperparameter Tuned",
+  },
+  {
+    label: "Model XGBoost (Optimized)",
+    code: "optimized",
+    desc: "Pipeline (SMOTE + Chi2)",
+  },
+];
+
+export const getSentimentDisplay = (sentiment: string) => {
+  switch (sentiment?.toLowerCase()) {
+    case "positive":
+      return {
+        label: "Positif",
+        icon: Smile,
+        bgClass:
+          "bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800",
+        textClass: "text-green-600 dark:text-green-400",
+        borderClass: "border-green-200",
+      };
+    case "negative":
+      return {
+        label: "Negatif",
+        icon: Frown,
+        bgClass:
+          "bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800",
+        textClass: "text-red-600 dark:text-red-400",
+        borderClass: "border-red-200",
+      };
+    default:
+      return {
+        label: "Netral",
+        icon: Meh,
+        bgClass:
+          "bg-gray-50 border-gray-200 dark:bg-gray-800 dark:border-gray-700",
+        textClass: "text-gray-600 dark:text-gray-400",
+        borderClass: "border-gray-200",
+      };
+  }
+};