add permisson for create admin block

src/app/ui/forms/create-staff-form.tsx

@@ -1,13 +1,12 @@
 'use client'
 
 import styles from '@/app/styles/module/login.module.scss'
-import { useActionState, useState, useRef, useEffect } from 'react';
+import { useActionState, useState, useEffect } from 'react';
 import { createStuff } from '@/app/actions/stuffActions';
 import { useTranslations } from 'next-intl';
 import { IconEye } from '@/app/ui/icons/icons';
 import { useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
-
 import { z } from 'zod';
 
 const createStuffSchema = z.object({
@@ -16,23 +15,93 @@ const createStuffSchema = z.object({
 		.max(100, 'full-name-too-long')
 		.trim(),
 	email: z.string()
-		.email('invalid-email')
+		.email('register-error-email-invalid')
 		.toLowerCase()
 		.trim(),
 	password: z.string()
-		.min(6, 'password-too-short')
-		.max(50, 'password-too-long'),
+		.min(4, 'register-error-password-min')
+		.max(124, 'register-error-password-max'),
+	changePassword: z.boolean().default(true),
+	permissions: z.object({
+		subscriptions: z.number().min(0).max(3),
+		mailings: z.number().min(0).max(3),
+		complaints: z.number().min(0).max(3),
+		agreements: z.number().min(0).max(3),
+		staff: z.number().min(0).max(3),
+		content_moderation: z.number().min(0).max(3),
+		users: z.number().min(0).max(3),
+		money: z.number().min(0).max(3),
+		kyc: z.number().min(0).max(3),
+		claims: z.number().min(0).max(3),
+		api: z.number().min(0).max(3),
+		dash: z.number().min(0).max(3),
+		tariffs: z.number().min(0).max(3),
+	}).default({
+		subscriptions: 0,
+		mailings: 0,
+		complaints: 0,
+		agreements: 0,
+		staff: 0,
+		content_moderation: 0,
+		users: 0,
+		money: 0,
+		kyc: 0,
+		claims: 0,
+		api: 0,
+		dash: 0,
+		tariffs: 0,
+	})
 })
 
-export default function CreateStaffForm({ onSuccess }: { onSuccess?: () => void }) {
+export function CreateStaffForm({ onSuccess }: { onSuccess?: () => void }) {
 	const [state, formAction, isPending] = useActionState(
 		createStuffAction,
 		undefined,
 	);
 	const t = useTranslations('Login-register-form');
-	const tStaff = useTranslations('Staff');
+	const tGeneral = useTranslations('Global');
+	const tPermissions = useTranslations('Permissions');
 
 	const [showPassword, setShowPassword] = useState(false);
+	const [changePassword, setChangePassword] = useState(true);
+	const [permissions, setPermissions] = useState({
+		subscriptions: 0,
+		mailings: 0,
+		complaints: 0,
+		agreements: 0,
+		staff: 0,
+		content_moderation: 0,
+		users: 0,
+		money: 0,
+		kyc: 0,
+		claims: 0,
+		api: 0,
+		dash: 0,
+		tariffs: 0,
+	});
+
+	const permissionsConfig = [
+		{ key: 'subscriptions', label: tPermissions('subscriptions'), description: tPermissions('subscriptions-desc') },
+		{ key: 'mailings', label: tPermissions('mailings'), description: tPermissions('mailings-desc') },
+		{ key: 'complaints', label: tPermissions('complaints'), description: tPermissions('complaints-desc') },
+		{ key: 'agreements', label: tPermissions('agreements'), description: tPermissions('agreements-desc') },
+		{ key: 'staff', label: tPermissions('staff'), description: tPermissions('staff-desc') },
+		{ key: 'content_moderation', label: tPermissions('content_moderation'), description: tPermissions('content_moderation-desc') },
+		{ key: 'users', label: tPermissions('users'), description: tPermissions('users-desc') },
+		{ key: 'kyc', label: tPermissions('kyc'), description: tPermissions('kyc-desc') },
+		{ key: 'money', label: tPermissions('money'), description: tPermissions('money-desc') },
+		{ key: 'claims', label: tPermissions('claims'), description: tPermissions('claims-desc') },
+		{ key: 'api', label: tPermissions('api'), description: tPermissions('api-desc') },
+		{ key: 'dash', label: tPermissions('dash'), description: tPermissions('dash-desc') },
+		{ key: 'tariffs', label: tPermissions('tariffs'), description: tPermissions('tariffs-desc') },
+	];
+
+	const handlePermissionChange = (key: keyof typeof permissions, value: number) => {
+		setPermissions(prev => ({
+			...prev,
+			[key]: value
+		}));
+	};
 
 	function toggleShowPassword() {
 		setShowPassword(!showPassword);
@@ -42,7 +111,7 @@ export default function CreateStaffForm({ onSuccess }: { onSuccess?: () => void
 
 	useEffect(() => {
 		if (state?.success) {
-			toast.success(tStaff('staff-created-successfully'));
+			toast.success(tGeneral('staff-created-successfully'));
 			queryClient.invalidateQueries({ queryKey: ['stuffList'] });
 			if (onSuccess) {
 				onSuccess();
@@ -51,109 +120,182 @@ export default function CreateStaffForm({ onSuccess }: { onSuccess?: () => void
 		if (state?.error?.server) {
 			toast.error(t(state.error.server));
 		}
-	}, [state, queryClient, onSuccess, t, tStaff]);
+	}, [state, queryClient, onSuccess, t, tGeneral]);
 
 	return (
-		<form
-			className={`${styles['form-wrapper']}`}
-			action={formAction}
-			autoComplete="off"
+		<div
+			className="create-staff-window"
 		>
-			{/* Поле Email */}
-			<div className={`${styles['form-group']}`}>
-				<label className={`${styles['form-label']}`}>
-					{t('email-adress')}
-				</label>
-				<input
-					type="email"
-					id="email"
-					name="email"
-					className={`${styles['form-input']}`}
-					placeholder={t('enter-email')}
-					defaultValue={state?.previousState?.email || ''}
-					autoComplete="off"
-					onChange={(e) => {
-						e.target.value = e.target.value.toLowerCase();
-					}}
-				/>
-				{state?.error?.email && (
-					<p className={`${styles['form-error']}`}>
-						{t(state?.error?.email)}
-					</p>
-				)}
-			</div>
-
-			{/* Поле Password */}
-			<div className={`${styles['form-group']}`}>
-				<label className={`${styles['form-label']}`}>
-					{t('password')}
-				</label>
-				<div className={`${styles['password-wrapper']}`}>
-					<input
-						type={showPassword ? "text" : "password"}
-						id="password"
-						name="password"
-						className={`${styles['form-input']} ${styles['password']}`}
-						placeholder={t('enter-password')}
-						autoComplete="new-password"
-					/>
-					<button
-						onClick={toggleShowPassword}
-						type="button"
-						className={`show-password-button ${showPassword ? 'show' : ''}`}
-					>
-						<IconEye />
-					</button>
-				</div>
-				{state?.error?.password && (
-					<p className={`${styles['form-error']}`}>
-						{t(state?.error?.password)}
-					</p>
-				)}
-			</div>
-
-			{/* Поле Full Name */}
-			<div className={`${styles['form-group']}`}>
-				<label className={`${styles['form-label']}`}>
-					{tStaff('full-name')}
-				</label>
-				<input
-					type="text"
-					id="fullName"
-					name="fullName"
-					className={`${styles['form-input']}`}
-					placeholder={tStaff('enter-full-name')}
-					defaultValue={state?.previousState?.fullName || ''}
-					autoComplete="off"
-				/>
-				{state?.error?.fullName && (
-					<p className={`${styles['form-error']}`}>
-						{t(state?.error?.fullName)}
-					</p>
-				)}
-			</div>
-
-			{/* Общая ошибка сервера */}
-			{state?.error?.server && !state.success && (
-				<p className={`${styles['form-error']}`}>
-					{t(state?.error?.server)}
-				</p>
-			)}
-
-			{/* Кнопка отправки */}
-			<button
-				type="submit"
-				className={`${styles['btn']}`}
-				disabled={isPending}
+			<form
+				className={`${styles['']}`}
+				action={formAction}
+				autoComplete="off"
 			>
-				{tStaff('create-staff')}
-				{isPending && (
-					<div className="loading-animation">
-						<div className="global-spinner"></div>
+				{/* Поле Email */}
+				<div className={`${styles['form-group']}`}>
+					<label className={`${styles['form-label']}`}>
+						{t('email-adress')}
+					</label>
+					<input
+						type="email"
+						id="email"
+						name="email"
+						className={`${styles['form-input']}`}
+						placeholder={t('enter-email')}
+						defaultValue={state?.previousState?.email || ''}
+						autoComplete="off"
+						onChange={(e) => {
+							e.target.value = e.target.value.toLowerCase();
+						}}
+					/>
+					{state?.error?.email && (
+						<p className={`${styles['form-error']}`}>
+							{t(state?.error?.email)}
+						</p>
+					)}
+				</div>
+
+				{/* Поле Password */}
+				<div className={`${styles['form-group']}`}>
+					<label className={`${styles['form-label']}`}>
+						{t('password')}
+					</label>
+					<div className={`${styles['password-wrapper']}`}>
+						<input
+							type={showPassword ? "text" : "password"}
+							id="password"
+							name="password"
+							className={`${styles['form-input']} ${styles['password']}`}
+							placeholder={t('enter-password')}
+							autoComplete="new-password"
+						/>
+						<button
+							onClick={toggleShowPassword}
+							type="button"
+							className={`show-password-button ${showPassword ? 'show' : ''}`}
+						>
+							<IconEye />
+						</button>
 					</div>
+					{state?.error?.password && (
+						<p className={`${styles['form-error']}`}>
+							{t(state?.error?.password)}
+						</p>
+					)}
+				</div>
+
+				{/* Поле Full Name */}
+				<div className={`${styles['form-group']}`}>
+					<label className={`${styles['form-label']}`}>
+						{tGeneral('full-name')}
+					</label>
+					<input
+						type="text"
+						id="fullName"
+						name="fullName"
+						className={`${styles['form-input']}`}
+						placeholder={tGeneral('enter-full-name')}
+						defaultValue={state?.previousState?.fullName || ''}
+						autoComplete="off"
+					/>
+					{state?.error?.fullName && (
+						<p className={`${styles['form-error']}`}>
+							{t(state?.error?.fullName)}
+						</p>
+					)}
+				</div>
+
+				{/* Чекбокс */}
+				<div className={`${styles['form-group']}`}>
+					<label className={`${styles['form-label']} ${styles['checkbox-label']}`}>
+						<span>{tGeneral('require-password-change')}</span>
+						<input
+							type="checkbox"
+							name="changePassword"
+							checked={changePassword}
+							onChange={(e) => setChangePassword(e.target.checked)}
+							disabled={isPending}
+						/>
+					</label>
+				</div>
+
+				<div className="permissions-section">
+					<h3 className="permissions-section-title">
+						{tGeneral('permissions')}
+					</h3>
+
+					<div className="permissions-list">
+						{permissionsConfig.map((perm) => {
+							const currentValue = permissions[perm.key as keyof typeof permissions];
+
+							return (
+								<div key={perm.key} className="permission-item">
+									<div className="permission-header">
+										<div className="permission-info">
+											<h4 className="permission-title">{perm.label}</h4>
+											<p className="permission-description">{perm.description}</p>
+										</div>
+										<div className="permission-controls">
+											<div className="permission-level-buttons">
+												<input type="hidden" name={`permissions.${perm.key}`} value={currentValue} />
+												<button
+													type="button"
+													onClick={() => handlePermissionChange(perm.key as keyof typeof permissions, 0)}
+													className={`permission-level-btn ${currentValue === 0 ? 'active no-access' : ''}`}
+													title={tPermissions('no-access')}
+													disabled={isPending}
+												>
+													<span className="btn-text">{tPermissions('no-access')}</span>
+												</button>
+
+												<button
+													type="button"
+													onClick={() => handlePermissionChange(perm.key as keyof typeof permissions, 1)}
+													className={`permission-level-btn ${currentValue === 1 ? 'active read-only' : ''}`}
+													title={tPermissions('read-only')}
+													disabled={isPending}
+												>
+													<span className="btn-text">{tPermissions('read-only')}</span>
+												</button>
+
+												<button
+													type="button"
+													onClick={() => handlePermissionChange(perm.key as keyof typeof permissions, 3)}
+													className={`permission-level-btn ${currentValue === 3 ? 'active full-access' : ''}`}
+													title={tPermissions('full-access')}
+													disabled={isPending}
+												>
+													<span className="btn-text">{tPermissions('full-access')}</span>
+												</button>
+											</div>
+										</div>
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				</div>
+
+				{state?.error?.server && !state.success && (
+					<p className={`${styles['form-error']}`}>
+						{t(state?.error?.server)}
+					</p>
 				)}
-			</button>
-		</form>
+
+				<button
+					type="submit"
+					className={`${styles['btn']}`}
+					disabled={isPending}
+				>
+					{tGeneral('create')}
+					{isPending && (
+						<div className="loading-animation">
+							<div className="global-spinner"></div>
+						</div>
+					)}
+				</button>
+			</form>
+		</div>
 	)
 }
 
@@ -172,11 +314,30 @@ async function createStuffAction(
 	const fullName = formData.get('fullName') as string || '';
 	const email = formData.get('email') as string || '';
 	const password = formData.get('password') as string || '';
+	const changePassword = formData.get('changePassword') === 'on';
+
+	const permissions = {
+		subscriptions: parseInt(formData.get('permissions.subscriptions') as string) || 0,
+		mailings: parseInt(formData.get('permissions.mailings') as string) || 0,
+		complaints: parseInt(formData.get('permissions.complaints') as string) || 0,
+		agreements: parseInt(formData.get('permissions.agreements') as string) || 0,
+		staff: parseInt(formData.get('permissions.staff') as string) || 0,
+		content_moderation: parseInt(formData.get('permissions.content_moderation') as string) || 0,
+		users: parseInt(formData.get('permissions.users') as string) || 0,
+		money: parseInt(formData.get('permissions.money') as string) || 0,
+		kyc: parseInt(formData.get('permissions.kyc') as string) || 0,
+		claims: parseInt(formData.get('permissions.claims') as string) || 0,
+		api: parseInt(formData.get('permissions.api') as string) || 0,
+		dash: parseInt(formData.get('permissions.dash') as string) || 0,
+		tariffs: parseInt(formData.get('permissions.tariffs') as string) || 0,
+	};
 
 	const validatedFields = createStuffSchema.safeParse({
 		fullName,
 		email,
-		password
+		password,
+		changePassword,
+		permissions
 	});
 
 	if (!validatedFields.success) {
@@ -205,10 +366,9 @@ async function createStuffAction(
 	}
 
 	try {
-		const { fullName, email, password } = validatedFields.data;
+		const { fullName, email, password, changePassword, permissions } = validatedFields.data;
 
-		// Вызов API для создания сотрудника
-		const result = await createStuff(fullName, email, password);
+		const result = await createStuff(fullName, email, password, permissions, changePassword);
 
 		if (result) {
 			return {
@@ -227,16 +387,12 @@ async function createStuffAction(
 	} catch (error) {
 		const errors: Record<string, string> = {}
 
-		switch (error) {
-			case 'email-already-exists':
-				errors['email'] = 'email-already-exists';
-				break;
-			case 'invalid-email':
-				errors['email'] = 'invalid-email';
-				break;
-			default:
-				errors['server'] = 'request-ended-with-an-error';
-				break;
+		if (error === 'email-already-exists') {
+			errors['email'] = 'email-already-exists';
+		} else if (error === 'invalid-email') {
+			errors['email'] = 'invalid-email';
+		} else {
+			errors['server'] = 'request-ended-with-an-error';
 		}
 
 		return {