# All files / src/components/admin SettingsPage.tsx

0% Statements 0/12
100% Branches 0/0
0% Functions 0/6
0% Lines 0/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81

     'use client';

    import React, { Suspense, lazy } from 'react';
    import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
    import { Settings, DollarSign, Film, Database, Loader2 } from 'lucide-react';
    import { useTranslation } from 'react-i18next';
    import useLoadNamespace from '@/hooks/useLoadNamespace';

    // Lazy load each sub-section for performance
    const SystemConfiguration = lazy(() => import('@/components/admin/SystemConfiguration'));
    const CreditsPricingConfig = lazy(() => import('@/components/admin/CreditsPricingConfig'));

    function TabLoading() {
        return (
            <div className="flex items-center justify-center py-16">
                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
            </div>
        );
    }

    interface SettingsPageProps {
        className?: string;
    }

    export default function SettingsPage({ className }: SettingsPageProps) {
        useLoadNamespace('admin/systemConfiguration');
        const { t } = useTranslation(['admin/systemConfiguration', 'translation']);

        return (
            <div className={className}>
                <Tabs defaultValue="general" className="w-full">
                    <TabsList className="w-full justify-start mb-6">
                        <TabsTrigger value="general" className="gap-1.5">
                            <Settings className="h-4 w-4" />
                            {t('systemConfiguration.settings.tabs.general')}
                        </TabsTrigger>
                        <TabsTrigger value="credits" className="gap-1.5">
                            <DollarSign className="h-4 w-4" />
                            {t('systemConfiguration.settings.tabs.credits')}
                        </TabsTrigger>
                        <TabsTrigger value="tmdb" className="gap-1.5">
                            <Film className="h-4 w-4" />
                            {t('systemConfiguration.settings.tabs.tmdb')}
                        </TabsTrigger>
                        <TabsTrigger value="database" className="gap-1.5">
                            <Database className="h-4 w-4" />
                            {t('systemConfiguration.settings.tabs.database')}
                        </TabsTrigger>
                    </TabsList>

                    <TabsContent value="general">
                        <Suspense fallback={<TabLoading />}>
                            <SystemConfiguration visibleSections={['content-display', 'login-backdrops', 'public-endpoints', 'config-summary']} />
                        </Suspense>
                    </TabsContent>

                    <TabsContent value="credits">
                        <Suspense fallback={<TabLoading />}>
                            <SystemConfiguration visibleSections={['credit-system']} />
                            <div className="mt-6">
                                <CreditsPricingConfig />
                            </div>
                        </Suspense>
                    </TabsContent>

                    <TabsContent value="tmdb">
                        <Suspense fallback={<TabLoading />}>
                            <SystemConfiguration visibleSections={['tmdb-config']} />
                        </Suspense>
                    </TabsContent>

                    <TabsContent value="database">
                        <Suspense fallback={<TabLoading />}>
                            <SystemConfiguration visibleSections={['database-tools']} />
                        </Suspense>
                    </TabsContent>
                </Tabs>
            </div>
        );
    }