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