add monitoring action button for tanstak-table

src/app/ui/icons/icons.tsx

@@ -181,4 +181,10 @@ export function IconDiscet() {
 			<g fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 19V5a2 2 0 0 1 2-2h11.172a2 2 0 0 1 1.414.586l2.828 2.828A2 2 0 0 1 21 7.828V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" /><path d="M8.6 9h6.8a.6.6 0 0 0 .6-.6V3.6a.6.6 0 0 0-.6-.6H8.6a.6.6 0 0 0-.6.6v4.8a.6.6 0 0 0 .6.6ZM6 13.6V21h12v-7.4a.6.6 0 0 0-.6-.6H6.6a.6.6 0 0 0-.6.6Z" /></g>
 		</svg>
 	)
+}
+
+export function IconInfo() {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M11 17h2v-6h-2zm1.713-8.287Q13 8.425 13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9t.713-.288M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8" /></svg>
+	)
 }

src/app/ui/modal-windows/file-monitoring-modal-window.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { useEffect, useState } from 'react';
+
+export function FileMonitoringModalWindow({ file, setWindowClose, setWindowChildren }: any) {
+	const [status, setStatus] = useState('null');
+
+	function closeHandler() {
+		setWindowChildren(null);
+		setWindowClose(false);
+	}
+
+	useEffect(() => {
+		console.log(file);
+	}, [file])
+
+	return (
+		<div
+			className="monitoring-wrapper"
+		>
+			<h3 className="monitoring-title">
+				Выберете интервал мониторинга<br />
+				для файла - {file.fileName}
+			</h3>
+			<p className="monitoring-status">
+				Текущий статус мониторинга - {status}
+			</p>
+			<ul
+				className="monitoring-actions"
+			>
+				<li>
+					<button
+						className="btn btn-primary"
+						onClick={() => {
+							closeHandler()
+						}}
+					>
+						Без мониторинга
+					</button>
+				</li>
+				<li>
+					<button
+						className="btn btn-primary"
+						onClick={() => {
+							closeHandler()
+						}}
+					>
+						Каждый день
+					</button>
+				</li>
+				<li>
+					<button
+						className="btn btn-primary"
+						onClick={() => {
+							closeHandler()
+						}}
+					>
+						Каждую неделю
+					</button>
+				</li>
+				<li>
+					<button
+						className="btn btn-primary"
+						onClick={() => {
+							closeHandler()
+						}}
+					>
+						Каждый месяц
+					</button>
+				</li>
+			</ul>
+		</div>
+	)
+}

src/app/ui/payment/payment-tab-tariffs.tsx

@@ -27,10 +27,11 @@ export default function PaymentTabTariffs() {
 		value: number;
 		tariff: string;
 		tokens: number;
+		tariffId: number
 	} | null>(null);
 	const [isProcessing, setIsProcessing] = useState<boolean>(false);
 
-	async function createPayment(value: number, tariff: string) {
+	async function createPayment(value: number, tariff: number) {
 		if (isProcessing) return;
 
 		setIsProcessing(true);
@@ -48,8 +49,8 @@ export default function PaymentTabTariffs() {
 		}
 	}
 
-	function openPaymentWindow(value: number, tariff: string, tokens: number) {
-		setSelectedTariff({ value, tariff, tokens });
+	function openPaymentWindow(value: number, tariff: string, tokens: number, tariffId: number) {
+		setSelectedTariff({ value, tariff, tokens, tariffId });
 		setIsProcessing(false);
 		setOpenWindow(true);
 	}
@@ -64,7 +65,7 @@ export default function PaymentTabTariffs() {
 		if (!selectedTariff) return null;
 
 		const handleConfirm = () => {
-			createPayment(selectedTariff.value, selectedTariff.tariff);
+			createPayment(selectedTariff.value, selectedTariff.tariffId);
 		};
 
 		const handleCancel = () => {
@@ -170,7 +171,7 @@ export default function PaymentTabTariffs() {
 							<div className="flex justify-center">
 								<button
 									className="btn btn-primary"
-									onClick={() => openPaymentWindow(item.price, item.name, item.tokens)}
+									onClick={() => openPaymentWindow(item.price, item.name, item.tokens, item.id)}
 								>
 									Выбрать план
 								</button>