From 3d7408a60746325fdd3d645dbe2e235049d7812b Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 25 Dec 2025 10:33:54 +0700
Subject: [PATCH] Optimize mobile layouts and fix integration tab overflow

Mobile Card Layout Improvements:
- Remove redundant Card/CardContent wrappers in mobile layouts
- Use simple div with border-2 border-border rounded-lg p-4 space-y-3 bg-card
- This provides wider cards without extra padding from wrapper div
- Applied to all admin pages: AdminProducts, AdminOrders, AdminMembers, AdminConsulting, AdminEvents

Integration Tab Fix:
- Remove redundant Calendar ID display in Alert component
- The Calendar ID is already visible in the input field above
- This Alert was causing horizontal overflow on mobile
- Alert showed 'OAuth configured. Calendar ID: {long_email}@group.calendar.google.com'
- Removing this eliminates the overflow issue
---
 .../admin/settings/IntegrasiTab.tsx           |  8 ---
 src/pages/admin/AdminConsulting.tsx           |  8 +--
 src/pages/admin/AdminEvents.tsx               |  8 +--
 src/pages/admin/AdminMembers.tsx              |  4 +-
 src/pages/admin/AdminOrders.tsx               |  4 +-
 src/pages/admin/AdminProducts.tsx             | 72 +++++++++----------
 6 files changed, 47 insertions(+), 57 deletions(-)

diff --git a/src/components/admin/settings/IntegrasiTab.tsx b/src/components/admin/settings/IntegrasiTab.tsx
index a0da9f0..928eda9 100644
--- a/src/components/admin/settings/IntegrasiTab.tsx
+++ b/src/components/admin/settings/IntegrasiTab.tsx
@@ -363,14 +363,6 @@ export function IntegrasiTab() {
                 OAuth2 credentials untuk personal Gmail account. Gunakan <a href="/get-google-refresh-token.html" target="_blank" className="text-blue-600 underline">tool ini</a> untuk generate refresh token.
               </p>
             </div>
-            {settings.google_oauth_config && (
-              <Alert>
-                <AlertTriangle className="w-4 h-4" />
-                <AlertDescription>
-                  OAuth configured. Calendar ID: {settings.integration_google_calendar_id || 'Not set'}
-                </AlertDescription>
-              </Alert>
-            )}
           </div>
 
           <Button
diff --git a/src/pages/admin/AdminConsulting.tsx b/src/pages/admin/AdminConsulting.tsx
index 566ee37..04f29ee 100644
--- a/src/pages/admin/AdminConsulting.tsx
+++ b/src/pages/admin/AdminConsulting.tsx
@@ -410,8 +410,8 @@ export default function AdminConsulting() {
                 {/* Mobile Card Layout */}
                 <div className="md:hidden space-y-3 p-4">
                   {upcomingSlots.map((slot) => (
-                    <Card key={slot.id} className="border-2 border-border">
-                      <CardContent className="p-4 space-y-3">
+                    <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">
                           <div className="flex-1 min-w-0">
                             <div className="flex items-center gap-2 flex-wrap mb-1">
@@ -540,8 +540,8 @@ export default function AdminConsulting() {
                 {/* Mobile Card Layout */}
                 <div className="md:hidden space-y-3 p-4">
                   {pastSlots.slice(0, 20).map((slot) => (
-                    <Card key={slot.id} className="border-2 border-border">
-                      <CardContent className="p-4 space-y-2">
+                    <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">
                           <div className="flex-1 min-w-0">
                             <h3 className="font-semibold text-sm">
diff --git a/src/pages/admin/AdminEvents.tsx b/src/pages/admin/AdminEvents.tsx
index f014268..523a751 100644
--- a/src/pages/admin/AdminEvents.tsx
+++ b/src/pages/admin/AdminEvents.tsx
@@ -282,8 +282,8 @@ export default function AdminEvents() {
                 {/* Mobile Card Layout */}
                 <div className="md:hidden space-y-3 p-4">
                   {events.map((event) => (
-                    <Card key={event.id} className="border-2 border-border">
-                      <CardContent className="p-4 space-y-3">
+                    <div key={event.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">
                           <div className="flex-1 min-w-0">
                             <h3 className="font-semibold text-base line-clamp-1">{event.title}</h3>
@@ -379,8 +379,8 @@ export default function AdminEvents() {
                 {/* Mobile Card Layout */}
                 <div className="md:hidden space-y-3 p-4">
                   {blocks.map((block) => (
-                    <Card key={block.id} className="border-2 border-border">
-                      <CardContent className="p-4 space-y-3">
+                    <div key={block.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">
                           <div className="flex-1 min-w-0">
                             <h3 className="font-semibold text-base">
diff --git a/src/pages/admin/AdminMembers.tsx b/src/pages/admin/AdminMembers.tsx
index 0ff7b90..2c059d9 100644
--- a/src/pages/admin/AdminMembers.tsx
+++ b/src/pages/admin/AdminMembers.tsx
@@ -158,8 +158,8 @@ export default function AdminMembers() {
             {/* Mobile Card Layout */}
             <div className="md:hidden space-y-3 p-4">
               {members.map((member) => (
-                <Card key={member.id} className="border-2 border-border">
-                  <CardContent className="p-4 space-y-3">
+                <div key={member.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">
                       <div className="flex-1 min-w-0">
                         <h3 className="font-semibold text-base line-clamp-1">{member.name || "Tanpa Nama"}</h3>
diff --git a/src/pages/admin/AdminOrders.tsx b/src/pages/admin/AdminOrders.tsx
index 77c2348..8e4dd6a 100644
--- a/src/pages/admin/AdminOrders.tsx
+++ b/src/pages/admin/AdminOrders.tsx
@@ -222,8 +222,8 @@ export default function AdminOrders() {
             {/* Mobile Card Layout */}
             <div className="md:hidden space-y-3 p-4">
               {orders.map((order) => (
-                <Card key={order.id} className="border-2 border-border">
-                  <CardContent className="p-4 space-y-3">
+                <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">
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center gap-2 flex-wrap">
diff --git a/src/pages/admin/AdminProducts.tsx b/src/pages/admin/AdminProducts.tsx
index 7b2981f..34f84b6 100644
--- a/src/pages/admin/AdminProducts.tsx
+++ b/src/pages/admin/AdminProducts.tsx
@@ -218,47 +218,45 @@ export default function AdminProducts() {
             </div>
 
             {/* Mobile Card Layout */}
-            <div className="md:hidden space-y-3 p-4">
+            <div className="md:hidden space-y-3">
               {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 key={product.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
+                  <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="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 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>
-                  </CardContent>
-                </Card>
+                  </div>
+                </div>
               ))}
               {products.length === 0 && (
                 <div className="text-center py-8 text-muted-foreground">