From 8c7f4000a9659ca6a22448c128a09a5ab1877c5a Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 25 Dec 2025 11:02:55 +0700
Subject: [PATCH] Add shadows to mobile cards and fix AdminProducts wrapper
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add shadow-sm to all mobile row cards for consistency
- Hide Card wrapper on mobile for AdminProducts page
- Add shadows to review cards in AdminReviews
- Applied to AdminMembers, AdminOrders, AdminConsulting,
  AdminEvents, AdminProducts, AdminReviews

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/pages/admin/AdminConsulting.tsx |  4 ++--
 src/pages/admin/AdminEvents.tsx     |  4 ++--
 src/pages/admin/AdminMembers.tsx    |  2 +-
 src/pages/admin/AdminOrders.tsx     |  2 +-
 src/pages/admin/AdminProducts.tsx   | 28 ++++++++++++++--------------
 src/pages/admin/AdminReviews.tsx    |  4 ++--
 6 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/pages/admin/AdminConsulting.tsx b/src/pages/admin/AdminConsulting.tsx
index c0ab8f6..bac8c64 100644
--- a/src/pages/admin/AdminConsulting.tsx
+++ b/src/pages/admin/AdminConsulting.tsx
@@ -412,7 +412,7 @@ export default function AdminConsulting() {
             {/* 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 key={slot.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card shadow-sm">
                       <div>
                         <div className="flex items-start justify-between gap-2">
                           <div className="flex-1 min-w-0">
@@ -542,7 +542,7 @@ export default function AdminConsulting() {
             {/* 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 key={slot.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card shadow-sm">
                       <div>
                         <div className="flex items-start justify-between gap-2">
                           <div className="flex-1 min-w-0">
diff --git a/src/pages/admin/AdminEvents.tsx b/src/pages/admin/AdminEvents.tsx
index 84fe21e..02296fc 100644
--- a/src/pages/admin/AdminEvents.tsx
+++ b/src/pages/admin/AdminEvents.tsx
@@ -282,7 +282,7 @@ export default function AdminEvents() {
                 {/* Mobile Card Layout */}
                 <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 key={event.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card shadow-sm">
                       <div>
                         <div className="flex items-start justify-between gap-2">
                           <div className="flex-1 min-w-0">
@@ -379,7 +379,7 @@ export default function AdminEvents() {
                 {/* Mobile Card Layout */}
                 <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 key={block.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card shadow-sm">
                       <div>
                         <div className="flex items-start justify-between gap-2">
                           <div className="flex-1 min-w-0">
diff --git a/src/pages/admin/AdminMembers.tsx b/src/pages/admin/AdminMembers.tsx
index 647bdb9..37d2dcf 100644
--- a/src/pages/admin/AdminMembers.tsx
+++ b/src/pages/admin/AdminMembers.tsx
@@ -160,7 +160,7 @@ export default function AdminMembers() {
         {/* 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 key={member.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card shadow-sm">
                   <div>
                     <div className="flex items-start justify-between gap-2">
                       <div className="flex-1 min-w-0">
diff --git a/src/pages/admin/AdminOrders.tsx b/src/pages/admin/AdminOrders.tsx
index e5df3be..20a3855 100644
--- a/src/pages/admin/AdminOrders.tsx
+++ b/src/pages/admin/AdminOrders.tsx
@@ -224,7 +224,7 @@ export default function AdminOrders() {
           {/* 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 key={order.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card shadow-sm">
                   <div>
                     <div className="flex items-start justify-between gap-2">
                       <div className="flex-1 min-w-0">
diff --git a/src/pages/admin/AdminProducts.tsx b/src/pages/admin/AdminProducts.tsx
index 34f84b6..c4588dd 100644
--- a/src/pages/admin/AdminProducts.tsx
+++ b/src/pages/admin/AdminProducts.tsx
@@ -162,10 +162,10 @@ export default function AdminProducts() {
           </Button>
         </div>
 
-        <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>
@@ -216,11 +216,13 @@ export default function AdminProducts() {
                 </TableBody>
               </Table>
             </div>
+          </CardContent>
+        </Card>
 
-            {/* Mobile Card Layout */}
-            <div className="md:hidden space-y-3">
-              {products.map((product) => (
-                <div key={product.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
+        {/* Mobile Card Layout */}
+        <div className="md:hidden space-y-3">
+          {products.map((product) => (
+            <div key={product.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card shadow-sm">
                   <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>
@@ -257,15 +259,13 @@ export default function AdminProducts() {
                     </div>
                   </div>
                 </div>
-              ))}
-              {products.length === 0 && (
-                <div className="text-center py-8 text-muted-foreground">
-                  Belum ada produk
-                </div>
-              )}
+          ))}
+          {products.length === 0 && (
+            <div className="text-center py-8 text-muted-foreground">
+              Belum ada produk
             </div>
-          </CardContent>
-        </Card>
+          )}
+        </div>
 
         <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
           <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto border-2 border-border">
diff --git a/src/pages/admin/AdminReviews.tsx b/src/pages/admin/AdminReviews.tsx
index 75e6668..2568f75 100644
--- a/src/pages/admin/AdminReviews.tsx
+++ b/src/pages/admin/AdminReviews.tsx
@@ -210,7 +210,7 @@ export default function AdminReviews() {
                 </Card>
               ) : (
                 filteredReviews.map((review) => (
-                  <Card key={review.id} className="border-2 border-border">
+                  <Card key={review.id} className="border-2 border-border shadow-sm">
                     <CardContent className="py-4">
                       <div className="flex items-start justify-between gap-4">
                         <div className="flex-1 space-y-2">
@@ -289,7 +289,7 @@ export default function AdminReviews() {
                 </Card>
               ) : (
                 pendingReviews.map((review) => (
-                  <Card key={review.id} className="border-2 border-primary/20">
+                  <Card key={review.id} className="border-2 border-primary/20 shadow-sm">
                     <CardContent className="py-4">
                       <div className="flex items-start justify-between gap-4">
                         <div className="flex-1 space-y-2">