From f7c768b775b896ffa146f6ee612c34db070b2648 Mon Sep 17 00:00:00 2001 From: mosesintech Date: Thu, 7 Nov 2024 15:55:07 -0600 Subject: [PATCH 01/25] feat(admin): add admin dashboard with side navigation - dummy content --- .../domain/admin/dashboard/index.tsx | 68 ++++++ .../domain/admin/dashboard/users.tsx | 208 ++++++++++++++++++ src/templates/pages/admin.tsx | 3 +- 3 files changed, 278 insertions(+), 1 deletion(-) create mode 100644 src/components/domain/admin/dashboard/index.tsx create mode 100644 src/components/domain/admin/dashboard/users.tsx diff --git a/src/components/domain/admin/dashboard/index.tsx b/src/components/domain/admin/dashboard/index.tsx new file mode 100644 index 0000000..de2ad1f --- /dev/null +++ b/src/components/domain/admin/dashboard/index.tsx @@ -0,0 +1,68 @@ +"use client"; + +import React, { useState } from "react"; +import { Separator } from "~/components/ui/separator"; +import { + NavigationMenu, + NavigationMenuItem, + NavigationMenuList, +} from "~/components/ui/navigation-menu"; +import AllUsers from "./users"; + +type View = "users" | "account"; + +export default function AdminDashboard() { + const [view, setView] = useState("users"); + + const views: { title: string; view: View }[] = [ + { + title: "Users", + view: "users", + }, + { + title: "Account", + view: "account", + }, + ]; + + return ( +
+
+

+ Admin Dashboard +

+ +

+ Handle admin-level tasks all from this dashboard. +

+ + + +
+ + + {views.map((item) => { + return ( + + + setView(item.view)} + > + {item.title} + + + + ); + })} + + + + {view === "users" ? : } +
+
+
+ ); +} diff --git a/src/components/domain/admin/dashboard/users.tsx b/src/components/domain/admin/dashboard/users.tsx new file mode 100644 index 0000000..a2a785c --- /dev/null +++ b/src/components/domain/admin/dashboard/users.tsx @@ -0,0 +1,208 @@ +import { z } from "zod"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { useForm } from "react-hook-form"; + +import { api } from "~/trpc/react"; +import { loginAction } from "~/lib/actions/login"; +import { Separator } from "~/components/ui/separator"; +import { Button } from "~/components/ui/button"; +import { Input } from "~/components/ui/input"; +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormDescription, + FormMessage, +} from "~/components/ui/form"; +import { Textarea } from "~/components/ui/textarea"; + +export default function AllUsers() { + const formSchema = z.object({ + username: z.string().min(3), + email: z.string().min(6), + }); + + const form = useForm>({ + resolver: zodResolver(formSchema), + defaultValues: { + username: "", + email: "", + }, + }); + + const { + formState: { isDirty }, + setError, + } = form; + + const userLogin = api.user.login.useMutation({ + onSuccess: async (data) => { + await loginAction(data); // sets cookie data + }, + onError: (e) => { + setError("username", { type: "server", message: e.message }); + return setError("email", { type: "server", message: e.message }); + }, + }); + + function onSubmit(formData: z.infer) { + userLogin.mutate({ + username: formData.username, + email: formData.email, + }); + } + + return ( +
+

Profile

+

This is how others will see you on the site.

+ + + +
+ + ( + <> + + Username + + + + + This is your public display name. You can only change this + once every 30 days. + + + + + )} + /> + + ( + <> + + Email + + + + + + + )} + /> + + ( + <> + + Bio + +