aferrer/stock-manager
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: move unified Person+User form to /people/new, admin-only

Browse Source
This commit is contained in:
Asis ferrer
2026-06-17 08:51:23 +02:00
parent 1f5a849bf5
commit 4f370eee70
12 changed files with 333 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(dashboard)/admin/users/new/page.tsx
+3 -22
View File
@@ -1,24 +1,5 @@
import { getI18n } from "@/i18n/server"
import { redirect } from "next/navigation"
import NewUserForm from "../_components/new.user.form"
export default async function NewUserPage() {
const { dictionary } = await getI18n()
const copy = dictionary.admin.users
return (
<div className="flex flex-col gap-4">
<div className="flex items-center justify-between gap-4">
<h1 className="text-2xl font-bold">{copy.new.title}</h1>
</div>
<NewUserForm
formCopy={copy.form}
schemaCopy={{ ...copy.schema, ...dictionary.inventory.people.schema }}
roleLabels={copy.roles}
departmentCopy={dictionary.inventory.people.departments}
fallbackCopy={dictionary.inventory.people.fallback}
submitButtonCopy={dictionary.common.submitButton}
/>
</div>
)
export default function NewUserPage() {
redirect("/people/new")
}
src/app/(dashboard)/people/_components/new.person.form.tsx
+246
View File
@@ -0,0 +1,246 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useRouter } from "next/navigation"
import { useMemo } from "react"
import type { UseFormRegisterReturn } from "react-hook-form"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { createPersonUserAction } from "@/actions/person.actions"
import {
SubmitButton,
type SubmitButtonCopy,
} from "@/components/forms/submitButton"
import { PERSON_DEPARTMENTS } from "@/lib/constants"
import {
buildUnifiedCreateSchema,
type UnifiedCreateFormType,
type UnifiedSchemaCopy,
} from "@/schemas/user.schema"
import {
formatPersonDepartment,
type PersonDepartmentCopy,
type PersonFallbackCopy,
type UserFormCopy,
type UserRoleCopy,
} from "./user.copy"
export default function NewUserForm({
formCopy,
schemaCopy,
roleLabels,
departmentCopy,
fallbackCopy,
submitButtonCopy,
}: {
formCopy: UserFormCopy
schemaCopy: UnifiedSchemaCopy
roleLabels: UserRoleCopy
departmentCopy: PersonDepartmentCopy
fallbackCopy: PersonFallbackCopy
submitButtonCopy: SubmitButtonCopy
}) {
const router = useRouter()
const schema = useMemo(
() => buildUnifiedCreateSchema(schemaCopy),
[schemaCopy],
)
const {
register,
handleSubmit,
watch,
setError,
formState: { errors, isSubmitting, isSubmitSuccessful },
} = useForm<UnifiedCreateFormType>({
resolver: zodResolver(schema),
defaultValues: {
role: "STAFF",
isActive: true,
},
})
const selectedRole = watch("role")
const showPassword = selectedRole !== "NO_USER"
const onSubmit = async (formData: UnifiedCreateFormType) => {
const response = await createPersonUserAction(formData)
if (response?.errors) {
Object.entries(response.errors).forEach(([fieldName, messages]) => {
messages.forEach((message: string) => {
setError(fieldName as keyof UnifiedCreateFormType, {
type: "server",
message,
})
toast.error(message)
})
})
return
}
if (response?.success) {
toast.success(response.message)
router.push("/people")
}
}
return (
<form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)}>
<UserTextInput
error={errors.firstName?.message}
id="firstName"
label={formCopy.firstNameLabel}
placeholder={formCopy.firstNamePlaceholder}
register={register("firstName")}
/>
<UserTextInput
error={errors.lastName?.message}
id="lastName"
label={formCopy.lastNameLabel}
placeholder={formCopy.lastNamePlaceholder}
register={register("lastName")}
/>
<DepartmentSelect
error={errors.department?.message}
formCopy={formCopy}
departmentCopy={departmentCopy}
fallbackCopy={fallbackCopy}
register={register("department")}
/>
<UserTextInput
error={errors.email?.message}
id="email"
label={formCopy.emailLabel}
placeholder={formCopy.emailPlaceholder}
register={register("email")}
type="email"
/>
<UserTextInput
error={errors.phone?.message}
id="phone"
label={formCopy.phoneLabel}
placeholder={formCopy.phonePlaceholder}
register={register("phone")}
/>
<RoleSelect
register={register("role")}
roleLabel={formCopy.roleLabel}
roleLabels={roleLabels}
/>
{showPassword && (
<UserTextInput
error={errors.password?.message}
id="password"
label={formCopy.passwordLabel}
placeholder={formCopy.passwordPlaceholder}
register={register("password")}
type="password"
/>
)}
<SubmitButton
copy={submitButtonCopy}
isSubmitting={isSubmitting}
isSubmitSuccessful={isSubmitSuccessful}
>
{formCopy.createSubmit}
</SubmitButton>
</form>
)
}
function UserTextInput({
error,
id,
label,
placeholder,
register,
type = "text",
}: {
error?: string
id: string
label: string
placeholder: string
register: UseFormRegisterReturn
type?: string
}) {
return (
<div className="flex flex-col gap-2">
<label htmlFor={id} className="mb-2 block text-lg">
{label}
</label>
<input
type={type}
id={id}
placeholder={placeholder}
{...register}
className={`w-full rounded-lg border px-4 py-2 ${error ? "border-error" : ""}`}
/>
{error && <p className="text-error">{error}</p>}
</div>
)
}
function RoleSelect({
register,
roleLabel,
roleLabels,
}: {
register: UseFormRegisterReturn
roleLabel: string
roleLabels: UserRoleCopy
}) {
return (
<div className="flex flex-col gap-2">
<label htmlFor="role" className="mb-2 block text-lg">
{roleLabel}
</label>
<select
id="role"
{...register}
className="w-full rounded-lg border px-4 py-2"
>
<option value="ADMIN">{roleLabels.ADMIN}</option>
<option value="MANAGER">{roleLabels.MANAGER}</option>
<option value="STAFF">{roleLabels.STAFF}</option>
<option value="VIEWER">{roleLabels.VIEWER}</option>
<option value="NO_USER">{roleLabels.NO_USER}</option>
</select>
</div>
)
}
function DepartmentSelect({
error,
formCopy,
departmentCopy,
fallbackCopy,
register,
}: {
error?: string
formCopy: UserFormCopy
departmentCopy: PersonDepartmentCopy
fallbackCopy: PersonFallbackCopy
register: UseFormRegisterReturn
}) {
return (
<div className="flex flex-col gap-2">
<label htmlFor="department" className="mb-2 block text-lg">
{formCopy.departmentLabel}
</label>
<select
id="department"
{...register}
className={`w-full rounded-lg border px-4 py-2 ${error ? "border-error" : ""}`}
>
<option value="">{formCopy.departmentPlaceholder}</option>
{Object.keys(PERSON_DEPARTMENTS).map((department) => (
<option key={department} value={department}>
{formatPersonDepartment(department, departmentCopy, fallbackCopy)}
</option>
))}
</select>
{error && <p className="text-error">{error}</p>}
</div>
)
}
src/app/(dashboard)/people/_components/user.copy.ts
+35
View File
@@ -0,0 +1,35 @@
import type { Dictionary } from "@/i18n/dictionaries"
export type UserFormCopy = Dictionary["admin"]["users"]["form"]
export type UserRoleCopy = Dictionary["admin"]["users"]["roles"]
export type UserStatusCopy = Dictionary["admin"]["users"]["status"]
export type UserFallbackCopy = Dictionary["admin"]["users"]["fallback"]
export type UserResetPasswordCopy =
Dictionary["admin"]["users"]["resetPassword"]
export type PersonDepartmentCopy =
Dictionary["inventory"]["people"]["departments"]
export type PersonFallbackCopy = Dictionary["inventory"]["people"]["fallback"]
export function formatUserRole(
role: string,
roleCopy: UserRoleCopy,
fallbackCopy: UserFallbackCopy,
): string {
return role in roleCopy
? roleCopy[role as keyof UserRoleCopy]
: fallbackCopy.unknownRole
}
export function formatPersonDepartment(
department: string | null | undefined,
departmentCopy: PersonDepartmentCopy,
fallbackCopy: PersonFallbackCopy,
): string {
if (!department) {
return fallbackCopy.unknownDepartment
}
return department in departmentCopy
? departmentCopy[department as keyof PersonDepartmentCopy]
: fallbackCopy.unknownDepartment
}
src/app/(dashboard)/people/layout.tsx
+13
View File
@@ -0,0 +1,13 @@
import type { ReactNode } from "react"
import { requireRole } from "@/services/auth.service"
export default async function PeopleLayout({
children,
}: {
children: ReactNode
}) {
await requireRole("ADMIN")
return children
}
src/app/(dashboard)/people/new/page.tsx
+22 -3
View File
@@ -1,5 +1,24 @@
import { redirect } from "next/navigation"
import { getI18n } from "@/i18n/server"
export default function NewPersonPage() {
redirect("/admin/users/new")
import NewPersonForm from "../_components/new.person.form"
export default async function NewUserPage() {
const { dictionary } = await getI18n()
const copy = dictionary.admin.users
return (
<div className="flex flex-col gap-4">
<div className="flex items-center justify-between gap-4">
<h1 className="text-2xl font-bold">{copy.new.title}</h1>
</div>
<NewPersonForm
formCopy={copy.form}
schemaCopy={{ ...copy.schema, ...dictionary.inventory.people.schema }}
roleLabels={copy.roles}
departmentCopy={dictionary.inventory.people.departments}
fallbackCopy={dictionary.inventory.people.fallback}
submitButtonCopy={dictionary.common.submitButton}
/>
</div>
)
}
src/components/layout/addMenu.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ const items: { key: keyof AddMenuCopy; href: string }[] = [
},
{
key: "person",
href: "/admin/users/new",
href: "/people/new",
},
{
key: "assignment",
src/i18n/dictionaries/en.ts
+1 -1
View File
@@ -445,7 +445,7 @@ export const en = {
},
},
new: {
title: "New User",
title: "New Person",
},
edit: {
title: "Edit User",
src/i18n/dictionaries/es.ts
+1 -1
View File
@@ -450,7 +450,7 @@ export const es = {
},
},
new: {
title: "Nuevo usuario",
title: "Nueva persona",
},
edit: {
title: "Editar usuario",
tests/unit/app/people/person-form-pages.test.ts
-10
View File
@@ -44,16 +44,6 @@ describe("person pages", () => {
mocks.getI18n.mockResolvedValue({ dictionary: es, locale: "es" })
})
it("redirects /people/new to /admin/users/new", async () => {
const { default: NewPersonPage } = await import(
"@/app/(dashboard)/people/new/page"
)
await NewPersonPage()
expect(mocks.redirect).toHaveBeenCalledWith("/admin/users/new")
})
it("renders the edit person page with Person heading and no username", async () => {
const { default: PersonEditPage } = await import(
"@/app/(dashboard)/people/[personId]/edit/page"
tests/unit/app/users/unified-form-pages.test.ts
+4 -4
View File
@@ -47,7 +47,7 @@ describe("unified creation form page", () => {
it("renders unified form with Person fields, email, password, role, and NO_USER option in Spanish", async () => {
const { default: NewUserPage } = await import(
"@/app/(dashboard)/admin/users/new/page"
"@/app/(dashboard)/people/new/page"
)
const html = renderToStaticMarkup(await NewUserPage())
@@ -78,7 +78,7 @@ describe("unified creation form page", () => {
mocks.getI18n.mockResolvedValue({ dictionary: en, locale: "en" })
const { default: NewUserPage } = await import(
"@/app/(dashboard)/admin/users/new/page"
"@/app/(dashboard)/people/new/page"
)
const html = renderToStaticMarkup(await NewUserPage())
@@ -100,7 +100,7 @@ describe("unified creation form page", () => {
it("renders Person field placeholders from the unified form dictionary", async () => {
const { default: NewUserPage } = await import(
"@/app/(dashboard)/admin/users/new/page"
"@/app/(dashboard)/people/new/page"
)
const html = renderToStaticMarkup(await NewUserPage())
@@ -114,7 +114,7 @@ describe("unified creation form page", () => {
it("renders department select with all PERSON_DEPARTMENTS values", async () => {
const { default: NewUserPage } = await import(
"@/app/(dashboard)/admin/users/new/page"
"@/app/(dashboard)/people/new/page"
)
const html = renderToStaticMarkup(await NewUserPage())
tests/unit/app/users/user-form-pages.test.ts
+5 -5
View File
@@ -60,13 +60,13 @@ describe("new user form localization", () => {
it("renders new user page with localized title and unified form labels in Spanish", async () => {
const { default: NewUserPage } = await import(
"@/app/(dashboard)/admin/users/new/page"
"@/app/(dashboard)/people/new/page"
)
const html = renderToStaticMarkup(await NewUserPage())
// Title
expect(html).toContain("Nuevo usuario")
expect(html).toContain("Nueva persona")
// Person field labels
expect(html).toContain("Nombre")
@@ -94,12 +94,12 @@ describe("new user form localization", () => {
mocks.getI18n.mockResolvedValue({ dictionary: en, locale: "en" })
const { default: NewUserPage } = await import(
"@/app/(dashboard)/admin/users/new/page"
"@/app/(dashboard)/people/new/page"
)
const html = renderToStaticMarkup(await NewUserPage())
expect(html).toContain("New User")
expect(html).toContain("New Person")
// Person fields
expect(html).toContain("First Name")
@@ -122,7 +122,7 @@ describe("new user form localization", () => {
it("keeps canonical role values in option value attributes including NO_USER, not localized labels", async () => {
const { default: NewUserPage } = await import(
"@/app/(dashboard)/admin/users/new/page"
"@/app/(dashboard)/people/new/page"
)
const html = renderToStaticMarkup(await NewUserPage())
tests/unit/i18n/admin-users-dictionary.test.ts
+2 -2
View File
@@ -22,7 +22,7 @@ describe("admin users dictionary", () => {
},
})
expect(users.new).toEqual({ title: "New User" })
expect(users.new).toEqual({ title: "New Person" })
expect(users.edit).toEqual({ title: "Edit User" })
expect(users.form).toEqual({
@@ -114,7 +114,7 @@ describe("admin users dictionary", () => {
},
})
expect(users.new).toEqual({ title: "Nuevo usuario" })
expect(users.new).toEqual({ title: "Nueva persona" })
expect(users.edit).toEqual({ title: "Editar usuario" })
expect(users.form).toEqual({