dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix responsiveness in remaining admin pages

Browse Source 
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.
This commit is contained in:
dwindown
2025-12-25 08:57:08 +07:00
parent ad95a15310
commit af40df2c9c
4 changed files with 68 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/admin/CurriculumEditor.tsx
View File

@@ -279,7 +279,7 @@ export function CurriculumEditor({ productId }: CurriculumEditorProps) {
return ( return (
<div className="space-y-4"> <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> <h3 className="text-lg font-semibold">Curriculum</h3>
<Button onClick={handleNewModule} size="sm" className="shadow-sm"> <Button onClick={handleNewModule} size="sm" className="shadow-sm">
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
@@ -298,7 +298,7 @@ export function CurriculumEditor({ productId }: CurriculumEditorProps) {
{modules.map((module, moduleIndex) => ( {modules.map((module, moduleIndex) => (
<Card key={module.id} className="border-2 border-border"> <Card key={module.id} className="border-2 border-border">
<CardHeader className="py-3"> <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 <button
onClick={() => toggleModule(module.id)} onClick={() => toggleModule(module.id)}
className="flex items-center gap-2 text-left" className="flex items-center gap-2 text-left"
@@ -341,7 +341,7 @@ export function CurriculumEditor({ productId }: CurriculumEditorProps) {
{getLessonsForModule(module.id).map((lesson, lessonIndex) => ( {getLessonsForModule(module.id).map((lesson, lessonIndex) => (
<div <div
key={lesson.id} 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"> <div className="flex items-center gap-2">
<GripVertical className="w-4 h-4 text-muted-foreground" /> <GripVertical className="w-4 h-4 text-muted-foreground" />

30
src/pages/admin/AdminConsulting.tsx
View File

@@ -270,7 +270,7 @@ export default function AdminConsulting() {
)} )}
{/* Stats */} {/* 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"> <Card className="border-2 border-border">
<CardContent className="pt-6"> <CardContent className="pt-6">
<div className="text-2xl font-bold">{todaySlots.length}</div> <div className="text-2xl font-bold">{todaySlots.length}</div>
@@ -307,16 +307,17 @@ export default function AdminConsulting() {
<TabsContent value="upcoming"> <TabsContent value="upcoming">
<Card className="border-2 border-border"> <Card className="border-2 border-border">
<CardContent className="p-0"> <CardContent className="p-0">
<div className="overflow-x-auto">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead>Tanggal</TableHead> <TableHead className="whitespace-nowrap">Tanggal</TableHead>
<TableHead>Waktu</TableHead> <TableHead className="whitespace-nowrap">Waktu</TableHead>
<TableHead>Klien</TableHead> <TableHead className="whitespace-nowrap">Klien</TableHead>
<TableHead>Kategori</TableHead> <TableHead className="whitespace-nowrap">Kategori</TableHead>
<TableHead>Status</TableHead> <TableHead className="whitespace-nowrap">Status</TableHead>
<TableHead>Link Meet</TableHead> <TableHead className="whitespace-nowrap">Link Meet</TableHead>
<TableHead className="text-right">Aksi</TableHead> <TableHead className="text-right whitespace-nowrap">Aksi</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -403,6 +404,7 @@ export default function AdminConsulting() {
)} )}
</TableBody> </TableBody>
</Table> </Table>
</div>
</CardContent> </CardContent>
</Card> </Card>
</TabsContent> </TabsContent>
@@ -410,14 +412,15 @@ export default function AdminConsulting() {
<TabsContent value="past"> <TabsContent value="past">
<Card className="border-2 border-border"> <Card className="border-2 border-border">
<CardContent className="p-0"> <CardContent className="p-0">
<div className="overflow-x-auto">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead>Tanggal</TableHead> <TableHead className="whitespace-nowrap">Tanggal</TableHead>
<TableHead>Waktu</TableHead> <TableHead className="whitespace-nowrap">Waktu</TableHead>
<TableHead>Klien</TableHead> <TableHead className="whitespace-nowrap">Klien</TableHead>
<TableHead>Kategori</TableHead> <TableHead className="whitespace-nowrap">Kategori</TableHead>
<TableHead>Status</TableHead> <TableHead className="whitespace-nowrap">Status</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -443,6 +446,7 @@ export default function AdminConsulting() {
)} )}
</TableBody> </TableBody>
</Table> </Table>
</div>
</CardContent> </CardContent>
</Card> </Card>
</TabsContent> </TabsContent>

28
src/pages/admin/AdminEvents.tsx
View File

@@ -235,14 +235,15 @@ export default function AdminEvents() {
</Button> </Button>
</CardHeader> </CardHeader>
<CardContent className="p-0"> <CardContent className="p-0">
<div className="overflow-x-auto">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead>Judul</TableHead> <TableHead className="whitespace-nowrap">Judul</TableHead>
<TableHead>Tipe</TableHead> <TableHead className="whitespace-nowrap">Tipe</TableHead>
<TableHead>Mulai</TableHead> <TableHead className="whitespace-nowrap">Mulai</TableHead>
<TableHead>Status</TableHead> <TableHead className="whitespace-nowrap">Status</TableHead>
<TableHead className="text-right">Aksi</TableHead> <TableHead className="text-right whitespace-nowrap">Aksi</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -275,6 +276,7 @@ export default function AdminEvents() {
)} )}
</TableBody> </TableBody>
</Table> </Table>
</div>
</CardContent> </CardContent>
</Card> </Card>
</TabsContent> </TabsContent>
@@ -289,14 +291,15 @@ export default function AdminEvents() {
</Button> </Button>
</CardHeader> </CardHeader>
<CardContent className="p-0"> <CardContent className="p-0">
<div className="overflow-x-auto">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead>Tipe</TableHead> <TableHead className="whitespace-nowrap">Tipe</TableHead>
<TableHead>Mulai</TableHead> <TableHead className="whitespace-nowrap">Mulai</TableHead>
<TableHead>Selesai</TableHead> <TableHead className="whitespace-nowrap">Selesai</TableHead>
<TableHead>Catatan</TableHead> <TableHead className="whitespace-nowrap">Catatan</TableHead>
<TableHead className="text-right">Aksi</TableHead> <TableHead className="text-right whitespace-nowrap">Aksi</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -329,6 +332,7 @@ export default function AdminEvents() {
)} )}
</TableBody> </TableBody>
</Table> </Table>
</div>
</CardContent> </CardContent>
</Card> </Card>
</TabsContent> </TabsContent>
@@ -371,7 +375,7 @@ export default function AdminEvents() {
</SelectContent> </SelectContent>
</Select> </Select>
</div> </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"> <div className="space-y-2">
<Label>Mulai *</Label> <Label>Mulai *</Label>
<Input <Input
@@ -423,7 +427,7 @@ export default function AdminEvents() {
</SelectContent> </SelectContent>
</Select> </Select>
</div> </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"> <div className="space-y-2">
<Label>Mulai *</Label> <Label>Mulai *</Label>
<Input <Input

12
src/pages/admin/AdminMembers.tsx
View File

@@ -104,14 +104,15 @@ export default function AdminMembers() {
<Card className="border-2 border-border"> <Card className="border-2 border-border">
<CardContent className="p-0"> <CardContent className="p-0">
<div className="overflow-x-auto">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead>Email</TableHead> <TableHead className="whitespace-nowrap">Email</TableHead>
<TableHead>Nama</TableHead> <TableHead className="whitespace-nowrap">Nama</TableHead>
<TableHead>Role</TableHead> <TableHead className="whitespace-nowrap">Role</TableHead>
<TableHead>Bergabung</TableHead> <TableHead className="whitespace-nowrap">Bergabung</TableHead>
<TableHead className="text-right">Aksi</TableHead> <TableHead className="text-right whitespace-nowrap">Aksi</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -151,6 +152,7 @@ export default function AdminMembers() {
)} )}
</TableBody> </TableBody>
</Table> </Table>
</div>
</CardContent> </CardContent>
</Card> </Card>