Add admin pagination and update configs

apps/admin/src/pages/content/CategoriesPage.tsx

@@ -10,6 +10,7 @@ import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { IconPicker, IconPreview } from '@/components/ui/icon-picker';
 import { Skeleton } from '@/components/ui/skeleton';
+import { PaginationControls } from '@/components/ui/pagination';
 import {
     Dialog,
     DialogContent,
@@ -53,6 +54,9 @@ export function CategoriesPage() {
     const [categories, setCategories] = useState<Category[]>([]);
     const [loading, setLoading] = useState(true);
     const [aiIdeasOpen, setAiIdeasOpen] = useState(false);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(12);
+    const [totalCount, setTotalCount] = useState(0);
 
     // Form state using the new hook
     const form = useEntityForm<CategoryFormData, Category>(
@@ -71,25 +75,34 @@ export function CategoriesPage() {
     const fetchCategories = useCallback(async () => {
         setLoading(true);
         try {
-            // Fetch categories with pack count
-            const { data: cats, error } = await supabase
+            const from = (page - 1) * pageSize;
+            const to = from + pageSize - 1;
+
+            const { data: cats, error, count } = await supabase
                 .from('categories')
-                .select('*')
-                .order('sort_order', { ascending: true });
+                .select('*', { count: 'exact' })
+                .order('sort_order', { ascending: true })
+                .range(from, to);
 
             if (error) throw error;
 
-            // Fetch pack counts per category
-            const { data: packs } = await supabase
-                .from('question_packs')
-                .select('category_id');
+            setTotalCount(count || 0);
 
+            const categoryIds = (cats || []).map(c => c.id);
             const packCounts: Record<string, number> = {};
-            packs?.forEach(p => {
-                if (p.category_id) {
-                    packCounts[p.category_id] = (packCounts[p.category_id] || 0) + 1;
-                }
-            });
+
+            if (categoryIds.length > 0) {
+                const { data: packs } = await supabase
+                    .from('question_packs')
+                    .select('category_id')
+                    .in('category_id', categoryIds);
+
+                packs?.forEach(p => {
+                    if (p.category_id) {
+                        packCounts[p.category_id] = (packCounts[p.category_id] || 0) + 1;
+                    }
+                });
+            }
 
             setCategories(
                 (cats || []).map(c => ({
@@ -103,12 +116,19 @@ export function CategoriesPage() {
         } finally {
             setLoading(false);
         }
-    }, []);
+    }, [page, pageSize]);
 
     useEffect(() => {
         fetchCategories();
     }, [fetchCategories]);
 
+    useEffect(() => {
+        const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+        if (page > totalPages) {
+            setPage(totalPages);
+        }
+    }, [page, pageSize, totalCount]);
+
     // =============================================================================
     // Handlers
     // =============================================================================
@@ -143,7 +163,7 @@ export function CategoriesPage() {
             } else {
                 const { error } = await auditedSupabase.insert('categories', {
                     ...data,
-                    sort_order: categories.length,
+                    sort_order: totalCount,
                 });
                 if (error) throw error;
                 toast.success('Category created');
@@ -406,6 +426,19 @@ export function CategoriesPage() {
                 </div>
             )}
 
+            {categories.length > 0 && (
+                <PaginationControls
+                    page={page}
+                    pageSize={pageSize}
+                    totalCount={totalCount}
+                    onPageChange={setPage}
+                    onPageSizeChange={(size) => {
+                        setPage(1);
+                        setPageSize(size);
+                    }}
+                />
+            )}
+
             {/* AI Dialog */}
             <AiGeneratorDialog
                 open={aiIdeasOpen}

apps/admin/src/pages/content/PacksPage.tsx

@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Skeleton } from '@/components/ui/skeleton';
+import { PaginationControls } from '@/components/ui/pagination';
 import { Plus, MessageCircle, Pencil, Trash2, Sparkles, Crown, Eye, EyeOff, Flame, Heart, Tags, ChevronUp, ChevronDown } from 'lucide-react';
 import { toast } from 'sonner';
 import { AiGeneratorDialog } from '@/components/ai/AiGeneratorDialog';
@@ -60,6 +61,9 @@ export function PacksPage() {
     const [extractTopicsPack, setExtractTopicsPack] = useState<QuestionPack | null>(null);
     const [allTopics, setAllTopics] = useState<Topic[]>([]);
     const [selectedTopicIds, setSelectedTopicIds] = useState<Set<string>>(new Set());
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(12);
+    const [totalCount, setTotalCount] = useState(0);
 
     // Form state using the hook
     const form = useEntityForm<PackFormData, QuestionPack>(
@@ -98,30 +102,39 @@ export function PacksPage() {
                 setCategory(cat);
             }
 
+            const from = (page - 1) * pageSize;
+            const to = from + pageSize - 1;
+
             // Fetch packs
             let query = supabase
                 .from('question_packs')
-                .select('*')
-                .order('sort_order', { ascending: true });
+                .select('*', { count: 'exact' })
+                .order('sort_order', { ascending: true })
+                .range(from, to);
 
             if (categoryId) {
                 query = query.eq('category_id', categoryId);
             }
 
-            const { data: packData, error } = await query;
+            const { data: packData, error, count } = await query;
             if (error) throw error;
 
+            setTotalCount(count || 0);
+
             // Fetch question counts
             const packIds = (packData || []).map(p => p.id);
-            const { data: questions } = await supabase
-                .from('questions')
-                .select('pack_id')
-                .in('pack_id', packIds);
-
             const questionCounts: Record<string, number> = {};
-            questions?.forEach(q => {
-                questionCounts[q.pack_id] = (questionCounts[q.pack_id] || 0) + 1;
-            });
+
+            if (packIds.length > 0) {
+                const { data: questions } = await supabase
+                    .from('questions')
+                    .select('pack_id')
+                    .in('pack_id', packIds);
+
+                questions?.forEach(q => {
+                    questionCounts[q.pack_id] = (questionCounts[q.pack_id] || 0) + 1;
+                });
+            }
 
             // Fetch all topics
             const { data: topicsData } = await supabase
@@ -131,13 +144,17 @@ export function PacksPage() {
             setAllTopics(topicsData || []);
 
             // Fetch pack_topics relationships
-            const { data: packTopicsData } = await supabase
-                .from('pack_topics')
-                .select('pack_id, topic_id, topics(id, name)')
-                .in('pack_id', packIds);
+            let packTopicsData: any[] = [];
+            if (packIds.length > 0) {
+                const { data } = await supabase
+                    .from('pack_topics')
+                    .select('pack_id, topic_id, topics(id, name)')
+                    .in('pack_id', packIds);
+                packTopicsData = data || [];
+            }
 
             const packTopicsMap: Record<string, Topic[]> = {};
-            packTopicsData?.forEach((pt: any) => {
+            packTopicsData.forEach((pt: any) => {
                 if (!packTopicsMap[pt.pack_id]) {
                     packTopicsMap[pt.pack_id] = [];
                 }
@@ -159,12 +176,19 @@ export function PacksPage() {
         } finally {
             setLoading(false);
         }
-    }, [categoryId]);
+    }, [categoryId, page, pageSize]);
 
     useEffect(() => {
         fetchData();
     }, [fetchData]);
 
+    useEffect(() => {
+        const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+        if (page > totalPages) {
+            setPage(totalPages);
+        }
+    }, [page, pageSize, totalCount]);
+
     // =============================================================================
     // Handlers
     // =============================================================================
@@ -211,7 +235,7 @@ export function PacksPage() {
                         is_public: form.formData.is_public,
                         is_explicit: form.formData.is_explicit,
                         category_id: categoryId || null,
-                        sort_order: packs.length,
+                        sort_order: totalCount,
                     })
                     .select('id')
                     .single();
@@ -535,6 +559,19 @@ export function PacksPage() {
                     ))}
                 </div>
             )}
+
+            {packs.length > 0 && (
+                <PaginationControls
+                    page={page}
+                    pageSize={pageSize}
+                    totalCount={totalCount}
+                    onPageChange={setPage}
+                    onPageSizeChange={(size) => {
+                        setPage(1);
+                        setPageSize(size);
+                    }}
+                />
+            )}
         </div>
     );
 }

apps/admin/src/pages/content/QuestionsPage.tsx

@@ -9,6 +9,7 @@ import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Badge } from '@/components/ui/badge';
 import { Skeleton } from '@/components/ui/skeleton';
+import { PaginationControls } from '@/components/ui/pagination';
 import {
     Table,
     TableBody,
@@ -70,6 +71,9 @@ export function QuestionsPage() {
     const [saving, setSaving] = useState(false);
     const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
     const [bulkDeleting, setBulkDeleting] = useState(false);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(25);
+    const [totalCount, setTotalCount] = useState(0);
 
     // Form state
     const [formData, setFormData] = useState<{
@@ -100,14 +104,19 @@ export function QuestionsPage() {
 
             setPack(packData);
 
+            const from = (page - 1) * pageSize;
+            const to = from + pageSize - 1;
+
             // Fetch questions
-            const { data: questionData, error } = await supabase
+            const { data: questionData, error, count } = await supabase
                 .from('questions')
-                .select('*')
+                .select('*', { count: 'exact' })
                 .eq('pack_id', packId)
-                .order('created_at', { ascending: true });
+                .order('created_at', { ascending: true })
+                .range(from, to);
 
             if (error) throw error;
+            setTotalCount(count || 0);
             setQuestions(questionData || []);
         } catch (error) {
             toast.error('Failed to load questions');
@@ -115,33 +124,49 @@ export function QuestionsPage() {
         } finally {
             setLoading(false);
         }
-    }, [packId]);
+    }, [packId, page, pageSize]);
 
     // Real-time subscription for questions in this pack
     const { status: realtimeStatus } = useRealtimeSubscription<Question>({
         table: 'questions',
         filter: packId ? `pack_id=eq.${packId}` : undefined,
         enabled: !!packId,
-        onInsert: useCallback((newQuestion: Question) => {
-            setQuestions(prev => [...prev, newQuestion]);
-        }, []),
-        onUpdate: useCallback(({ new: updated }: { old: Question; new: Question }) => {
-            setQuestions(prev => prev.map(q => q.id === updated.id ? updated : q));
-        }, []),
+        onInsert: useCallback(() => {
+            fetchData();
+        }, [fetchData]),
+        onUpdate: useCallback(() => {
+            fetchData();
+        }, [fetchData]),
         onDelete: useCallback((deleted: Question) => {
-            setQuestions(prev => prev.filter(q => q.id !== deleted.id));
             setSelectedIds(prev => {
                 const next = new Set(prev);
                 next.delete(deleted.id);
                 return next;
             });
-        }, []),
+            fetchData();
+        }, [fetchData]),
     });
 
     useEffect(() => {
         fetchData();
     }, [fetchData]);
 
+    useEffect(() => {
+        const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+        if (page > totalPages) {
+            setPage(totalPages);
+        }
+    }, [page, pageSize, totalCount]);
+
+    useEffect(() => {
+        setPage(1);
+        setSelectedIds(new Set());
+    }, [packId]);
+
+    useEffect(() => {
+        setSelectedIds(new Set());
+    }, [page, pageSize]);
+
     const openCreateDialog = () => {
         setEditingQuestion(null);
         setFormData({ text: '', partner_text: '', intensity: 1, allowed_couple_genders: [], target_user_genders: [] });
@@ -319,7 +344,7 @@ export function QuestionsPage() {
                         <RealtimeStatusIndicator status={realtimeStatus} showLabel />
                     </div>
                     <p className="text-muted-foreground">
-                        {questions.length} question{questions.length !== 1 ? 's' : ''} in this pack
+                        {totalCount} question{totalCount !== 1 ? 's' : ''} in this pack
                     </p>
                 </div>
                 <div className="flex gap-2">
@@ -615,7 +640,7 @@ export function QuestionsPage() {
                                             />
                                         </TableCell>
                                         <TableCell className="font-medium text-muted-foreground">
-                                            {index + 1}
+                                            {(page - 1) * pageSize + index + 1}
                                         </TableCell>
                                         <TableCell>
                                             <span className="line-clamp-2">{question.text}</span>
@@ -689,6 +714,19 @@ export function QuestionsPage() {
                     </div>
                 )
             }
+
+            {questions.length > 0 && (
+                <PaginationControls
+                    page={page}
+                    pageSize={pageSize}
+                    totalCount={totalCount}
+                    onPageChange={setPage}
+                    onPageSizeChange={(size) => {
+                        setPage(1);
+                        setPageSize(size);
+                    }}
+                />
+            )}
         </div >
     );
 }