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