add dropdown monitoring

src/app/components/tanstak-table/MonitoringDropDown.tsx

@@ -0,0 +1,154 @@
+'use client'
+
+import { FileItem } from '@/app/components/tanstak-table/TanstakTable';
+import { useEffect, useState, useRef } from 'react';
+import { useClickOutside } from '@/app/hooks/useClickOutside';
+import { useTranslations } from 'next-intl';
+import { useQueryClient } from '@tanstack/react-query';
+import { createPortal } from 'react-dom';
+
+export function MonitoringDropDown({ file }: {
+	file: FileItem
+}) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [currentMonitoringStatus, setCurrentMonitoringStatus] = useState('without-monitoring');
+	const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
+
+	const dropdownRef = useRef<HTMLDivElement>(null);
+	const buttonRef = useRef<HTMLButtonElement>(null);
+
+	const t = useTranslations('Global')
+	const queryClient = useQueryClient();
+
+	useEffect(() => {
+		if (!isOpen) return;
+
+		const handleClick = (event: MouseEvent) => {
+			console.log('click');
+			if (!dropdownRef?.current) {
+				return;
+			}
+
+			if (!buttonRef?.current) {
+				return;
+			}
+
+			if (buttonRef?.current.contains(event.target as Node)) {
+				return;
+			}
+
+			if (!dropdownRef.current.contains(event.target as Node)) {
+				setIsOpen(false);
+			}
+		};
+
+		document.addEventListener('mousedown', handleClick);
+		return () => {
+			document.removeEventListener('mousedown', handleClick);
+		};
+	}, [dropdownRef, setIsOpen, isOpen]);
+
+	useEffect(() => {
+		console.log(file);
+		if (file.status) {
+			setCurrentMonitoringStatus(file.status === 'ACTIVE' ? 'without-monitoring' : 'without-monitoring');
+		}
+	}, [file]);
+
+	useEffect(() => {
+		if (isOpen && buttonRef.current) {
+			const rect = buttonRef.current.getBoundingClientRect();
+			setDropdownPosition({
+				top: rect.bottom + window.scrollY,
+				left: rect.left + window.scrollX,
+				width: rect.width
+			});
+		}
+	}, [isOpen]);
+
+	async function clickHandler(monitoring: string) {
+		console.log('click', file.id);
+		setCurrentMonitoringStatus(monitoring);
+		await queryClient.invalidateQueries({ queryKey: ['userFilesData'] });
+		setIsOpen(false);
+	}
+
+	return (
+		<div className="dropdown-wrapper monitoring-dropdown">
+			<button
+				ref={buttonRef}
+				onClick={() => {
+					setIsOpen(!isOpen);
+				}}
+				className="dropdown-button"
+			>
+				<span className="flex items-center">
+					<span className="mr-2">
+						{t(currentMonitoringStatus)}
+					</span>
+				</span>
+				<svg
+					className={`w-5 h-5 ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+				>
+					<path
+						fillRule="evenodd"
+						d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+						clipRule="evenodd"
+					/>
+				</svg>
+			</button>
+			{isOpen && createPortal(
+				<div
+					className="dropdown-list-portal"
+					ref={dropdownRef}
+					style={{
+						position: 'absolute',
+						top: dropdownPosition.top,
+						left: dropdownPosition.left,
+						width: dropdownPosition.width,
+						zIndex: 99999
+					}}
+				>
+					<ul className="dropdown-list" role="listbox">
+						<li
+							className={`dropdown-item ${currentMonitoringStatus === 'without-monitoring' ? 'current' : ''}`}
+							onClick={() => {
+								clickHandler('without-monitoring')
+							}}
+						>
+							{t('without-monitoring')}
+						</li>
+						<li
+							className={`dropdown-item ${currentMonitoringStatus === 'every-day' ? 'current' : ''}`}
+							onClick={() => {
+								clickHandler('every-day')
+							}}
+						>
+							{t('every-day')}
+						</li>
+						<li
+							className={`dropdown-item ${currentMonitoringStatus === 'every-week' ? 'current' : ''}`}
+							onClick={() => {
+								clickHandler('every-week')
+							}}
+						>
+							{t('every-week')}
+						</li>
+						<li
+							className={`dropdown-item ${currentMonitoringStatus === 'every-month' ? 'current' : ''}`}
+							onClick={() => {
+								clickHandler('every-month')
+							}}
+						>
+							{t('every-month')}
+						</li>
+					</ul>
+				</div>,
+				document.body
+			)}
+		</div>
+	)
+}

src/app/components/tanstak-table/TanstakTable.tsx

@@ -24,10 +24,11 @@ import { FileInfoModalWindow } from '@/app/ui/modal-windows/file-info-modal-wind
 import { FileMonitoringModalWindow } from '@/app/ui/modal-windows/file-monitoring-modal-window';
 import { FileTypeIcon } from '@/app/components/FileTypeIcon';
 import { fetchReferralUserStats } from '@/app/actions/referralsActions';
+import { MonitoringDropDown } from '@/app/components/tanstak-table/MonitoringDropDown';
 
 type FileType = 'image' | 'video' | 'audio';
 
-type FileItem = {
+export type FileItem = {
 	id: string;
 	fileName: string;
 	fileType: string;
@@ -379,7 +380,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				header: ({ column }) => (
 					<div className="column">
 						<span>
-							{t('status')}
+							{t('monitoring-status')}
 						</span>
 						<button
 							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
@@ -404,47 +405,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				cell: ({ row }) => {
 					return (
 						<div className="text-center font-semibold table-item">
-							<span className="table-item-status">
+							<MonitoringDropDown file={row.original} />
-								{row.original.status}
-							</span>
-							{/* <DropDownList
-								value={typeFilter}
-								translatedValue={
-									(() => {
-										switch (typeFilter) {
-											case 'image':
-												return t('images')
-											case 'video':
-												return t('videos')
-											case 'audio':
-												return t('audios')
-											case 'document':
-												return t('documents')
-											default:
-												return t('all-types')
-										}
-									})()
-								}
-								callBack={setTypeFilter}
-							>
-								<li value="all">
-									{t('all-types')}
-								</li>
-								<li value="image">
-									{t('images-few')}
-								</li>
-								<li value="video">
-									{t('videos')}
-								</li>
-								<li value="audio">
-									{t('audios')}
-								</li>
-								{!referralLink && (
-									<li value="document">
-										{t('documents')}
-									</li>
-								)}
-							</DropDownList> */}
 						</div>
 					)
 				},
@@ -461,13 +422,13 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				cell: ({ row }) => (
 					<div className="actions">
 						<div className="actions-group">
-							<button
+{/* 							<button
 								onClick={() => handleMonitoring(row.original)}
 								className="bg-violet-500 hover:bg-violet-600"
 								title={t('monitoring')}
 							>
 								<IconEye />
-							</button>
+							</button> */}
 							{/* <button
 								onClick={() => handleOpenWindowForRemove(row.original)}
 								className="table-action-delete"

src/app/styles/global-styles.scss

@@ -552,10 +552,72 @@
 	}
 }
 
+.dropdown-list-portal {
+	.dropdown-list {
+		width: 100%;
+		margin-top: 4px;
+		background-color: #ffffff;
+		border: 2px solid #e2e8f0;
+		border-radius: 12px;
+		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+	}
+
+	.dropdown-item {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		padding: 8px 16px;
+		font-size: 12px;
+		text-align: left;
+		cursor: pointer;
+		user-select: none;
+
+		&:hover {
+			background-color: #dbeafe;
+		}
+
+		&.current {
+			font-weight: 700;
+		}
+	}
+}
+
 .dropdown-wrapper {
 	position: relative;
 	width: 100%;
 
+	&.monitoring-dropdown {
+		max-width: 184px;
+		margin: 0 auto;
+
+		.dropdown-button {
+			font-size: 12px;
+		}
+
+		.dropdown-list {
+			position: absolute;
+			left: 0;
+			right: auto;
+			z-index: 9999;
+			width: 100%;
+			margin-top: 4px;
+
+			transform-origin: top left;
+
+			background-color: #ffffff;
+			border: 2px solid #e2e8f0;
+			border-radius: 12px;
+
+			box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+				0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+			&:focus {
+				outline: none;
+			}
+		}
+	}
+
 	.dropdown-button {
 		display: flex;
 		align-items: center;

src/i18n/messages/en.json

@@ -167,6 +167,7 @@
 		"failed-to-download-file": "Failed to download file",
 		"file-is-downloading": "The file is downloading",
 		"status": "status",
+		"monitoring-status": "Monitoring status",
 		"refferal-program": "Referral program",
 		"your-image": "Your images",
 		"your-videos": "Your videos",
@@ -229,7 +230,11 @@
 		"convert-to": "Convert to",
 		"do-not-convert": "Do not convert",
 		"payment-error": "Payment error",
-		"buy": "Buy"
+		"buy": "Buy",
+		"without-monitoring" : "Without monitoring",
+		"every-day": "Every day",
+		"every-week": "Every week",
+		"every-month": "Every day"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -167,6 +167,7 @@
 		"failed-to-download-file": "Не удалось скачать файл",
 		"file-is-downloading": "Скачивается файл",
 		"status": "статус",
+		"monitoring-status": "Статус мониторинга",
 		"refferal-program": "Реферальная программа",
 		"your-image": "Ваши изображения",
 		"your-videos": "Ваш видео",
@@ -229,7 +230,11 @@
 		"convert-to": "Конвертировать в",
 		"do-not-convert": "Не конвертировать",
 		"payment-error": "Ошибка оплаты",
-		"buy": "Купить"
+		"buy": "Купить",
+		"without-monitoring": "Без мониторинга",
+		"every-day": "Каждый день",
+		"every-week": "Каждую неделю",
+		"every-month": "Каждый месяц"
 	},
 	"Login-register-form": {
 		"and": "и",