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="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})