add document view layout

src/app/[locale]/watch-doc/page.tsx

@@ -0,0 +1,135 @@
+'use server'
+
+import Link from 'next/link';
+
+interface PageProps {
+	searchParams: Promise<{ docid?: string }>;
+}
+
+export default async function Page({
+	searchParams
+}: PageProps) {
+	const { docid } = await searchParams;
+
+	return (
+		<div
+			className="watch-doc-wrapper"
+		>
+			<div
+				className="watch-doc-page"
+			>
+				<header className="watch-doc-header">
+					<Link href="#" className="header-logo">NoCopy</Link>
+					<Link href="#" className="header-user">Name</Link>
+				</header>
+
+				<div
+					className="watch-doc-status"
+				>
+					<div className="st-title">Защита подтверждена</div>
+					<div className="st-sub">Документ <strong>Название документа</strong> зарегистрирован и защищён платформой NoCopy.</div>
+				</div>
+
+				<div
+					className="watch-doc-grid"
+				>
+					<div>
+						<div
+							className="watch-doc-card"
+						>
+							<div
+								className="card-head"
+							>
+								Правообладатель
+							</div>
+
+							<div
+								className="card-body"
+							>
+								<div className="owner-row">
+									<div className="owner-av">N</div>
+									<div>
+										<div className="owner-name">Сидоров Станислав Андреевич</div>
+										<div className="owner-meta">ООО "ПРОКОНТРОЛ"</div>
+										<div className="owner-meta">Зарегистрирован в NoCopy</div>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div
+							className="watch-doc-card"
+						>
+							<div
+								className="card-head"
+							>
+								Скачать документ
+							</div>
+
+							<div
+								className="card-body"
+							>
+								<div className="download-description">
+									Вы вошли как <strong>Сидоров Станислав Андреевич</strong>.
+									<br />
+									Скачивание будет зарегистрировано.
+								</div>
+
+								<button className="btn btn-acc">
+									Скачать защищённый PDF
+								</button>
+							</div>
+						</div>
+
+						<div className="watch-doc-actions">
+							<button className="btn btn-out">
+								Скопировать ссылку
+							</button>
+							<Link href="#" className="btn btn-out" target="_blank">
+								О NoCopy
+							</Link>
+						</div>
+					</div>
+
+					<div>
+						<div
+							className="watch-doc-card"
+						>
+							<div
+								className="card-head"
+							>
+								Предосмотр
+							</div>
+
+							<div
+								className="card-body"
+							>
+								<div
+									className="prev-wrap"
+								>
+									документ
+								</div>
+								<div className="document-controls">
+									<div className="document-controls__nav">
+										<button className="document-controls__prev">← Пред.</button>
+										<span className="document-controls__current-page">1 / 11</span>
+										<button className="document-controls__next">След. →</button>
+									</div>
+									<button className="document-controls__fullscreen">На весь экран</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div
+					className="watch-doc-footer"
+				>
+					<a href="#">NoCopy</a>
+					<a href="#">Условия</a>
+					<a href="#">Конфиденциальность</a>
+				</div>
+			</div>
+		</div>
+	)
+}

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

@@ -12,7 +12,7 @@ import {
 	ColumnFiltersState,
 	PaginationState
 } from '@tanstack/react-table';
-import { IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconInfo, IconEye, IconCheck, IconImageFile } from '@/app/ui/icons/icons';
+import {IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconInfo, IconEye, IconCheck, IconImageFile, IconLink} from '@/app/ui/icons/icons';
 import { useTranslations, useLocale } from 'next-intl';
 import DropDownList from '@/app/components/DropDownList';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
@@ -572,6 +572,16 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 							>
 								<IconEye />
 							</Link>
+							{row.original.fileType === 'document' && (
+								<Link
+									href={`/watch-doc?docid=${row.original.id}`}
+									className="bg-indigo-500 hover:bg-indigo-600"
+									title={t('view')}
+									target='_blank'
+								>
+									<IconLink />
+								</Link>
+							)}
 						</div>
 						<div className="actions-group">
 							{row.original.protectStatus === 'PROTECTED' && (

src/app/styles/global-styles.scss

@@ -8,6 +8,7 @@
 @use './VKLogin.scss';
 @use './animation.scss';
 @use './violation-details.scss';
+@use './watch-doc.scss';
 
 .page-title {
 	font-size: 30px;

src/app/styles/pages-styles.scss

@@ -988,6 +988,10 @@
 					}
 				}
 
+				svg {
+					fill: v.$white;
+				}
+
 				span {
 					padding-left: 5px;
 				}

src/app/styles/watch-doc.scss

@@ -0,0 +1,257 @@
+@use './variable.scss' as v;
+
+:root {
+	--bg: #f5f6fa;
+	--card: #fff;
+	--border: #e2e5ef;
+	--border2: #d0d4e4;
+	--text: #0f1221;
+	--text2: #4b5270;
+	--muted: #8890ad;
+	--accent: #5b47e0;
+	--accent2: #7c5cf6;
+	--green: #059669;
+	--green-bg: #ecfdf5;
+	--green-bd: #a7f3d0;
+	--red: #dc2626;
+	--red-bg: #fef2f2;
+	--amber: #b45309;
+	--shadow: 0 2px 12px rgba(15, 18, 33, .07);
+}
+
+.watch-doc {
+	&-wrapper {
+		background: var(--bg);
+		color: var(--text);
+		font-size: 15px;
+		line-height: 1.6;
+		min-height: 100vh;
+
+
+		.btn-acc {
+			background: var(--accent);
+			color: #fff;
+			box-shadow: 0 3px 12px rgba(91, 71, 224, .28);
+			margin: 0 auto;
+			display: block;
+
+			&:hover {
+				background: var(--accent2);
+				text-decoration: none;
+			}
+		}
+
+		.btn-out {
+			background: var(--card);
+			color: var(--text2);
+			border: 1px solid var(--border2);
+			width: 100%;
+
+			&:hover {
+				border-color: var(--accent);
+				color: var(--accent);
+				text-decoration: none;
+			}
+		}
+
+		.document-controls {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-top: 8px;
+
+			&__nav {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+
+			&__next,
+			&__prev {
+				font-size: 0.75rem;
+				color: var(--accent);
+				background: none;
+				border: 1px solid var(--border2);
+				border-radius: 6px;
+				padding: 3px 10px;
+				cursor: pointer;
+				font-family: inherit;
+				display: inline;
+
+				&:hover {
+					background: var(--accent);
+					color: #fff;
+				}
+			}
+
+			&__current-page {
+				font-size: 0.75rem;
+				color: var(--muted);
+				display: inline;
+			}
+
+			&__fullscreen {
+				font-size: .75rem;
+				color: var(--accent);
+				background: none;
+				border: 1px solid var(--border2);
+				border-radius: 6px;
+				padding: 3px 10px;
+				cursor: pointer;
+				font-family: inherit;
+
+				&:hover {
+					background: var(--accent);
+					color: #fff;
+				}
+			}
+		}
+	}
+
+	&-page {
+		max-width: 880px;
+		margin: 0 auto;
+		padding: 0 16px 60px;
+	}
+
+	&-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 18px 0 20px;
+		border-bottom: 1px solid var(--border);
+		margin-bottom: 28px;
+
+		.header-logo {
+			font-size: 1.1rem;
+			font-weight: 700;
+			color: v.$p-color;
+			display: flex;
+			align-items: center;
+			gap: 7px;
+		}
+
+		.header-user {
+			font-size: .83rem;
+			color: var(--text2);
+			background: #fff;
+			border: 1px solid var(--border);
+			border-radius: 8px;
+			padding: 7px 14px;
+		}
+	}
+
+	&-status {
+		background: var(--green-bg);
+		border: 1.5px solid var(--green-bd);
+
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 14px;
+		margin-bottom: 22px;
+		padding: 20px 22px;
+		border-radius: 14px;
+
+		.st-title {
+			color: var(--green);
+			font-size: 1.05rem;
+			font-weight: 700;
+			margin-bottom: 3px;
+		}
+
+		.st-sub {
+			font-size: .83rem;
+			color: var(--text2);
+			line-height: 1.5;
+		}
+	}
+
+	&-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 14px;
+	}
+
+	&-footer {
+		text-align: center;
+		padding: 28px 0 0;
+		color: var(--muted);
+		font-size: .76rem;
+		border-top: 1px solid var(--border);
+		margin-top: 14px;
+		display: flex;
+		justify-content: center;
+		gap: 10px;
+	}
+
+	&-card {
+		background: var(--card);
+		border: 1px solid var(--border);
+		border-radius: 14px;
+		margin-bottom: 14px;
+		overflow: hidden;
+		box-shadow: var(--shadow);
+
+		.card-head {
+			padding: 14px 20px;
+			border-bottom: 1px solid var(--border);
+			display: flex;
+			align-items: center;
+			gap: 9px;
+
+			font-size: .78rem;
+			font-weight: 700;
+			color: var(--text);
+			text-transform: uppercase;
+			letter-spacing: .6px;
+		}
+
+		.card-body {
+			padding: 14px 20px;
+
+			.owner-row {
+				display: flex;
+				align-items: center;
+				gap: 12px;
+			}
+
+			.owner-av {
+				width: 42px;
+				height: 42px;
+				border-radius: 10px;
+				background: linear-gradient(135deg, var(--accent), var(--accent2));
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				color: #fff;
+				font-size: 1.1rem;
+				font-weight: 700;
+				flex-shrink: 0;
+			}
+
+			.owner-name {
+				font-weight: 700;
+				margin-bottom: 5px;
+			}
+
+			.owner-meta {
+				color: var(--muted);
+			}
+		}
+
+		.download-description {
+			font-size: .82rem;
+			color: var(--text2);
+			margin-bottom: 14px;
+			text-align: center;
+		}
+	}
+
+	&-actions {
+		display: flex;
+		gap: 9px;
+		flex-wrap: wrap;
+		margin-top: 16px;
+	}
+}

src/app/ui/icons/icons.tsx

@@ -210,54 +210,60 @@ export function IconCheck() {
 
 export function IconPolicy() {
 	return (
-		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M480-80q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 85-29 163.5T688-214L560-342q-18 11-38.5 16.5T480-320q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 22-5.5 42.5T618-398l60 60q20-41 31-86t11-92v-189l-240-90-240 90v189q0 121 68 220t172 132q26-8 49.5-20.5T576-214l56 56q-33 27-71.5 47T480-80Zm56.5-343.5Q560-447 560-480t-23.5-56.5Q513-560 480-560t-56.5 23.5Q400-513 400-480t23.5 56.5Q447-400 480-400t56.5-23.5ZM488-477Z" /></svg>
+		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M480-80q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 85-29 163.5T688-214L560-342q-18 11-38.5 16.5T480-320q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 22-5.5 42.5T618-398l60 60q20-41 31-86t11-92v-189l-240-90-240 90v189q0 121 68 220t172 132q26-8 49.5-20.5T576-214l56 56q-33 27-71.5 47T480-80Zm56.5-343.5Q560-447 560-480t-23.5-56.5Q513-560 480-560t-56.5 23.5Q400-513 400-480t23.5 56.5Q447-400 480-400t56.5-23.5ZM488-477Z" /></svg>
 	)
 }
 
 export function IconFiles() {
 	return (
-		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M160-160q-33 0-56.5-23.5T80-240v-400q0-33 23.5-56.5T160-720h240l80-80h320q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm73-280h207v-207L233-440Zm-73-40 160-160H160v160Zm0 120v120h640v-480H520v280q0 33-23.5 56.5T440-360H160Zm280-160Z" /></svg>
+		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M160-160q-33 0-56.5-23.5T80-240v-400q0-33 23.5-56.5T160-720h240l80-80h320q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm73-280h207v-207L233-440Zm-73-40 160-160H160v160Zm0 120v120h640v-480H520v280q0 33-23.5 56.5T440-360H160Zm280-160Z" /></svg>
 	)
 }
 
 export function IconAccountBalanceWallet() {
 	return (
-		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M200-200v-560 560Zm0 80q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v100h-80v-100H200v560h560v-100h80v100q0 33-23.5 56.5T760-120H200Zm320-160q-33 0-56.5-23.5T440-360v-240q0-33 23.5-56.5T520-680h280q33 0 56.5 23.5T880-600v240q0 33-23.5 56.5T800-280H520Zm280-80v-240H520v240h280Zm-117.5-77.5Q700-455 700-480t-17.5-42.5Q665-540 640-540t-42.5 17.5Q580-505 580-480t17.5 42.5Q615-420 640-420t42.5-17.5Z" /></svg>
+		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M200-200v-560 560Zm0 80q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v100h-80v-100H200v560h560v-100h80v100q0 33-23.5 56.5T760-120H200Zm320-160q-33 0-56.5-23.5T440-360v-240q0-33 23.5-56.5T520-680h280q33 0 56.5 23.5T880-600v240q0 33-23.5 56.5T800-280H520Zm280-80v-240H520v240h280Zm-117.5-77.5Q700-455 700-480t-17.5-42.5Q665-540 640-540t-42.5 17.5Q580-505 580-480t17.5 42.5Q615-420 640-420t42.5-17.5Z" /></svg>
 	)
 }
 
 export function IconCheckbook() {
 	return (
-		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M240-360h280l80-80H240v80Zm0-160h240v-80H240v80Zm-80-160v400h280l-80 80H80v-560h800v120h-80v-40H160Zm756 212q5 5 5 11t-5 11l-36 36-70-70 36-36q5-5 11-5t11 5l48 48ZM520-120v-70l266-266 70 70-266 266h-70ZM160-680v400-400Z" /></svg>
+		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M240-360h280l80-80H240v80Zm0-160h240v-80H240v80Zm-80-160v400h280l-80 80H80v-560h800v120h-80v-40H160Zm756 212q5 5 5 11t-5 11l-36 36-70-70 36-36q5-5 11-5t11 5l48 48ZM520-120v-70l266-266 70 70-266 266h-70ZM160-680v400-400Z" /></svg>
 	)
 }
 
 export function IconGavel() {
 	return (
-		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M160-120v-80h480v80H160Zm226-194L160-540l84-86 228 226-86 86Zm254-254L414-796l86-84 226 226-86 86Zm184 408L302-682l56-56 522 522-56 56Z" /></svg>
+		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M160-120v-80h480v80H160Zm226-194L160-540l84-86 228 226-86 86Zm254-254L414-796l86-84 226 226-86 86Zm184 408L302-682l56-56 522 522-56 56Z" /></svg>
 	)
 }
 
 export function IconInfoMessage() {
 	return (
-		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M440-280h80v-240h-80v240Zm68.5-331.5Q520-623 520-640t-11.5-28.5Q497-680 480-680t-28.5 11.5Q440-657 440-640t11.5 28.5Q463-600 480-600t28.5-11.5ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg>
+		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M440-280h80v-240h-80v240Zm68.5-331.5Q520-623 520-640t-11.5-28.5Q497-680 480-680t-28.5 11.5Q440-657 440-640t11.5 28.5Q463-600 480-600t28.5-11.5ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg>
 	)
 }
 
 export function IconContentCopy() {
 	return (
-		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" /></svg>
+		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" /></svg>
 	)
 }
 
 export function IconFollowToLink() {
 	return (
-		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
+		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
 	)
 }
 
 export function IconFullScreen() {
 	return (
-		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z"/></svg>
+		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000" className="icon"><path d="M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z" /></svg>
+	)
+}
+
+export function IconLink() {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z" /></svg>
 	)
 }