feat: unify Person and User creation form with conditional password

src/app/(dashboard)/admin/users/_components/new.user.form.tsx

@@ -6,38 +6,53 @@ import { useMemo } from "react"
 import type { UseFormRegisterReturn } from "react-hook-form"
 import { useForm } from "react-hook-form"
 import { toast } from "sonner"
-import { createUserAction } from "@/actions/user.actions"
+import { createPersonUserAction } from "@/actions/person.actions"
 import {
   SubmitButton,
   type SubmitButtonCopy,
 } from "@/components/forms/submitButton"
+import { PERSON_DEPARTMENTS } from "@/lib/constants"
 import {
-  buildCreateUserSchema,
-  type CreateUserFormType,
-  type UserSchemaCopy,
+  buildUnifiedCreateSchema,
+  type UnifiedCreateFormType,
+  type UnifiedSchemaCopy,
 } from "@/schemas/user.schema"
 
-import type { UserFormCopy, UserRoleCopy } from "./user.copy"
+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: UserSchemaCopy
+  schemaCopy: UnifiedSchemaCopy
   roleLabels: UserRoleCopy
+  departmentCopy: PersonDepartmentCopy
+  fallbackCopy: PersonFallbackCopy
   submitButtonCopy: SubmitButtonCopy
 }) {
   const router = useRouter()
-  const schema = useMemo(() => buildCreateUserSchema(schemaCopy), [schemaCopy])
+  const schema = useMemo(
+    () => buildUnifiedCreateSchema(schemaCopy),
+    [schemaCopy],
+  )
   const {
     register,
     handleSubmit,
+    watch,
     setError,
     formState: { errors, isSubmitting, isSubmitSuccessful },
-  } = useForm<CreateUserFormType>({
+  } = useForm<UnifiedCreateFormType>({
     resolver: zodResolver(schema),
     defaultValues: {
       role: "STAFF",
@@ -45,13 +60,16 @@ export default function NewUserForm({
     },
   })
 
-  const onSubmit = async (formData: CreateUserFormType) => {
-    const response = await createUserAction(formData)
+  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 CreateUserFormType, {
+          setError(fieldName as keyof UnifiedCreateFormType, {
             type: "server",
             message,
           })
@@ -70,11 +88,25 @@ export default function NewUserForm({
   return (
     <form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)}>
       <UserTextInput
-        error={errors.name?.message}
-        id="name"
-        label={formCopy.nameLabel}
-        placeholder={formCopy.namePlaceholder}
-        register={register("name")}
+        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}
@@ -85,18 +117,27 @@ export default function NewUserForm({
         type="email"
       />
       <UserTextInput
-        error={errors.password?.message}
-        id="password"
-        label={formCopy.passwordLabel}
-        placeholder={formCopy.passwordPlaceholder}
-        register={register("password")}
-        type="password"
+        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}
@@ -163,7 +204,43 @@ function RoleSelect({
         <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)/admin/users/_components/user.copy.ts

@@ -6,6 +6,9 @@ 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,
@@ -16,3 +19,17 @@ export function formatUserRole(
     ? 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)/admin/users/new/page.tsx

@@ -13,8 +13,10 @@ export default async function NewUserPage() {
       </div>
       <NewUserForm
         formCopy={copy.form}
-        schemaCopy={copy.schema}
+        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/app/(dashboard)/people/new/page.tsx

@@ -1,24 +1,5 @@
-import { getI18n } from "@/i18n/server"
+import { redirect } from "next/navigation"
 
-import PersonForm from "../_components/person.form"
-
-export default async function NewPersonPage() {
-  const { dictionary } = await getI18n()
-  const copy = dictionary.inventory.people
-
-  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>
-      <PersonForm
-        mode="create"
-        formCopy={copy.form}
-        schemaCopy={copy.schema}
-        departmentCopy={copy.departments}
-        fallbackCopy={copy.fallback}
-        submitButtonCopy={dictionary.common.submitButton}
-      />
-    </div>
-  )
+export default function NewPersonPage() {
+  redirect("/admin/users/new")
 }