From bc88c0590df8aad3029759a8395c32a058cc21ba Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 25 Dec 2025 10:51:06 +0700
Subject: [PATCH] Hide Card wrapper on mobile for cleaner layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Desktop: Show table in bordered Card wrapper
- Mobile: Remove wrapper padding and hide Card border
- Individual cards now display directly without outer container
- Applied to AdminMembers, AdminOrders, AdminConsulting, AdminEvents

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/pages/admin/AdminConsulting.tsx | 34 ++++++++++++++---------------
 src/pages/admin/AdminEvents.tsx     |  4 ++--
 src/pages/admin/AdminMembers.tsx    | 12 +++++-----
 src/pages/admin/AdminOrders.tsx     | 30 ++++++++++++-------------
 4 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/pages/admin/AdminConsulting.tsx b/src/pages/admin/AdminConsulting.tsx
index 1c299b2..c0ab8f6 100644
--- a/src/pages/admin/AdminConsulting.tsx
+++ b/src/pages/admin/AdminConsulting.tsx
@@ -305,10 +305,10 @@ export default function AdminConsulting() {
           </TabsList>
 
           <TabsContent value="upcoming">
-            <Card className="border-2 border-border">
+            <Card className="border-2 border-border hidden md:block">
               <CardContent className="p-0">
                 {/* Desktop Table */}
-                <div className="hidden md:block overflow-x-auto">
+                <div className="overflow-x-auto">
                   <Table>
                     <TableHeader>
                       <TableRow>
@@ -405,11 +405,13 @@ export default function AdminConsulting() {
                     )}
                   </TableBody>
                 </Table>
-                </div>
+              </div>
+            </CardContent>
+          </Card>
 
-                {/* Mobile Card Layout */}
-                <div className="md:hidden space-y-3 p-4">
-                  {upcomingSlots.map((slot) => (
+            {/* Mobile Card Layout */}
+            <div className="md:hidden space-y-3">
+              {upcomingSlots.map((slot) => (
                     <div key={slot.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
                       <div>
                         <div className="flex items-start justify-between gap-2">
@@ -493,15 +495,13 @@ export default function AdminConsulting() {
                     </div>
                   )}
                 </div>
-              </CardContent>
-            </Card>
           </TabsContent>
 
           <TabsContent value="past">
-            <Card className="border-2 border-border">
+            <Card className="border-2 border-border hidden md:block">
               <CardContent className="p-0">
                 {/* Desktop Table */}
-                <div className="hidden md:block overflow-x-auto">
+                <div className="overflow-x-auto">
                   <Table>
                     <TableHeader>
                       <TableRow>
@@ -535,11 +535,13 @@ export default function AdminConsulting() {
                     )}
                   </TableBody>
                 </Table>
-                </div>
+              </div>
+            </CardContent>
+          </Card>
 
-                {/* Mobile Card Layout */}
-                <div className="md:hidden space-y-3 p-4">
-                  {pastSlots.slice(0, 20).map((slot) => (
+            {/* Mobile Card Layout */}
+            <div className="md:hidden space-y-3">
+              {pastSlots.slice(0, 20).map((slot) => (
                     <div key={slot.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
                       <div>
                         <div className="flex items-start justify-between gap-2">
@@ -573,9 +575,7 @@ export default function AdminConsulting() {
                       Belum ada riwayat konsultasi
                     </div>
                   )}
-                </div>
-              </CardContent>
-            </Card>
+            </div>
           </TabsContent>
         </Tabs>
 
diff --git a/src/pages/admin/AdminEvents.tsx b/src/pages/admin/AdminEvents.tsx
index 71115d7..84fe21e 100644
--- a/src/pages/admin/AdminEvents.tsx
+++ b/src/pages/admin/AdminEvents.tsx
@@ -280,7 +280,7 @@ export default function AdminEvents() {
                 </div>
 
                 {/* Mobile Card Layout */}
-                <div className="md:hidden space-y-3 p-4">
+                <div className="md:hidden space-y-3">
                   {events.map((event) => (
                     <div key={event.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
                       <div>
@@ -377,7 +377,7 @@ export default function AdminEvents() {
                 </div>
 
                 {/* Mobile Card Layout */}
-                <div className="md:hidden space-y-3 p-4">
+                <div className="md:hidden space-y-3">
                   {blocks.map((block) => (
                     <div key={block.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
                       <div>
diff --git a/src/pages/admin/AdminMembers.tsx b/src/pages/admin/AdminMembers.tsx
index 2186bae..647bdb9 100644
--- a/src/pages/admin/AdminMembers.tsx
+++ b/src/pages/admin/AdminMembers.tsx
@@ -102,10 +102,10 @@ export default function AdminMembers() {
         <h1 className="text-4xl font-bold mb-2">Manajemen Member</h1>
         <p className="text-muted-foreground mb-8">Kelola semua pengguna</p>
 
-        <Card className="border-2 border-border">
+        <Card className="border-2 border-border hidden md:block">
           <CardContent className="p-0">
             {/* Desktop Table */}
-            <div className="hidden md:block overflow-x-auto">
+            <div className="overflow-x-auto">
               <Table>
                 <TableHeader>
                   <TableRow>
@@ -154,9 +154,11 @@ export default function AdminMembers() {
               </TableBody>
             </Table>
             </div>
+          </CardContent>
+        </Card>
 
-            {/* Mobile Card Layout */}
-            <div className="md:hidden space-y-3 p-4">
+        {/* Mobile Card Layout */}
+        <div className="md:hidden space-y-3">
               {members.map((member) => (
                 <div key={member.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
                   <div>
@@ -202,8 +204,6 @@ export default function AdminMembers() {
                 </div>
               )}
             </div>
-          </CardContent>
-        </Card>
 
         <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
           <DialogContent className="max-w-lg border-2 border-border">
diff --git a/src/pages/admin/AdminOrders.tsx b/src/pages/admin/AdminOrders.tsx
index 3fa6f9c..e5df3be 100644
--- a/src/pages/admin/AdminOrders.tsx
+++ b/src/pages/admin/AdminOrders.tsx
@@ -176,10 +176,10 @@ export default function AdminOrders() {
         <h1 className="text-4xl font-bold mb-2">Manajemen Order</h1>
         <p className="text-muted-foreground mb-8">Kelola semua pesanan</p>
 
-        <Card className="border-2 border-border">
+        <Card className="border-2 border-border hidden md:block">
           <CardContent className="p-0">
             {/* Desktop Table */}
-            <div className="hidden md:block overflow-x-auto">
+            <div className="overflow-x-auto">
               <Table>
                 <TableHeader>
                   <TableRow>
@@ -218,10 +218,12 @@ export default function AdminOrders() {
                 </TableBody>
               </Table>
             </div>
+          </CardContent>
+        </Card>
 
-            {/* Mobile Card Layout */}
-            <div className="md:hidden space-y-3 p-4">
-              {orders.map((order) => (
+          {/* Mobile Card Layout */}
+          <div className="md:hidden space-y-3">
+            {orders.map((order) => (
                 <div key={order.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
                   <div>
                     <div className="flex items-start justify-between gap-2">
@@ -252,17 +254,15 @@ export default function AdminOrders() {
                     </div>
                   </div>
                 </div>
-              ))}
-              {orders.length === 0 && (
-                <div className="text-center py-8 text-muted-foreground">
-                  Belum ada order
-                </div>
-              )}
-            </div>
-          </CardContent>
-        </Card>
+            ))}
+            {orders.length === 0 && (
+              <div className="text-center py-8 text-muted-foreground">
+                Belum ada order
+              </div>
+            )}
+          </div>
 
-        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+          <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
           <DialogContent className="max-w-lg border-2 border-border">
             <DialogHeader>
               <DialogTitle>Detail Order</DialogTitle>