Fix admin page styling and user table

client/app/(posts)/new/page.tsx

@@ -1,6 +1,5 @@
-import Header from "@components/header"
 import NewPost from "app/(posts)/new/components/new"
-import "@styles/react-datepicker.css"
+import "./react-datepicker.css"
 
 const New = () => <NewPost />
 

client/app/admin/components/user-table.tsx

@@ -10,7 +10,6 @@ const UserTable = ({ users: initial }: { users: UserWithPosts[] }) => {
 	const [users, setUsers] = useState(initial)
 	const { setToast } = useToasts()
 
-	console.log(initial)
 	const toggleRole = async (id: string, role: "admin" | "user") => {
 		const res = await fetch("/api/admin?action=toggle-role", {
 			method: "POST",
@@ -20,8 +19,6 @@ const UserTable = ({ users: initial }: { users: UserWithPosts[] }) => {
 			})
 		})
 
-		const json = await res.json()
-
 		if (res.status === 200) {
 			setToast({
 				text: "Role updated",
@@ -84,7 +81,7 @@ const UserTable = ({ users: initial }: { users: UserWithPosts[] }) => {
 			id: user.id,
 			displayName: user.displayName,
 			posts: user.posts?.length || 0,
-			createdAt: `${new Date(user.createdAt)} ${new Date(
+			createdAt: `${new Date(user.createdAt).toLocaleDateString()} ${new Date(
 				user.createdAt
 			).toLocaleTimeString()}`,
 			role: user.role,

client/app/admin/page.tsx

@@ -26,7 +26,7 @@ const AdminPage = async () => {
 					display: "flex",
 					flexDirection: "column",
 					alignItems: "center",
-					gap: 4
+					gap: "var(--gap)",
 				}}
 			>
 				<UserTable users={users} />

client/app/components/settings-group/index.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 const SettingsGroup = ({ title, children }: Props) => {
 	return (
-		<Fieldset>
+		<Fieldset width={'100%'}>
 			<Fieldset.Content>
 				<Text h4>{title}</Text>
 			</Fieldset.Content>

client/lib/server/prisma.ts

@@ -227,9 +227,10 @@ export const getAllUsers = async () => {
 		select: {
 			id: true,
 			email: true,
-			// displayName: true,
 			role: true,
+			displayName: true,
 			posts: true,
+			createdAt: true,
 		},
 	})