1import {
 2    Alert,
 3    AlertDescription,
 4    AlertTitle,
 5    Card,
 6    CardContent,
 7    CardFooter,
 8    CardHeader,
 9    CardTitle,
10    Page,
11    Loading,
12} from '@marzneshin/components';
13import { useServicesQuery } from '@marzneshin/features/services';
14import { UsersTable } from '@marzneshin/features/users';
15import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
16import { Link, createFileRoute, Outlet } from '@tanstack/react-router'
17import { type FC, Suspense } from 'react';
18import { useTranslation } from 'react-i18next';
19
20export const UsersPage: FC = () => {
21    const { data } = useServicesQuery({ page: 1, size: 10 });
22    const { t } = useTranslation();
23    return (
24        <Page>
25            <Card className="border-0 sm:w-screen md:w-full">
26                <CardHeader>
27                    <CardTitle>
28                        {t('users')}
29                    </CardTitle>
30                </CardHeader>
31                <CardContent>
32                    <UsersTable />
33                    <Suspense fallback={<Loading />}>
34                        <Outlet />
35                    </Suspense>
36                </CardContent>
37                <CardFooter>
38                    {(data && data.pageCount === 0) && (
39                        <Alert>
40                            <ExclamationTriangleIcon className="mr-2" />
41                            <AlertTitle className="font-semibold text-primary">{t('page.users.services-alert.title')}</AlertTitle>
42                            <AlertDescription>
43                                {t('page.users.services-alert.desc')}
44                                <Link className="m-1 font-semibold text-secondary-foreground" to="/services">{t('page.nodes.certificate-alert.click')}</Link>
45                            </AlertDescription>
46                        </Alert>
47                    )}
48                </CardFooter>
49            </Card>
50        </Page>
51    )
52};
53
54
55export const Route = createFileRoute('/_dashboard/users')({
56    component: () => <UsersPage />,
57})