feat: add option visibility list brand button.

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,9 +38,8 @@ 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();
 
@@ -50,6 +58,32 @@ export function BrandFilter() {
             </button>
           );
         })}
+
+        {!isExpanded && validBrands.length > 3 && (
+          <button
+            onClick={() => setIsExpanded(true)}
+            className={cn(
+              "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",
+            )}
+          >
+            {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>
   );
 }

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>

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,
+  };
 };