Improve Products page with search, filters, and enhanced UX

Enhancements:
- Add search bar with real-time filtering
- Add category filter buttons (Semua, Webinar, Bootcamp, etc.)
- Show result count ("Menampilkan X dari Y produk")
- Add clear/reset filters button
- Remove booking button from banner (redundant with card)
- Improve banner styling with gradient and rounded-xl

Consulting card improvements:
- Add decorative background element
- Better description of service
- Add feature icons (Clock, Calendar)
- Change price display from "menit" to "sesi" (more premium)
- Improve button text ("Booking Jadwal")
- Use primary color for price and icons

Product card improvements:
- Use stripHtml() for description instead of dangerouslySetInnerHTML
- Fix spacing: add gap-2 between title and badge, shrink-0 on badge
- Larger price display (text-3xl)
- Add discount percentage badge for sale items
- Color sale price with primary color
- Add Check icon for "in cart" state
- Green background for added items (bg-green-500)
- Items-baseline for better price alignment
- Change grid from lg: to xl: for better responsiveness

Empty states:
- Better empty state with Package icon for no products
- New "no results found" state with Search icon
- Add reset filter button to empty state

Technical:
- Add filteredProducts state and logic
- Add searchQuery and selectedType states
- Add clearFilters function
- Import new icons: Clock, Calendar, Check, Search, X
- Import Input component for search bar

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/pages/Products.tsx

@@ -9,7 +9,8 @@ import { useCart } from '@/contexts/CartContext';
 import { toast } from '@/hooks/use-toast';
 import { Skeleton } from '@/components/ui/skeleton';
 import { formatIDR } from '@/lib/format';
-import { Video } from 'lucide-react';
+import { Video, Clock, Calendar, Package, Check, Search, X } from 'lucide-react';
+import { Input } from '@/components/ui/input';
 
 interface Product {
   id: string;
@@ -32,6 +33,8 @@ export default function Products() {
   const [products, setProducts] = useState<Product[]>([]);
   const [consultingSettings, setConsultingSettings] = useState<ConsultingSettings | null>(null);
   const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedType, setSelectedType] = useState<string>('all');
   const { addItem, items } = useCart();
 
   useEffect(() => {
@@ -93,6 +96,22 @@ export default function Products() {
     return tmp.textContent || tmp.innerText || '';
   };
 
+  // Filter products based on search and type
+  const filteredProducts = products.filter((product) => {
+    const matchesSearch = product.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                         stripHtml(product.description).toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesType = selectedType === 'all' || product.type === selectedType;
+    return matchesSearch && matchesType;
+  });
+
+  // Get unique product types for filter
+  const productTypes = ['all', ...Array.from(new Set(products.map(p => p.type)))];
+
+  const clearFilters = () => {
+    setSearchQuery('');
+    setSelectedType('all');
+  };
+
   return (
     <AppLayout>
       <div className="container mx-auto px-4 py-8">
@@ -101,9 +120,8 @@ export default function Products() {
 
         {/* Consulting Availability Banner */}
         {!loading && consultingSettings?.is_consulting_enabled && (
-          <div className="mb-6 p-4 bg-primary/10 border-2 border-primary rounded-lg flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className="bg-primary text-primary-foreground p-2 rounded-full">
+          <div className="mb-6 p-4 bg-gradient-to-r from-primary/10 via-primary/5 to-transparent border-2 border-primary/30 rounded-xl flex items-center gap-3 hover:border-primary/50 transition-colors">
+            <div className="bg-primary text-primary-foreground p-2 rounded-full shrink-0">
               <Video className="w-5 h-5" />
             </div>
             <div>
@@ -113,11 +131,62 @@ export default function Products() {
               </p>
             </div>
           </div>
-            <Link to="/consulting">
-              <Button size="sm" className="shadow-sm">
-                Booking
+        )}
+
+        {/* Search and Filter */}
+        {!loading && products.length > 0 && (
+          <div className="mb-6 space-y-4">
+            {/* Search Bar */}
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
+              <Input
+                type="text"
+                placeholder="Cari produk..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-10 border-2"
+              />
+              {searchQuery && (
+                <button
+                  onClick={() => setSearchQuery('')}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                >
+                  <X className="w-5 h-5" />
+                </button>
+              )}
+            </div>
+
+            {/* Category Filter */}
+            <div className="flex flex-wrap gap-2 items-center">
+              <span className="text-sm font-medium text-muted-foreground">Kategori:</span>
+              {productTypes.map((type) => (
+                <Button
+                  key={type}
+                  variant={selectedType === type ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => setSelectedType(type)}
+                  className={selectedType === type ? 'shadow-sm' : 'border-2'}
+                >
+                  {type === 'all' ? 'Semua' : getTypeLabel(type)}
                 </Button>
-            </Link>
+              ))}
+              {(searchQuery || selectedType !== 'all') && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={clearFilters}
+                  className="text-muted-foreground hover:text-destructive"
+                >
+                  <X className="w-4 h-4 mr-1" />
+                  Reset
+                </Button>
+              )}
+            </div>
+
+            {/* Results Count */}
+            <p className="text-sm text-muted-foreground">
+              Menampilkan {filteredProducts.length} dari {products.length} produk
+            </p>
           </div>
         )}
 
@@ -136,34 +205,47 @@ export default function Products() {
             ))}
           </div>
         ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
             {/* Consulting Card - Only show when enabled */}
             {consultingSettings?.is_consulting_enabled && (
-              <Card className="border-2 border-primary shadow-sm hover:shadow-md transition-shadow bg-primary/5">
-                <CardHeader>
-                  <div className="flex justify-between items-start">
+              <Card className="border-2 border-primary shadow-md hover:shadow-lg transition-all bg-gradient-to-br from-primary/10 to-primary/5 relative overflow-hidden">
+                {/* Decorative element */}
+                <div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full -translate-y-1/2 translate-x-1/2" />
+
+                <CardHeader className="relative">
+                  <div className="flex justify-between items-start gap-2">
                     <CardTitle className="text-xl flex items-center gap-2">
-                      <Video className="w-5 h-5" />
+                      <Video className="w-5 h-5 text-primary" />
                       Konsultasi 1-on-1
                     </CardTitle>
-                    <Badge className="bg-primary">Konsultasi</Badge>
+                    <Badge className="bg-primary text-white shadow-sm shrink-0">
+                      Konsultasi
+                    </Badge>
                   </div>
-                  <CardDescription className="line-clamp-2">
-                    Sesi konsultasi pribadi dengan mentor. Pilih waktu dan durasi sesuai kebutuhan Anda.
+                  <CardDescription className="text-base">
+                    Sesi konsultasi pribadi dengan mentor. Diskusikan masalah spesifik dan dapatkan solusi langsung.
                   </CardDescription>
                 </CardHeader>
-                <CardContent>
-                  <div className="flex items-center gap-2 mb-4">
-                    <span className="text-2xl font-bold">
+                <CardContent className="relative">
+                  <div className="space-y-3 mb-4">
+                    <div className="flex items-center gap-2 text-sm">
+                      <Clock className="w-4 h-4 text-primary" />
+                      <span>{consultingSettings.consulting_block_duration_minutes} menit per sesi</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-sm">
+                      <Calendar className="w-4 h-4 text-primary" />
+                      <span>Pilih jadwal yang tersedia</span>
+                    </div>
+                    <div className="flex items-baseline gap-1 pt-2">
+                      <span className="text-3xl font-bold text-primary">
                         {formatIDR(consultingSettings.consulting_block_price)}
                       </span>
-                    <span className="text-muted-foreground">
-                      / {consultingSettings.consulting_block_duration_minutes} menit
-                    </span>
+                      <span className="text-muted-foreground">/ sesi</span>
+                    </div>
                   </div>
                   <Link to="/consulting">
-                    <Button className="w-full shadow-sm">
-                      Booking Sekarang
+                    <Button className="w-full shadow-md hover:shadow-lg transition-shadow">
+                      Booking Jadwal
                     </Button>
                   </Link>
                 </CardContent>
@@ -171,48 +253,81 @@ export default function Products() {
             )}
 
             {/* Regular Products */}
-            {products.map((product) => (
+            {filteredProducts.map((product) => (
               <Card key={product.id} className="border-2 border-border shadow-sm hover:shadow-md transition-shadow">
-                <CardHeader>
-                  <div className="flex justify-between items-start">
-                    <CardTitle className="text-xl">{product.title}</CardTitle>
-                    <Badge className="bg-secondary">{getTypeLabel(product.type)}</Badge>
+                <CardHeader className="pb-4">
+                  <div className="flex justify-between items-start gap-2 mb-2">
+                    <CardTitle className="text-xl line-clamp-1">{product.title}</CardTitle>
+                    <Badge variant="outline" className="shrink-0">
+                      {getTypeLabel(product.type)}
+                    </Badge>
                   </div>
-                  <CardDescription 
-                    className="line-clamp-2"
-                    dangerouslySetInnerHTML={{ __html: product.description }}
-                  />
+                  <CardDescription className="line-clamp-2">
+                    {stripHtml(product.description)}
+                  </CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <div className="flex items-center gap-2 mb-4">
+                  <div className="flex items-baseline gap-2 mb-4">
                     {product.sale_price ? (
                       <>
-                        <span className="text-2xl font-bold">{formatIDR(product.sale_price)}</span>
-                        <span className="text-muted-foreground line-through">{formatIDR(product.price)}</span>
+                        <span className="text-3xl font-bold text-primary">
+                          {formatIDR(product.sale_price)}
+                        </span>
+                        <span className="text-lg text-muted-foreground line-through">
+                          {formatIDR(product.price)}
+                        </span>
+                        <Badge variant="destructive" className="ml-2">
+                          -{Math.round((1 - product.sale_price / product.price) * 100)}%
+                        </Badge>
                       </>
                     ) : (
-                      <span className="text-2xl font-bold">{formatIDR(product.price)}</span>
+                      <span className="text-3xl font-bold">{formatIDR(product.price)}</span>
                     )}
                   </div>
                   <div className="flex gap-2">
                     <Link to={`/products/${product.slug}`} className="flex-1">
-                      <Button variant="outline" className="w-full border-2">Lihat Detail</Button>
+                      <Button variant="outline" size="default" className="w-full border-2">
+                        Lihat Detail
+                      </Button>
                     </Link>
                     <Button
                       onClick={() => handleAddToCart(product)}
                       disabled={isInCart(product.id)}
-                      className="shadow-xs"
+                      size="default"
+                      className={isInCart(product.id)
+                        ? "bg-green-500 hover:bg-green-600 text-white"
+                        : "shadow-sm"
+                      }
                     >
-                      {isInCart(product.id) ? 'Di Keranjang' : 'Tambah'}
+                      {isInCart(product.id) ? (
+                        <><Check className="w-4 h-4 mr-1" /> Di Keranjang</>
+                      ) : (
+                        "Tambah"
+                      )}
                     </Button>
                   </div>
                 </CardContent>
               </Card>
             ))}
 
+            {/* Empty State */}
+            {filteredProducts.length === 0 && products.length > 0 && (
+              <div className="col-span-full text-center py-16">
+                <Search className="w-16 h-16 mx-auto mb-4 text-muted-foreground/50" />
+                <h3 className="text-xl font-semibold mb-2">Tidak Ada Produk Ditemukan</h3>
+                <p className="text-muted-foreground mb-4">Coba kata kunci atau kategori lain.</p>
+                <Button onClick={clearFilters} variant="outline">
+                  <X className="w-4 h-4 mr-2" />
+                  Reset Filter
+                </Button>
+              </div>
+            )}
+
             {products.length === 0 && !consultingSettings?.is_consulting_enabled && (
-              <div className="col-span-full text-center py-12">
-                <p className="text-muted-foreground">Belum ada produk tersedia.</p>
+              <div className="col-span-full text-center py-16">
+                <Package className="w-16 h-16 mx-auto mb-4 text-muted-foreground/50" />
+                <h3 className="text-xl font-semibold mb-2">Belum Ada Produk</h3>
+                <p className="text-muted-foreground">Kami sedang mempersiapkan produk menarik untuk Anda.</p>
               </div>
             )}
           </div>