add remove and add tariff modal windows

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

@@ -6,12 +6,17 @@ import { convertBytes } from '@/app/lib/convertBytes';
 import { IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft } from '@/app/ui/icons/icons';
 import ModalWindow from '@/app/components/modalWindow';
 import { useQueryClient } from '@tanstack/react-query';
-import { EditingTariff, TariffEditModal } from './TariffEditModal'
+import { EditingTariff, TariffEditModal } from './TariffEditModal';
+import { TariffCreateModal } from './TariffCreateModal';
+import { TariffDeleteModal } from './TariffDeleteModal';
 
 export default function TariffManagment() {
 	const [currentPage, setCurrentPage] = useState(0);
 	const [isModalOpen, setIsModalOpen] = useState(false);
+	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 	const [editingTariff, setEditingTariff] = useState<EditingTariff | null>(null);
+	const [deletingTariff, setDeletingTariff] = useState<{ id: number; name: string } | null>(null);
 
 	const { data: tariffData, isLoading, isError, isFetching, error } = useTariffsData(currentPage);
 	const queryClient = useQueryClient();
@@ -48,6 +53,14 @@ export default function TariffManagment() {
 		setIsModalOpen(true);
 	};
 
+	const handleDeleteClick = (tariff: any) => {
+		setDeletingTariff({
+			id: tariff.id,
+			name: tariff.name || tariff.type
+		});
+		setIsDeleteModalOpen(true);
+	};
+
 	const formatPrice = (price: number) => {
 		return new Intl.NumberFormat('ru-RU').format(price);
 	};
@@ -92,7 +105,10 @@ export default function TariffManagment() {
 			<div className="content-header">
 				<h3>Управление тарифными планами</h3>
 				<div className="content-header-actions">
-					<button className="btn btn-primary">
+					<button
+						className="btn btn-primary"
+						onClick={() => setIsCreateModalOpen(true)}
+					>
 						<span>➕</span>
 						<span>Создать тариф</span>
 					</button>
@@ -124,6 +140,12 @@ export default function TariffManagment() {
 								>
 									Редактировать
 								</button>
+								<button
+									className="btn btn-outline btn-sm btn-danger"
+									onClick={() => handleDeleteClick(tariff)}
+								>
+									Удалить
+								</button>
 							</div>
 						</div>
 					))}
@@ -205,12 +227,7 @@ export default function TariffManagment() {
 						</div>
 					</div>
 				)}
-
-				{isFetching && !isLoading && (
-					<div className="refetching-indicator">Обновление...</div>
-				)}
 			</div>
-
 			{/* Модальное окно редактирования тарифа */}
 			<ModalWindow state={isModalOpen} callBack={setIsModalOpen}>
 				{editingTariff && (
@@ -224,6 +241,31 @@ export default function TariffManagment() {
 					/>
 				)}
 			</ModalWindow>
+			{/* Модальное окно создания тарифа */}
+			<ModalWindow state={isCreateModalOpen} callBack={setIsCreateModalOpen}>
+				<TariffCreateModal
+					onClose={() => setIsCreateModalOpen(false)}
+					onSuccess={() => {
+						queryClient.invalidateQueries({ queryKey: ['tariffsData'] });
+						setIsCreateModalOpen(false);
+					}}
+				/>
+			</ModalWindow>
+			{/* Модальное окно удаления тарифа */}
+			<ModalWindow state={isDeleteModalOpen} callBack={setIsDeleteModalOpen}>
+				{deletingTariff && (
+					<TariffDeleteModal
+						tariffId={deletingTariff.id}
+						tariffName={deletingTariff.name}
+						onClose={() => setIsDeleteModalOpen(false)}
+						onSuccess={() => {
+							queryClient.invalidateQueries({ queryKey: ['tariffsData'] });
+							setIsDeleteModalOpen(false);
+							setDeletingTariff(null);
+						}}
+					/>
+				)}
+			</ModalWindow>
 		</div>
 	)
 }