add remove and add tariff modal windows

src/app/ui/tariff-management/TariffDeleteModal.tsx

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { removeTariffs } from '@/app/actions/tariffActions';
+import { toast } from 'sonner';
+
+interface TariffDeleteModalProps {
+	tariffId: number;
+	tariffName: string;
+	onClose: () => void;
+	onSuccess: () => void;
+}
+
+export function TariffDeleteModal({ tariffId, tariffName, onClose, onSuccess }: TariffDeleteModalProps) {
+	const [isConfirmText, setIsConfirmText] = useState('');
+	const confirmText = 'УДАЛИТЬ';
+
+	const deleteTariffMutation = useMutation({
+		mutationFn: async () => {
+			return await removeTariffs(tariffId);
+		},
+		onSuccess: (data) => {
+			if (data !== null && data !== undefined) {
+				toast.success('Тариф успешно удален');
+				onSuccess();
+			} else {
+				toast.error('Не удалось удалить тариф');
+			}
+		},
+		onError: () => {
+			toast.error('Произошла ошибка при удалении тарифа');
+		},
+	});
+
+	const handleDelete = () => {
+		deleteTariffMutation.mutate();
+	};
+
+	const getDisplayName = (name: string) => {
+		if (name) {
+			return name.toUpperCase().replace(/_/g, ' ');
+		}
+		return `ID: ${tariffId}`;
+	};
+
+	return (
+		<div className="tariff-delete-modal">
+			<h2 className="tariff-delete-modal__title">Удаление тарифа</h2>
+
+			<div className="tariff-delete-modal__content">
+				<div className="tariff-delete-modal__warning">
+					<p className="warning-text">
+						Вы действительно хотите удалить тариф <strong>"{getDisplayName(tariffName)}"</strong>?
+					</p>
+				</div>
+
+				<div className="tariff-delete-modal__info">
+					<p>Это действие невозможно отменить.</p>
+				</div>
+
+				<div className="tariff-delete-modal__confirm">
+					<label className="confirm-label">
+						Для подтверждения введите <strong>{confirmText}</strong>
+					</label>
+					<input
+						type="text"
+						className="confirm-input"
+						value={isConfirmText}
+						onChange={(e) => setIsConfirmText(e.target.value)}
+						placeholder={`Введите "${confirmText}"`}
+					/>
+				</div>
+
+				<div className="tariff-delete-modal__actions">
+					<button
+						onClick={onClose}
+						className="btn btn-secondary"
+						disabled={deleteTariffMutation.isPending}
+					>
+						Отмена
+					</button>
+					<button
+						onClick={handleDelete}
+						className="btn btn-danger"
+						disabled={isConfirmText !== confirmText || deleteTariffMutation.isPending}
+					>
+						{deleteTariffMutation.isPending ? 'Удаление...' : 'Удалить'}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}