Add mobile-stacked card layout for all admin tables

Implemented responsive card layout for mobile devices across all admin pages:

- Desktop (md+): Shows traditional table layout
- Mobile (<md): Shows stacked card layout with better readability

AdminProducts.tsx:
- Mobile cards display title, type, price (with sale badge), status
- Action buttons (edit/delete) in header

AdminOrders.tsx:
- Mobile cards display order ID, email, status badge, total, payment method, date
- View detail button in header

AdminMembers.tsx:
- Mobile cards display name, email, role badge, join date
- Action buttons (detail/toggle admin) at bottom with full width

AdminConsulting.tsx (upcoming & past tabs):
- Mobile cards display date, time, client, category, status, meet link
- Action buttons (link/complete/cancel) stacked at bottom

AdminEvents.tsx (events & availability tabs):
- Mobile cards display title/event type or block type, dates, status, notes
- Action buttons (edit/delete) at bottom

This approach provides much better UX on mobile compared to horizontal scrolling,
especially for complex cells like sale prices with badges and multiple action buttons.

src/pages/admin/AdminProducts.tsx

@@ -164,7 +164,8 @@ export default function AdminProducts() {
 
         <Card className="border-2 border-border">
           <CardContent className="p-0">
-            <div className="overflow-x-auto">
+            {/* Desktop Table */}
+            <div className="hidden md:block overflow-x-auto">
               <Table>
                 <TableHeader>
                   <TableRow>
@@ -215,6 +216,56 @@ export default function AdminProducts() {
                 </TableBody>
               </Table>
             </div>
+
+            {/* Mobile Card Layout */}
+            <div className="md:hidden space-y-3 p-4">
+              {products.map((product) => (
+                <Card key={product.id} className="border-2 border-border">
+                  <CardContent className="p-4 space-y-3">
+                    <div className="flex items-start justify-between gap-2">
+                      <div className="flex-1 min-w-0">
+                        <h3 className="font-semibold text-base line-clamp-1">{product.title}</h3>
+                        <p className="text-sm text-muted-foreground capitalize">{product.type}</p>
+                      </div>
+                      <div className="flex gap-1 shrink-0">
+                        <Button variant="ghost" size="sm" onClick={() => handleEdit(product)}>
+                          <Pencil className="w-4 h-4" />
+                        </Button>
+                        <Button variant="ghost" size="sm" onClick={() => handleDelete(product.id)}>
+                          <Trash2 className="w-4 h-4" />
+                        </Button>
+                      </div>
+                    </div>
+                    <div className="space-y-1">
+                      <div className="flex items-center justify-between">
+                        <span className="text-sm text-muted-foreground">Harga:</span>
+                        <div className="text-right">
+                          {product.sale_price ? (
+                            <div className="flex items-center gap-2">
+                              <span className="font-bold">{formatIDR(product.sale_price)}</span>
+                              <span className="text-sm text-muted-foreground line-through">{formatIDR(product.price)}</span>
+                            </div>
+                          ) : (
+                            <span className="font-bold">{formatIDR(product.price)}</span>
+                          )}
+                        </div>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <span className="text-sm text-muted-foreground">Status:</span>
+                        <span className={product.is_active ? 'text-foreground' : 'text-muted-foreground'}>
+                          {product.is_active ? 'Aktif' : 'Nonaktif'}
+                        </span>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+              {products.length === 0 && (
+                <div className="text-center py-8 text-muted-foreground">
+                  Belum ada produk
+                </div>
+              )}
+            </div>
           </CardContent>
         </Card>