frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add tacking page

Browse Source
This commit is contained in:
smanylov
2026-04-28 16:32:23 +07:00
parent 9e89a37b4d
commit c0fe6cce48
10 changed files with 219 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[locale]/pages/tracking/page.tsx
+17
View File
@@ -0,0 +1,17 @@
'use server'
import { TrackingStatistic } from '@/app/ui/tracking-page/tracking-statistic';
import FilesTable from '@/app/ui/dashboard/files-table';
export default async function Page() {
const FILE_TYPE = "document";
return (
<div
className="tracking-page"
>
<TrackingStatistic />
<FilesTable fileType={FILE_TYPE} showFileLink={true} />
</div>
)
}
src/app/components/tanstak-table/TanstakTable.tsx
+5 -3
View File
@@ -12,7 +12,7 @@ import {
ColumnFiltersState,
PaginationState
} from '@tanstack/react-table';
import {IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconInfo, IconEye, IconCheck, IconImageFile, IconLink} 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';
@@ -76,7 +76,7 @@ const cutFileExtension = (fileName: string) => {
return extension;
}
export default function TanstakFilesTable({ fileType }: { fileType: string }) {
export default function TanstakFilesTable({ fileType, showFileLink }: { fileType: string, showFileLink?: boolean }) {
const [sorting, setSorting] = useState<SortingState>([]);
const [dateFilter, setDateFilter] = useState<string>('month');
@@ -572,7 +572,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
>
<IconEye />
</Link>
{row.original.fileType === 'document' && (
{(showFileLink && row.original.fileType === 'document') && (
<Link
href={`/watch-doc?docid=${row.original.id}`}
className="bg-indigo-500 hover:bg-indigo-600"
@@ -785,6 +785,8 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
return t('protected-video')
case 'audio':
return t('protected-audio')
case 'document':
return t('protected-document')
default:
return t('table-description')
}
src/app/styles/global-styles.scss
+1
View File
@@ -9,6 +9,7 @@
@use './animation.scss';
@use './violation-details.scss';
@use './watch-doc.scss';
@use './tracking-statistic.scss';
.page-title {
font-size: 30px;
src/app/styles/tracking-statistic.scss
+87
View File
@@ -0,0 +1,87 @@
@use './variable.scss' as v;
:root {
--p: #6366f1;
--pd: #4f46e5;
--pl: #e0e7ff;
--g: #10b981;
--a: #f59e0b;
--r: #f43f5e;
--s: #0ea5e9;
--bg: #f1f5f9;
--sur: #fff;
--brd: #e2e8f0;
--tx: #1e293b;
--mu: #64748b;
--rad: 14px;
--sh: 0 2px 10px rgba(0, 0, 0, .07);
}
.tracking-page {
.general-statistic {
background: linear-gradient(135deg, v.$p-color 55%, v.$s-color);
border-radius: var(--rad);
padding: 32px;
color: #fff;
margin-bottom: 24px;
position: relative;
overflow: hidden;
&-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
}
&-title {
font-size: 24px;
font-weight: 800;
}
&-sub {
font-size: 13px;
opacity: .75;
margin-top: 4px;
}
&-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 14px;
}
&-item {
background: rgba(255, 255, 255, .13);
backdrop-filter: blur(8px);
border-radius: 12px;
padding: 16px 18px;
border: 1px solid rgba(255, 255, 255, .15);
&-ico {
font-size: 20px;
margin-bottom: 6px;
svg {
fill: v.$white;
color: v.$white;
}
}
&-lbl {
font-size: 11px;
opacity: .8;
text-transform: uppercase;
letter-spacing: .5px;
margin-top: 4px;
}
&-val {
font-size: 30px;
font-weight: 800;
line-height: 1;
}
}
}
}
src/app/ui/dashboard/files-table.tsx
+4 -3
View File
@@ -1,13 +1,14 @@
import TanstakFilesTable from '@/app/components/tanstak-table/TanstakTable';
type FilesTable = {
fileType: string
fileType: string;
showFileLink?: boolean;
}
export default function FilesTable({ fileType }: FilesTable) {
export default function FilesTable({ fileType, showFileLink }: FilesTable) {
return (
<div className="block-wrapper">
<TanstakFilesTable fileType={fileType} />
<TanstakFilesTable fileType={fileType} showFileLink={showFileLink}/>
</div>
)
}
src/app/ui/icons/icons.tsx
+17 -1
View File
@@ -258,7 +258,7 @@ export function IconFollowToLink() {
export function IconFullScreen() {
return (
<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>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z" /></svg>
)
}
@@ -266,4 +266,20 @@ 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>
)
}
export function IconPerson() {
return (
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon">
<path d="M367-527q-47-47-47-113t47-113q47-47 113-47t113 47q47 47 47 113t-47 113q-47 47-113 47t-113-47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm296.5-343.5Q560-607 560-640t-23.5-56.5Q513-720 480-720t-56.5 23.5Q400-673 400-640t23.5 56.5Q447-560 480-560t56.5-23.5ZM480-640Zm0 400Z" />
</svg>
)
}
export function IconGlobe() {
return (
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon">
<path d="M480-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-7-.5-14.5T799-507q-5 29-27 48t-52 19h-80q-33 0-56.5-23.5T560-520v-40H400v-80q0-33 23.5-56.5T480-720h40q0-23 12.5-40.5T563-789q-20-5-40.5-8t-42.5-3q-134 0-227 93t-93 227h200q66 0 113 47t47 113v40H400v110q20 5 39.5 7.5T480-160Z" />
</svg>
)
}
src/app/ui/navigation/navigation.json
+5
View File
@@ -14,6 +14,11 @@
"href": "/pages/my-content",
"img": "M20 6h-2.18c.11-.31.18-.65.18-1a2.996 2.996 0 0 0-5.5-1.65l-.5.67-.5-.68C10.96 2.54 10 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1z"
},
{
"name": "tracking",
"href": "/pages/tracking",
"img": "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
},
{
"name": "referral-program",
"href": "/pages/refferals",
src/app/ui/tracking-page/tracking-statistic.tsx
+76
View File
@@ -0,0 +1,76 @@
import { IconLink, IconDocument, IconCheck, IconPerson, IconGlobe } from '@/app/ui/icons/icons';
export function TrackingStatistic() {
return (
<div
className="general-statistic"
>
<div className="general-statistic-top">
<div>
<div className="general-statistic-title">
PDF Трекинг
<span className="pulse"></span>
</div>
<div className="general-statistic-sub">
Аналитика открытий защищённых PDF документов
</div>
</div>
</div>
<div className="general-statistic-content">
<div className="general-statistic-item">
<div className="general-statistic-item-ico">
<IconDocument />
</div>
<div className="general-statistic-item-val">
33
</div>
<div className="general-statistic-item-lbl">
Документов
</div>
</div>
<div className="general-statistic-item">
<div className="general-statistic-item-ico">
<IconLink />
</div><div className="general-statistic-item-val">
103
</div>
<div className="general-statistic-item-lbl">
Открытий
</div>
</div>
<div className="general-statistic-item">
<div className="general-statistic-item-ico">
<IconCheck />
</div>
<div className="general-statistic-item-val">
247
</div>
<div className="general-statistic-item-lbl">
Верификаций
</div>
</div>
<div className="general-statistic-item">
<div className="general-statistic-item-ico">
<IconPerson />
</div>
<div className="general-statistic-item-val">
27
</div>
<div className="general-statistic-item-lbl">
Уникальных IP
</div>
</div>
<div className="general-statistic-item">
<div className="general-statistic-item-ico">
<IconGlobe />
</div>
<div className="general-statistic-item-val">
7
</div>
<div className="general-statistic-item-lbl">
Стран
</div>
</div>
</div>
</div>
)
}