From af40df2c9c889bcb5ac17f5a284be95cf138fa3e Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 25 Dec 2025 08:57:08 +0700
Subject: [PATCH] Fix responsiveness in remaining admin pages

AdminMembers.tsx:
- Wrap table in overflow-x-auto div for horizontal scrolling
- Add whitespace-nowrap to TableHead cells

AdminConsulting.tsx:
- Wrap both tables (upcoming and past) in overflow-x-auto div
- Add whitespace-nowrap to all TableHead cells
- Change stats grid from grid-cols-1 md:grid-cols-4 to grid-cols-2 md:grid-cols-4 for better mobile layout

AdminEvents.tsx:
- Wrap both tables (events and availability) in overflow-x-auto div
- Add whitespace-nowrap to all TableHead cells
- Change dialog form grids from grid-cols-2 to grid-cols-1 md:grid-cols-2

CurriculumEditor.tsx:
- Make curriculum header responsive (flex-col sm:flex-row)
- Make module card headers responsive (stack title and buttons on mobile)
- Make lesson items responsive (stack title and buttons on mobile)

All admin pages are now fully responsive with proper horizontal scrolling for tables on mobile and stacked layouts for forms and button groups.
---
 src/components/admin/CurriculumEditor.tsx |  6 +--
 src/pages/admin/AdminConsulting.tsx       | 50 ++++++++++++-----------
 src/pages/admin/AdminEvents.tsx           | 48 ++++++++++++----------
 src/pages/admin/AdminMembers.tsx          | 22 +++++-----
 4 files changed, 68 insertions(+), 58 deletions(-)

diff --git a/src/components/admin/CurriculumEditor.tsx b/src/components/admin/CurriculumEditor.tsx
index e5a6bcd..e2b568f 100644
--- a/src/components/admin/CurriculumEditor.tsx
+++ b/src/components/admin/CurriculumEditor.tsx
@@ -279,7 +279,7 @@ export function CurriculumEditor({ productId }: CurriculumEditorProps) {
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
         <h3 className="text-lg font-semibold">Curriculum</h3>
         <Button onClick={handleNewModule} size="sm" className="shadow-sm">
           <Plus className="w-4 h-4 mr-2" />
@@ -298,7 +298,7 @@ export function CurriculumEditor({ productId }: CurriculumEditorProps) {
           {modules.map((module, moduleIndex) => (
             <Card key={module.id} className="border-2 border-border">
               <CardHeader className="py-3">
-                <div className="flex items-center justify-between">
+                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                   <button
                     onClick={() => toggleModule(module.id)}
                     className="flex items-center gap-2 text-left"
@@ -341,7 +341,7 @@ export function CurriculumEditor({ productId }: CurriculumEditorProps) {
                     {getLessonsForModule(module.id).map((lesson, lessonIndex) => (
                       <div
                         key={lesson.id}
-                        className="flex items-center justify-between p-2 bg-muted rounded-md"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-2 bg-muted rounded-md"
                       >
                         <div className="flex items-center gap-2">
                           <GripVertical className="w-4 h-4 text-muted-foreground" />
diff --git a/src/pages/admin/AdminConsulting.tsx b/src/pages/admin/AdminConsulting.tsx
index 8de4de6..1929b9b 100644
--- a/src/pages/admin/AdminConsulting.tsx
+++ b/src/pages/admin/AdminConsulting.tsx
@@ -270,7 +270,7 @@ export default function AdminConsulting() {
         )}
 
         {/* Stats */}
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
           <Card className="border-2 border-border">
             <CardContent className="pt-6">
               <div className="text-2xl font-bold">{todaySlots.length}</div>
@@ -307,18 +307,19 @@ export default function AdminConsulting() {
           <TabsContent value="upcoming">
             <Card className="border-2 border-border">
               <CardContent className="p-0">
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>Tanggal</TableHead>
-                      <TableHead>Waktu</TableHead>
-                      <TableHead>Klien</TableHead>
-                      <TableHead>Kategori</TableHead>
-                      <TableHead>Status</TableHead>
-                      <TableHead>Link Meet</TableHead>
-                      <TableHead className="text-right">Aksi</TableHead>
-                    </TableRow>
-                  </TableHeader>
+                <div className="overflow-x-auto">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="whitespace-nowrap">Tanggal</TableHead>
+                        <TableHead className="whitespace-nowrap">Waktu</TableHead>
+                        <TableHead className="whitespace-nowrap">Klien</TableHead>
+                        <TableHead className="whitespace-nowrap">Kategori</TableHead>
+                        <TableHead className="whitespace-nowrap">Status</TableHead>
+                        <TableHead className="whitespace-nowrap">Link Meet</TableHead>
+                        <TableHead className="text-right whitespace-nowrap">Aksi</TableHead>
+                      </TableRow>
+                    </TableHeader>
                   <TableBody>
                     {upcomingSlots.map((slot) => (
                       <TableRow key={slot.id}>
@@ -403,6 +404,7 @@ export default function AdminConsulting() {
                     )}
                   </TableBody>
                 </Table>
+                </div>
               </CardContent>
             </Card>
           </TabsContent>
@@ -410,16 +412,17 @@ export default function AdminConsulting() {
           <TabsContent value="past">
             <Card className="border-2 border-border">
               <CardContent className="p-0">
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>Tanggal</TableHead>
-                      <TableHead>Waktu</TableHead>
-                      <TableHead>Klien</TableHead>
-                      <TableHead>Kategori</TableHead>
-                      <TableHead>Status</TableHead>
-                    </TableRow>
-                  </TableHeader>
+                <div className="overflow-x-auto">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="whitespace-nowrap">Tanggal</TableHead>
+                        <TableHead className="whitespace-nowrap">Waktu</TableHead>
+                        <TableHead className="whitespace-nowrap">Klien</TableHead>
+                        <TableHead className="whitespace-nowrap">Kategori</TableHead>
+                        <TableHead className="whitespace-nowrap">Status</TableHead>
+                      </TableRow>
+                    </TableHeader>
                   <TableBody>
                     {pastSlots.slice(0, 20).map((slot) => (
                       <TableRow key={slot.id}>
@@ -443,6 +446,7 @@ export default function AdminConsulting() {
                     )}
                   </TableBody>
                 </Table>
+                </div>
               </CardContent>
             </Card>
           </TabsContent>
diff --git a/src/pages/admin/AdminEvents.tsx b/src/pages/admin/AdminEvents.tsx
index 352664d..0b8ae1e 100644
--- a/src/pages/admin/AdminEvents.tsx
+++ b/src/pages/admin/AdminEvents.tsx
@@ -235,16 +235,17 @@ export default function AdminEvents() {
                 </Button>
               </CardHeader>
               <CardContent className="p-0">
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>Judul</TableHead>
-                      <TableHead>Tipe</TableHead>
-                      <TableHead>Mulai</TableHead>
-                      <TableHead>Status</TableHead>
-                      <TableHead className="text-right">Aksi</TableHead>
-                    </TableRow>
-                  </TableHeader>
+                <div className="overflow-x-auto">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="whitespace-nowrap">Judul</TableHead>
+                        <TableHead className="whitespace-nowrap">Tipe</TableHead>
+                        <TableHead className="whitespace-nowrap">Mulai</TableHead>
+                        <TableHead className="whitespace-nowrap">Status</TableHead>
+                        <TableHead className="text-right whitespace-nowrap">Aksi</TableHead>
+                      </TableRow>
+                    </TableHeader>
                   <TableBody>
                     {events.map((event) => (
                       <TableRow key={event.id}>
@@ -275,6 +276,7 @@ export default function AdminEvents() {
                     )}
                   </TableBody>
                 </Table>
+                </div>
               </CardContent>
             </Card>
           </TabsContent>
@@ -289,16 +291,17 @@ export default function AdminEvents() {
                 </Button>
               </CardHeader>
               <CardContent className="p-0">
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>Tipe</TableHead>
-                      <TableHead>Mulai</TableHead>
-                      <TableHead>Selesai</TableHead>
-                      <TableHead>Catatan</TableHead>
-                      <TableHead className="text-right">Aksi</TableHead>
-                    </TableRow>
-                  </TableHeader>
+                <div className="overflow-x-auto">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="whitespace-nowrap">Tipe</TableHead>
+                        <TableHead className="whitespace-nowrap">Mulai</TableHead>
+                        <TableHead className="whitespace-nowrap">Selesai</TableHead>
+                        <TableHead className="whitespace-nowrap">Catatan</TableHead>
+                        <TableHead className="text-right whitespace-nowrap">Aksi</TableHead>
+                      </TableRow>
+                    </TableHeader>
                   <TableBody>
                     {blocks.map((block) => (
                       <TableRow key={block.id}>
@@ -329,6 +332,7 @@ export default function AdminEvents() {
                     )}
                   </TableBody>
                 </Table>
+                </div>
               </CardContent>
             </Card>
           </TabsContent>
@@ -371,7 +375,7 @@ export default function AdminEvents() {
                   </SelectContent>
                 </Select>
               </div>
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div className="space-y-2">
                   <Label>Mulai *</Label>
                   <Input
@@ -423,7 +427,7 @@ export default function AdminEvents() {
                   </SelectContent>
                 </Select>
               </div>
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div className="space-y-2">
                   <Label>Mulai *</Label>
                   <Input
diff --git a/src/pages/admin/AdminMembers.tsx b/src/pages/admin/AdminMembers.tsx
index 85e83f2..8921338 100644
--- a/src/pages/admin/AdminMembers.tsx
+++ b/src/pages/admin/AdminMembers.tsx
@@ -104,16 +104,17 @@ export default function AdminMembers() {
 
         <Card className="border-2 border-border">
           <CardContent className="p-0">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Email</TableHead>
-                  <TableHead>Nama</TableHead>
-                  <TableHead>Role</TableHead>
-                  <TableHead>Bergabung</TableHead>
-                  <TableHead className="text-right">Aksi</TableHead>
-                </TableRow>
-              </TableHeader>
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="whitespace-nowrap">Email</TableHead>
+                    <TableHead className="whitespace-nowrap">Nama</TableHead>
+                    <TableHead className="whitespace-nowrap">Role</TableHead>
+                    <TableHead className="whitespace-nowrap">Bergabung</TableHead>
+                    <TableHead className="text-right whitespace-nowrap">Aksi</TableHead>
+                  </TableRow>
+                </TableHeader>
               <TableBody>
                 {members.map((member) => (
                   <TableRow key={member.id}>
@@ -151,6 +152,7 @@ export default function AdminMembers() {
                 )}
               </TableBody>
             </Table>
+            </div>
           </CardContent>
         </Card>