feat(cron): ✨ Admin Cron page

src/components/Header.tsx

@@ -30,6 +30,7 @@ import {
 	useMantineTheme,
 } from '@mantine/core';
 import {
+	IconDashboard,
 	IconDots,
 	IconMoonStars,
 	IconPhoto,
@@ -183,6 +184,15 @@ const Header = ({ links, style }: HeaderProps) => {
 								>
 									{t('user.review')}
 								</Menu.Item>
+								{user.hasPermission('admin.admin') && (
+									<Menu.Item
+										leftSection={<IconDashboard size={14} />}
+										component={Link}
+										href="/admin/cron"
+									>
+										Administration
+									</Menu.Item>
+								)}
 								<Menu.Divider />
 								<Menu.Item leftSection={<Logout size={14} />} color="red" onClick={() => signOut()}>
 									{t('auth.signout')}

src/components/SettingsTabs.tsx

@@ -7,7 +7,9 @@ import {
 	useMantineTheme,
 } from '@mantine/core';
 import {
+	IconClock,
 	IconDashboard,
+	IconHome,
 	IconPhoto,
 	IconPolygon,
 	IconSearch,
@@ -132,4 +134,76 @@ const SettingsTabs = ({
 	);
 };
 
+export const AdminSettingsTabs = ({
+	children,
+	loading = false,
+}: {
+	children: any;
+	loading?: boolean;
+}) => {
+	const theme = useMantineTheme();
+	const scheme = useMantineColorScheme();
+	const user = useUser();
+	const session = useSession();
+	const router = useRouter();
+	const mobileLayout = useMediaQuery('(max-width: 1600px)');
+	return (
+		<>
+			<Paper
+				p="lg"
+				radius={0}
+				style={
+					!mobileLayout
+						? {
+								position: 'absolute',
+								left: -110,
+								top: 'var(--mantine-spacing-xl)',
+								maxWidth: '300px',
+								overflow: 'hidden',
+						  }
+						: {}
+				}
+			>
+				<Tabs
+					defaultValue="cron"
+					variant="pills"
+					orientation={!mobileLayout ? 'vertical' : 'horizontal'}
+					value={router.pathname.split('admin/')[1]}
+					onChange={(value) =>
+						value == 'quit' ? router.push(`/`) : router.push(`/admin/${value}`)
+					}
+					style={{ width: '100%' }}
+				>
+					<Tabs.List>
+						<Tabs.Tab
+							value="cron"
+							leftSection={<IconClock size="0.8rem" />}
+							disabled={!user.hasPermissions(['admin.admin'])}
+						>
+							Cron
+						</Tabs.Tab>
+
+						<Tabs.Tab value="quit" leftSection={<IconHome size="0.8rem" />}>
+							Quit
+						</Tabs.Tab>
+					</Tabs.List>
+				</Tabs>
+			</Paper>
+			<Box
+				style={(theme) => ({
+					// backgroundColor: scheme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+					padding: 'calc(var(--mantine-spacing-xs) * 3)',
+					paddingTop: theme.spacing.md,
+					height: '100%',
+					position: 'relative',
+				})}
+			>
+				<LoadingOverlay visible={user.isLoading && loading} overlayProps={{ blur: 4 }} />
+				{children}
+			</Box>
+		</>
+	);
+};
+
+
 export default SettingsTabs;

src/pages/admin/cron.tsx

@@ -0,0 +1,76 @@
+import {
+	Switch,
+	Table,
+	Text,
+	Tooltip,
+	useMantineColorScheme,
+	useMantineTheme,
+} from '@mantine/core';
+
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import useSWR from 'swr';
+import thumbnail from '../../../public/images/thumbnails/teams.png';
+import Page from '../../components/Page';
+import { AdminSettingsTabs } from '../../components/SettingsTabs';
+import { useUser } from '../../hooks/useUser';
+
+var vagueTime = require('vague-time');
+const Settings = ({ data: tempData }: any) => {
+	const theme = useMantineTheme();
+	const scheme = useMantineColorScheme();
+	const user = useUser();
+	const { data } = useSWR('/admin/cron');
+
+	return (
+		<Page
+			smallPadding
+			head={{
+				title: 'Cron Jobs',
+				image: thumbnail,
+			}}
+			seo={{ nofollow: true, noindex: true }}
+			requiredPermissions={['admin.admin']}
+			loading={!data}
+		>
+			<AdminSettingsTabs loading={!data}>
+				<Table>
+					<Table.Thead>
+						<Table.Th>Name</Table.Th>
+						<Table.Th>Running</Table.Th>
+						<Table.Th>Next Run</Table.Th>
+						<Table.Th>Cron String</Table.Th>
+					</Table.Thead>
+					<Table.Tbody>
+						{data.map((job: any) => (
+							<Table.Tr key={job.id}>
+								<Table.Td>{job.id}</Table.Td>
+								<Table.Td>
+									<Switch readOnly checked={job.running} />
+								</Table.Td>
+								<Table.Td>
+									<Tooltip
+										label={
+											job.nextExecution ? vagueTime.get({ to: new Date(job.nextExecution) }) : ''
+										}
+									>
+										<Text>{new Date(job.nextExecution).toLocaleString()}</Text>
+									</Tooltip>
+								</Table.Td>
+								<Table.Td>{job.cronTime}</Table.Td>
+							</Table.Tr>
+						))}
+					</Table.Tbody>
+				</Table>
+			</AdminSettingsTabs>
+		</Page>
+	);
+};
+
+export default Settings;
+export async function getStaticProps({ locale, params }: any) {
+	return {
+		props: {
+			...(await serverSideTranslations(locale, ['common', 'teams'])),
+		},
+	};
+}