ignore folder

components/user/RoleUpdateForm.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useState } from "react";
+import { useLocaleStore } from "@/store/uiStore";
+import { t } from "@/lib/locale";
+
+export default function UserRoleUpdateForm({
+  disabled,
+  onSubmit
+}: {
+  disabled: boolean;
+  onSubmit: (payload: { username: string; roleCodes: string[] }) => Promise<void>;
+}) {
+  const locale = useLocaleStore((s) => s.locale);
+  const [username, setUsername] = useState("");
+  const [roles, setRoles] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const submit = async () => {
+    if (disabled || !username) return;
+    setLoading(true);
+    try {
+      await onSubmit({
+        username,
+        roleCodes: roles
+          .split(",")
+          .map((role) => role.trim())
+          .filter(Boolean)
+      });
+      setUsername("");
+      setRoles("");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="vstack gap-2">
+      <input
+        className="form-control"
+        value={username}
+        onChange={(e) => setUsername(e.target.value)}
+        placeholder={t("username", locale)}
+        disabled={disabled}
+      />
+      <input
+        className="form-control"
+        value={roles}
+        onChange={(e) => setRoles(e.target.value)}
+        placeholder="Role codes (comma separated)"
+        disabled={disabled}
+      />
+      <button className="btn btn-outline-primary" onClick={submit} disabled={disabled || loading} type="button">
+        {loading ? t("submitting", locale) : t("update", locale)}
+      </button>
+    </div>
+  );
+}