Add filters to Member Access and Member Orders pages

- Member Access: Add product kind filter pills + search input
- Member Orders: Add order status filter pills with counts
- Both pages show results count and empty state when no results
- Include reset filter button and clear search functionality

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

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

src/pages/member/MemberAccess.tsx

@@ -7,7 +7,8 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Video, Calendar, BookOpen, ArrowRight } from 'lucide-react';
+import { Video, Calendar, BookOpen, ArrowRight, Search, X } from 'lucide-react';
+import { Input } from '@/components/ui/input';
 
 interface UserAccess {
   id: string;
@@ -29,6 +30,8 @@ export default function MemberAccess() {
   const navigate = useNavigate();
   const [access, setAccess] = useState<UserAccess[]>([]);
   const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedType, setSelectedType] = useState<string>('all');
 
   useEffect(() => {
     if (!authLoading && !user) navigate('/auth');
@@ -81,6 +84,38 @@ export default function MemberAccess() {
     setLoading(false);
   };
 
+  const getTypeLabel = (type: string) => {
+    switch (type) {
+      case 'consulting': return 'Konsultasi';
+      case 'webinar': return 'Webinar';
+      case 'bootcamp': return 'Bootcamp';
+      default: return type;
+    }
+  };
+
+  // Strip HTML tags for search
+  const stripHtml = (html: string) => {
+    const tmp = document.createElement('div');
+    tmp.innerHTML = html;
+    return tmp.textContent || tmp.innerText || '';
+  };
+
+  // Filter access based on search and type
+  const filteredAccess = access.filter((item) => {
+    const matchesSearch = item.product.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                         stripHtml(item.product.description).toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesType = selectedType === 'all' || item.product.type === selectedType;
+    return matchesSearch && matchesType;
+  });
+
+  // Get unique product types for filter
+  const productTypes = ['all', ...Array.from(new Set(access.map(a => a.product.type)))];
+
+  const clearFilters = () => {
+    setSearchQuery('');
+    setSelectedType('all');
+  };
+
   const renderAccessActions = (item: UserAccess) => {
     switch (item.product.type) {
       case 'consulting':
@@ -157,6 +192,63 @@ export default function MemberAccess() {
         <h1 className="text-4xl font-bold mb-2">Akses Saya</h1>
         <p className="text-muted-foreground mb-8">Semua produk yang dapat Anda akses</p>
 
+        {/* Search and Filter */}
+        {!loading && access.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>
+              ))}
+              {(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 {filteredAccess.length} dari {access.length} produk
+            </p>
+          </div>
+        )}
+
         {access.length === 0 ? (
           <Card className="border-2 border-border">
             <CardContent className="py-12 text-center">
@@ -168,7 +260,18 @@ export default function MemberAccess() {
           </Card>
         ) : (
           <div className="grid gap-4">
-            {access.map((item) => (
+            {filteredAccess.length === 0 && access.length > 0 && (
+              <div className="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>
+            )}
+            {filteredAccess.map((item) => (
               <Card key={item.id} className="border-2 border-border">
                 <CardHeader>
                   <div className="flex items-start justify-between">

src/pages/member/MemberOrders.tsx

@@ -5,9 +5,10 @@ import { useAuth } from "@/hooks/useAuth";
 import { supabase } from "@/integrations/supabase/client";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { formatIDR, formatDate } from "@/lib/format";
-import { ChevronRight } from "lucide-react";
+import { ChevronRight, X } from "lucide-react";
 
 interface Order {
   id: string;
@@ -23,6 +24,7 @@ export default function MemberOrders() {
   const navigate = useNavigate();
   const [orders, setOrders] = useState<Order[]>([]);
   const [loading, setLoading] = useState(true);
+  const [selectedStatus, setSelectedStatus] = useState<string>('all');
 
   useEffect(() => {
     if (!authLoading && !user) navigate("/auth");
@@ -39,20 +41,7 @@ export default function MemberOrders() {
     setLoading(false);
   };
 
-  const getStatusColor = (status: string) => {
+  const getStatusLabel = (status: string | null) => {
-    switch (status) {
-      case "paid":
-        return "bg-brand-accent text-white";
-      case "pending":
-        return "bg-amber-500 text-white";
-      case "cancelled":
-        return "bg-destructive text-white";
-      default:
-        return "bg-secondary";
-    }
-  };
-
-  const getPaymentStatusLabel = (status: string | null) => {
     switch (status) {
       case "paid":
         return "Lunas";
@@ -67,6 +56,39 @@ export default function MemberOrders() {
     }
   };
 
+  // Filter orders based on status
+  const filteredOrders = orders.filter((order) => {
+    const status = order.payment_status || order.status;
+    return selectedStatus === 'all' || status === selectedStatus;
+  });
+
+  // Get order counts by status
+  const statusCounts = orders.reduce((acc, order) => {
+    const status = order.payment_status || order.status;
+    acc[status] = (acc[status] || 0) + 1;
+    return acc;
+  }, {} as Record<string, number>);
+
+  // Available status filters
+  const statusFilters = ['all', 'paid', 'pending', 'failed', 'cancelled'];
+
+  const clearFilters = () => {
+    setSelectedStatus('all');
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case "paid":
+        return "bg-brand-accent text-white";
+      case "pending":
+        return "bg-amber-500 text-white";
+      case "cancelled":
+        return "bg-destructive text-white";
+      default:
+        return "bg-secondary";
+    }
+  };
+
   if (authLoading || loading) {
     return (
       <AppLayout>
@@ -88,6 +110,46 @@ export default function MemberOrders() {
         <h1 className="text-4xl font-bold mb-2">Riwayat Order</h1>
         <p className="text-muted-foreground mb-8">Semua pesanan Anda</p>
 
+        {/* Status Filter */}
+        {!loading && orders.length > 0 && (
+          <div className="mb-6 space-y-4">
+            <div className="flex flex-wrap gap-2 items-center">
+              <span className="text-sm font-medium text-muted-foreground">Status:</span>
+              {statusFilters.map((status) => {
+                const count = status === 'all' ? orders.length : (statusCounts[status] || 0);
+                return (
+                  <Button
+                    key={status}
+                    variant={selectedStatus === status ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => setSelectedStatus(status)}
+                    className={selectedStatus === status ? 'shadow-sm' : 'border-2'}
+                  >
+                    {getStatusLabel(status)}
+                    <span className="ml-1 text-xs opacity-70">({count})</span>
+                  </Button>
+                );
+              })}
+              {selectedStatus !== '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 {filteredOrders.length} dari {orders.length} pesanan
+            </p>
+          </div>
+        )}
+
         {orders.length === 0 ? (
           <Card className="border-2 border-border">
             <CardContent className="py-12 text-center">
@@ -96,7 +158,17 @@ export default function MemberOrders() {
           </Card>
         ) : (
           <div className="space-y-4">
-            {orders.map((order) => (
+            {filteredOrders.length === 0 && orders.length > 0 && (
+              <div className="text-center py-16">
+                <p className="text-xl font-semibold mb-2 text-muted-foreground">Tidak Ada Pesanan</p>
+                <p className="text-muted-foreground mb-4">Tidak ada pesanan dengan status yang dipilih.</p>
+                <Button onClick={clearFilters} variant="outline">
+                  <X className="w-4 h-4 mr-2" />
+                  Reset Filter
+                </Button>
+              </div>
+            )}
+            {filteredOrders.map((order) => (
               <Card 
                 key={order.id} 
                 className="border-2 border-border hover:border-primary transition-colors cursor-pointer"
@@ -113,7 +185,7 @@ export default function MemberOrders() {
                     </div>
                     <div className="flex items-center gap-4">
                       <Badge className={`${getStatusColor(order.payment_status || order.status)} rounded-full`}>
-                        {getPaymentStatusLabel(order.payment_status || order.status)}
+                        {getStatusLabel(order.payment_status || order.status)}
                       </Badge>
                       <span className="font-bold">{formatIDR(order.total_amount)}</span>
                       <ChevronRight className="w-5 h-5 text-muted-foreground" />