feat(dash/admin): ✨ FAQ List Page

.vscode/settings.json

@@ -21,6 +21,7 @@
 		"api/core",
 		"frontend/v2",
 		"api/blog",
-		"dash/src"
+		"dash/src",
+		"dash/admin"
 	]
 }

apps/dashboard/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/dashboard/next.config.ts

@@ -0,0 +1,11 @@
+import type { NextConfig } from 'next';
+import path from 'path';
+
+const nextConfig: NextConfig = {
+	experimental: {},
+	output: 'standalone',
+	poweredByHeader: false,
+	outputFileTracingRoot: path.join(__dirname, '../../'),
+};
+
+export default nextConfig;

apps/dashboard/package.json

@@ -7,7 +7,7 @@
 		"build": "next build",
 		"clean": "rm -rf .next",
 		"start": "next start",
-		"dev": "next dev --port 3001" ,
+		"dev": "next dev --turbopack --port 3001",
 		"lint": "eslint . --max-warnings 0",
 		"prettier": "prettier ./src --write --ignore-unknown",
 		"env:copy": "cp .env.example .env"
@@ -24,27 +24,28 @@
 		"@mantine/nprogress": "^7.13.2",
 		"@mantine/spotlight": "^7.13.2",
 		"@tabler/icons-react": "^3.9.0",
+		"@repo/db": "*",
 		"clsx": "^2.1.1",
 		"dayjs": "^1.11.11",
 		"mantine-contextmenu": "^7.11.0",
 		"mantine-datatable": "^7.12.4",
 		"moment": "^2.30.1",
 		"moment-timezone": "^0.5.45",
-		"next": "14.2.4",
+		"next": "15.0.2",
 		"next-auth": "^4.24.7",
-		"react": "^18",
-		"react-dom": "^18",
+		"react": "19.0.0-rc-02c0e824-20241028",
+		"react-dom": "19.0.0-rc-02c0e824-20241028",
 		"recharts": "2",
 		"swr": "^2.2.5"
 	},
 	"devDependencies": {
 		"@repo/prettier-config": "*",
 		"@repo/typescript-config": "*",
 		"@types/node": "^20",
-		"@types/react": "^18",
-		"@types/react-dom": "^18",
+		"@types/react": "npm:types-react@19.0.0-rc.1",
+		"@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
 		"eslint": "^8",
-		"eslint-config-next": "14.2.4",
+		"eslint-config-next": "15.0.2",
 		"eslint-plugin-storybook": "^0.8.0",
 		"postcss": "^8.4.39",
 		"postcss-preset-mantine": "^1.15.0",
@@ -54,5 +55,9 @@
 	"prettier": "@repo/prettier-config",
 	"lint-staged": {
 		"*": "prettier --write --ignore-unknown"
+	},
+	"resolutions": {
+		"@types/react": "npm:types-react@19.0.0-rc.1",
+		"@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
 	}
 }

apps/dashboard/src/actions/getUser.ts

@@ -0,0 +1,6 @@
+import { User } from "@/types/User";
+import { authedFetcher } from "@/util/data";
+
+export const getUser = async () => {
+	return authedFetcher<User>('/account');
+};

apps/dashboard/src/app/am/faq/datatable.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { ActionIcon, Code, Group } from '@mantine/core';
+import { IconEdit, IconExternalLink } from '@tabler/icons-react';
+
+import { DataTable } from 'mantine-datatable';
+import { FAQQuestion } from '@repo/db';
+import Link from 'next/link';
+
+export default function FAQDatatabe({ faq }: { faq: FAQQuestion[] }) {
+	return (
+		<DataTable
+			columns={[
+				{
+					accessor: 'id',
+					title: '#',
+					render: ({ id }) => <Code>{id.split('-')[0]}</Code>,
+					footer: faq.length + ' Questions',
+				},
+				{ accessor: 'question' },
+				{
+					accessor: '',
+					title: '',
+					textAlign: 'right',
+					render: (question) => (
+						<Group gap={4} justify="right" wrap="nowrap">
+							<ActionIcon size="sm" variant="subtle" color="yellow" aria-label="Edit Question">
+								<IconEdit size={16} />
+							</ActionIcon>
+							<ActionIcon
+								size="sm"
+								variant="subtle"
+								color="cyan"
+								aria-label="View Question on Website"
+								component={Link}
+								href={`https://buildtheearth.net/faq#:~:text=${encodeURIComponent(question.question)}`}
+								target="_blank"
+								rel="noopener"
+							>
+								<IconExternalLink size={16} />
+							</ActionIcon>
+						</Group>
+					),
+				},
+			]}
+			records={faq}
+		/>
+	);
+}

apps/dashboard/src/app/am/faq/loading.tsx

@@ -0,0 +1,24 @@
+import { Box, Title } from '@mantine/core';
+
+import { DataTable } from 'mantine-datatable';
+
+export default async function Page() {
+	return (
+		<Box mx="md" maw="90vw">
+			<Title order={1} mt="xl" mb="md">
+				FAQ Questions
+			</Title>
+			<DataTable
+				columns={[
+					{ accessor: 'id', title: '#'},
+					{ accessor: 'question' },
+					{ accessor: '', title: 'Actions'},
+				]}
+				records={[]}
+				minHeight={500}
+				width={"100%"}
+				noRecordsText='Loading FAQ Questions...'
+			/>
+		</Box>
+	);
+}

apps/dashboard/src/app/am/faq/page.tsx

@@ -0,0 +1,38 @@
+import {
+	Box,
+	Button,
+	Group,
+	Title
+} from '@mantine/core';
+import { IconExternalLink, IconPlus } from '@tabler/icons-react';
+
+import prisma from '@/util/db';
+import Link from 'next/link';
+import FAQDatatabe from './datatable';
+
+export default async function Page() {
+	const faq = await prisma.fAQQuestion.findMany();
+
+	return (
+		<Box mx="md" maw="90vw">
+			<Group justify="space-between" w="100%" mt="xl" mb="md">
+				<Title order={1}>FAQ Questions</Title>
+				<Group gap="xs">
+					<Button color="green" leftSection={<IconPlus size={14} />}>
+						Add New
+					</Button>
+					<Button
+						variant="light"
+						color="cyan"
+						component={Link}
+						href={`https://buildtheearth.net/faq`}
+						target="_blank"
+						rightSection={<IconExternalLink size={14} />}
+					>Open Page
+					</Button>
+				</Group>
+			</Group>
+			<FAQDatatabe faq={faq} />
+		</Box>
+	);
+}

apps/dashboard/src/app/layout.tsx

@@ -34,9 +34,9 @@ export default async function RootLayout({ children }: { children: React.ReactNo
 	const session = await getSession();
 
 	return (
-		<html lang="en" className={`${interFont.variable} ${minecraftFont.variable}`}>
+		<html lang="en" className={`${interFont.variable} ${minecraftFont.variable}`} suppressHydrationWarning>
 			<head>
-				<ColorSchemeScript />
+				<ColorSchemeScript/>
 			</head>
 			<body>
 				<MantineProvider>

apps/dashboard/src/app/me/connections/page.tsx

@@ -1,7 +1,7 @@
 import { Box, Title } from '@mantine/core';
 
+import { getUser } from '@/actions/getUser';
 import { SocialAccountStack } from '@/components/data/SocialAccount';
-import { getUser } from '@/hooks/useUser';
 import { KeycloakUser } from '@/types/User';
 import { authedFetcher } from '@/util/data';