feat: add first users page

src/app/[locale]/(userArea)/admin/layout.tsx

@@ -1,8 +1,8 @@
+import { ActiveLink } from "@/components/common/ActiveLink";
 import { Heading } from "@/components/common/Heading";
 import { ensureIsAdmin } from "@/functions/user/ensureIsAdmin";
 import { getScopedI18n } from "@/locales/server";
 import { getRoute } from "@/routes";
-import Link from "next/link";
 import type { ReactElement } from "react";
 
 export default async function AdminLayout({
@@ -20,9 +20,12 @@ export default async function AdminLayout({
  <Heading>{t("title")}</Heading>
  <ul className="menu w-56 rounded-box bg-base-200">
  <li>
- <Link href={getRoute("admin")} className="active">
- {t("kpis")}
- </Link>
+ <ActiveLink href={getRoute("admin")}>{t("kpis")}</ActiveLink>
+ </li>
+ <li>
+ <ActiveLink href={getRoute("adminUsers")}>
+ {t("users")}
+ </ActiveLink>
  </li>
  </ul>
  </div>

src/app/[locale]/(userArea)/admin/users/page.tsx

@@ -0,0 +1,77 @@
+import PagingComponent from "@/components/common/PagingComponent";
+import { ProfileImage } from "@/components/common/ProfileImage";
+import { getUsers } from "@/dal/admin/getUsers";
+import { getCurrentLocale, getScopedI18n } from "@/locales/server";
+import type { User } from "@prisma/client";
+
+const pageSize = 50;
+
+type Props = {
+ searchParams: {
+ query: string | undefined;
+ skip: string | undefined;
+ };
+};
+
+async function UserComponent({ user }: { user: User }) {
+ const t = await getScopedI18n("admin");
+ const locale = getCurrentLocale();
+
+ return (
+ <div
+ className="border-e border-s border-t border-accent p-3 
+ first:rounded-t last:rounded-b last:border-b"
+ >
+ <div className="flex items-center justify-start gap-3">
+ <ProfileImage user={user} />
+ <p>{user.name}</p>
+ </div>
+ <div>
+ <p>
+ {t("userEmail")}: {user.email}
+ </p>
+ <p>
+ {t("userCreatedAt")}: {user.createdAt.toLocaleString(locale)}
+ </p>
+ </div>
+ </div>
+ );
+}
+
+export default async function UsersPage({ searchParams }: Props) {
+ const t = await getScopedI18n("admin");
+ const skip = searchParams.skip ? parseInt(searchParams.skip) : 0;
+ const { data: users, total } = await getUsers(
+ searchParams.query,
+ skip,
+ pageSize
+ );
+
+ return (
+ <div>
+ <div className="mb-3">
+ <form method="get">
+ <div className="join w-full">
+ <input
+ className="input join-item input-bordered w-full"
+ name="query"
+ defaultValue={searchParams.query}
+ placeholder={t("usersQuery")}
+ />
+ <button type="submit" className="btn join-item rounded-r-full">
+ {t("usersSearch")}
+ </button>
+ </div>
+ </form>
+ </div>
+
+ <div>
+ {users.map((user) => (
+ <UserComponent key={user.id} user={user} />
+ ))}
+ </div>
+
+ <PagingComponent total={total} pageSize={pageSize} skip={skip} />
+ </div>
+ );
+}

src/components/common/ActiveLink.tsx

@@ -0,0 +1,23 @@
+"use client";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import type { FC, PropsWithChildren } from "react";
+
+type Props = {
+ href: string;
+};
+
+/** A (Route)Link that knows if it's active
+ */
+export const ActiveLink: FC<PropsWithChildren<Props>> = ({
+ href,
+ children,
+}) => {
+ const pathName = usePathname();
+
+ return (
+ <Link href={href} className={pathName === href ? "active" : ""}>
+ {children}
+ </Link>
+ );
+};

src/components/common/PagingComponent.tsx

@@ -0,0 +1,32 @@
+type Props = {
+ total: number;
+ pageSize: number;
+ skip: number;
+};
+
+export default function PagingComponent({ total, pageSize, skip }: Props) {
+ const pages = Math.ceil(total / pageSize);
+ const currentPage = Math.floor(skip / pageSize) + 1;
+
+ return (
+ <div className="mt-3 flex justify-end">
+ <form method="get">
+ <div className="join">
+ {Array.from({ length: pages }, (_, i) => i + 1).map((page) => (
+ <button
+ key={page}
+ name="skip"
+ value={(page - 1) * pageSize}
+ type="submit"
+ className={`btn join-item ${
+ page === currentPage ? "btn-active" : ""
+ }`}
+ >
+ {page}
+ </button>
+ ))}
+ </div>
+ </form>
+ </div>
+ );
+}

src/dal/admin/getUsers.ts

@@ -0,0 +1,40 @@
+import { prisma } from "@/server/db";
+import type { PagingResult } from "@/types/PagingResult";
+import type { User } from "@prisma/client";
+
+/**
+ * Searches for users (or returns all)
+ * @param query SearchQuery for Email or Name
+ * @param skip Items to skip
+ * @param take Items to take (per page)
+ * @returns List of users
+ */
+export async function getUsers(
+ query: string | undefined,
+ skip: number,
+ take: number
+): Promise<PagingResult<User>> {
+ const dbQuery: Parameters<typeof prisma.user.findMany>[0] = {
+ skip,
+ take,
+ };
+
+ if (query) {
+ dbQuery.where = {
+ OR: [{ email: { contains: query } }, { name: { contains: query } }],
+ };
+ }
+
+ const total = await prisma.user.count({ where: dbQuery.where });
+
+ const users = await prisma.user.findMany({
+ ...dbQuery,
+ orderBy: { name: "asc" },
+ });
+
+ return {
+ data: users,
+ total,
+ skip,
+ };
+}

src/locales/de.ts

@@ -111,5 +111,9 @@ export default {
  newUsersThisMonth: "Neue Nutzer diesen Monat",
  newUsersToday: "Neue Nutzer heute",
  usersKpis: "Nutzer Statistiken",
+ userEmail: "E-Mail",
+ userCreatedAt: "Erstellt am",
+ usersQuery: "Suche nach Name oder E-Mail",
+ usersSearch: "Suchen",
  },
 } as const;

src/locales/en.ts

@@ -109,5 +109,9 @@ export default {
  newUsersThisMonth: "New Users this month",
  newUsersToday: "New Users today",
  usersKpis: "Users KPIs",
+ userEmail: "Email",
+ userCreatedAt: "Created at",
+ usersQuery: "Search for name or email",
+ usersSearch: "Search",
  },
 } as const;

src/routes.ts

@@ -25,6 +25,7 @@ const routes = {
  withLocale(`/mealPlan/join/${invitationCode}`),
  profile: () => withLocale("/profile"),
  admin: () => withLocale("/admin"),
+ adminUsers: () => withLocale("/admin/users"),
 };
 
 /** Adds the locale to the route */

src/types/PagingResult.ts

@@ -0,0 +1,6 @@
+/** A limited result */
+export type PagingResult<T> = {
+ skip: number;
+ total: number;
+ data: T[];
+};