From c8eb618a3aca63d7417540445318a63abfc7878b Mon Sep 17 00:00:00 2001
From: Mahen <mahennekkers27@gmail.com>
Date: Tue, 24 Feb 2026 21:32:10 +0700
Subject: [PATCH] feat: add option visibility list brand button.

---
 src/components/dashboards/BrandFilter.tsx     | 66 ++++++++++++++-----
 src/components/dashboards/DashboardClient.tsx |  4 +-
 src/hooks/useBrandFilter.ts                   | 17 ++++-
 3 files changed, 68 insertions(+), 19 deletions(-)

diff --git a/src/components/dashboards/BrandFilter.tsx b/src/components/dashboards/BrandFilter.tsx
index cf02cf5..9696831 100644
--- a/src/components/dashboards/BrandFilter.tsx
+++ b/src/components/dashboards/BrandFilter.tsx
@@ -2,10 +2,19 @@
 
 import { cn } from "@/lib/utils";
 import { useBrandFilter } from "@/src/hooks/useBrandFilter";
+import { Button } from "../ui/button";
 
 export function BrandFilter() {
-  const { brands, isLoading, totalCount, selectedBrand, handleSelect } =
-    useBrandFilter();
+  const {
+    isLoading,
+    totalCount,
+    selectedBrand,
+    visibleBrands,
+    isExpanded,
+    validBrands,
+    setIsExpanded,
+    handleSelect,
+  } = useBrandFilter();
 
   if (isLoading) {
     return (
@@ -29,27 +38,52 @@ export function BrandFilter() {
         Semua ({totalCount.toLocaleString()})
       </button>
 
-      {brands.map((brand) => {
-        if (brand.count === 0) return null;
+      <div className="flex flex-wrap gap-2">
+        {visibleBrands.map((brand) => {
+          const isActive =
+            selectedBrand?.toLowerCase() === brand.name.toLowerCase();
 
-        const isActive =
-          selectedBrand?.toLowerCase() === brand.name.toLowerCase();
+          return (
+            <button
+              key={brand.name}
+              onClick={() => handleSelect(brand.name)}
+              className={cn(
+                "rounded-lg border px-4 py-2 text-sm font-medium transition-all cursor-pointer",
+                isActive
+                  ? "border-primary bg-primary text-primary-foreground"
+                  : "border-border bg-card text-muted-foreground hover:border-primary/50 hover:text-foreground",
+              )}
+            >
+              {brand.name} ({brand.count.toLocaleString()})
+            </button>
+          );
+        })}
 
-        return (
+        {!isExpanded && validBrands.length > 3 && (
           <button
-            key={brand.name}
-            onClick={() => handleSelect(brand.name)}
+            onClick={() => setIsExpanded(true)}
             className={cn(
-              "rounded-lg border px-4 py-2 text-sm font-medium transition-all cursor-pointer",
-              isActive
-                ? "border-primary bg-primary text-primary-foreground"
-                : "border-border bg-card text-muted-foreground hover:border-primary/50 hover:text-foreground",
+              "rounded-lg border border-dashed px-4 py-2 text-sm font-medium hover:bg-accent transition-all cursor-pointer",
+              "flex-1 min-w-25 sm:flex-none",
             )}
           >
-            {brand.name} ({brand.count.toLocaleString()})
+            {validBrands.length - 3} Lainnya
           </button>
-        );
-      })}
+        )}
+
+        {isExpanded && (
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={() => {
+              setIsExpanded(false);
+            }}
+            className="text-red-500 hover:text-red-700 hover:bg-red-50 shrink-0"
+          >
+            ✕
+          </Button>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/src/components/dashboards/DashboardClient.tsx b/src/components/dashboards/DashboardClient.tsx
index 3e69b5a..988fc73 100644
--- a/src/components/dashboards/DashboardClient.tsx
+++ b/src/components/dashboards/DashboardClient.tsx
@@ -50,10 +50,10 @@ export default function DashboardClient() {
           <div className="mt-6 flex items-center justify-center gap-4 text-sm text-white/70">
             <span className="flex items-center gap-1">
               <TrendingUp className="h-4 w-4" />
-              Akurasi 92.4%
+              Akurasi 82.0%
             </span>
             <span>•</span>
-            <span>XGBoost + TF-IDF</span>
+            <span>XGBoost + SMOTE + Chi-Square</span>
             <span>•</span>
             <span>Real-time Analysis</span>
           </div>
diff --git a/src/hooks/useBrandFilter.ts b/src/hooks/useBrandFilter.ts
index 5590b2c..788b404 100644
--- a/src/hooks/useBrandFilter.ts
+++ b/src/hooks/useBrandFilter.ts
@@ -6,6 +6,7 @@ export const useBrandFilter = () => {
   const [brands, setBrands] = useState<{ name: string; count: number }[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const { selectedBrand, handleSelect } = useSelectSearch();
+  const [isExpanded, setIsExpanded] = useState(false);
 
   useEffect(() => {
     const fetchBrands = async () => {
@@ -28,5 +29,19 @@ export const useBrandFilter = () => {
 
   const totalCount = brands.reduce((sum, b) => sum + (b?.count || 0), 0);
 
-  return { brands, isLoading, totalCount, selectedBrand, handleSelect };
+  const validBrands = brands.filter((brand) => brand.count > 0);
+
+  const visibleBrands = isExpanded ? validBrands : validBrands.slice(0, 3);
+
+  return {
+    brands,
+    isLoading,
+    totalCount,
+    selectedBrand,
+    visibleBrands,
+    validBrands,
+    isExpanded,
+    handleSelect,
+    setIsExpanded,
+  };
 };