From 09558c0359f87ce2a5b018d099a9fb5ba64615f3 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 19 Dec 2025 15:45:40 +0000
Subject: [PATCH] Changes

---
 src/pages/member/MemberAccess.tsx |  5 +++-
 src/pages/member/MemberOrders.tsx | 46 ++++++++++++++++---------------
 2 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/pages/member/MemberAccess.tsx b/src/pages/member/MemberAccess.tsx
index d7f650d..b54892e 100644
--- a/src/pages/member/MemberAccess.tsx
+++ b/src/pages/member/MemberAccess.tsx
@@ -131,7 +131,10 @@ export default function MemberAccess() {
                   </div>
                 </CardHeader>
                 <CardContent>
-                  <p className="text-muted-foreground mb-4 line-clamp-2">{item.product.description}</p>
+                  <div 
+                    className="text-muted-foreground mb-4 line-clamp-2 prose prose-sm max-w-none"
+                    dangerouslySetInnerHTML={{ __html: item.product.description || '' }}
+                  />
                   {renderAccessActions(item)}
                 </CardContent>
               </Card>
diff --git a/src/pages/member/MemberOrders.tsx b/src/pages/member/MemberOrders.tsx
index e4b3e50..c8a4d7a 100644
--- a/src/pages/member/MemberOrders.tsx
+++ b/src/pages/member/MemberOrders.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useNavigate, Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { AppLayout } from "@/components/AppLayout";
 import { useAuth } from "@/hooks/useAuth";
 import { supabase } from "@/integrations/supabase/client";
@@ -97,28 +97,30 @@ export default function MemberOrders() {
         ) : (
           <div className="space-y-4">
             {orders.map((order) => (
-              <Link key={order.id} to={`/orders/${order.id}`}>
-                <Card className="border-2 border-border hover:border-primary transition-colors cursor-pointer">
-                  <CardContent className="py-4">
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <p className="font-mono text-sm text-muted-foreground">{order.id.slice(0, 8)}</p>
-                        <p className="text-sm text-muted-foreground">{formatDate(order.created_at)}</p>
-                        {order.payment_method && (
-                          <p className="text-xs text-muted-foreground uppercase">{order.payment_method}</p>
-                        )}
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <Badge className={getStatusColor(order.payment_status || order.status)}>
-                          {getPaymentStatusLabel(order.payment_status || order.status)}
-                        </Badge>
-                        <span className="font-bold">{formatIDR(order.total_amount)}</span>
-                        <ChevronRight className="w-5 h-5 text-muted-foreground" />
-                      </div>
+              <Card 
+                key={order.id} 
+                className="border-2 border-border hover:border-primary transition-colors cursor-pointer"
+                onClick={() => navigate(`/orders/${order.id}`)}
+              >
+                <CardContent className="py-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="font-mono text-sm text-muted-foreground">{order.id.slice(0, 8)}</p>
+                      <p className="text-sm text-muted-foreground">{formatDate(order.created_at)}</p>
+                      {order.payment_method && (
+                        <p className="text-xs text-muted-foreground uppercase">{order.payment_method}</p>
+                      )}
                     </div>
-                  </CardContent>
-                </Card>
-              </Link>
+                    <div className="flex items-center gap-4">
+                      <Badge className={getStatusColor(order.payment_status || order.status)}>
+                        {getPaymentStatusLabel(order.payment_status || order.status)}
+                      </Badge>
+                      <span className="font-bold">{formatIDR(order.total_amount)}</span>
+                      <ChevronRight className="w-5 h-5 text-muted-foreground" />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
             ))}
           </div>
         )}