"use client"; import { type ReactNode, useState, type FormEvent } from "react"; import type { UserViewModel, RoleViewModel } from "@/types/view-models"; import { Button, Input, Select } from "./ui"; import { t } from "@/lib/i18n"; interface UserFormModalProps { open: boolean; user: UserViewModel | null; roles: RoleViewModel[]; onSubmit: (data: UserFormData) => Promise; onCancel: () => void; } export interface UserFormData { email: string; name: string; password?: string; roleIds: string[]; dataScope: string; organizationId?: string; } export function UserFormModal({ open, user, roles, onSubmit, onCancel, }: UserFormModalProps): ReactNode { const [email, setEmail] = useState(user?.email ?? ""); const [name, setName] = useState(user?.name ?? ""); const [password, setPassword] = useState(""); const [roleIds, setRoleIds] = useState( user?.roles.map((r) => r.id) ?? [], ); const [dataScope, setDataScope] = useState( user?.dataScope ?? "SCHOOL", ); const [loading, setLoading] = useState(false); if (!open) return null; const isEdit = user !== null; const handleSubmit = async (e: FormEvent) => { e.preventDefault(); setLoading(true); try { await onSubmit({ email, name, password: isEdit ? undefined : password, roleIds, dataScope, }); } finally { setLoading(false); } }; const toggleRole = (id: string) => { setRoleIds((prev) => prev.includes(id) ? prev.filter((r) => r !== id) : [...prev, id], ); }; return ( ); }