add usersList table
This commit is contained in:
smanylov
parent
fe8b6e42cc
commit
3c6dab7971
74
package-lock.json
generated
74
package-lock.json
generated
@ -8,11 +8,14 @@
|
||||
"name": "no-copy-admin-panel-frontend",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "^5.90.11",
|
||||
"@tanstack/react-table": "^8.21.3",
|
||||
"clsx": "^2.1.1",
|
||||
"next": "16.1.2",
|
||||
"next-intl": "^4.7.0",
|
||||
"react": "19.2.3",
|
||||
"react-dom": "19.2.3"
|
||||
"react-dom": "19.2.3",
|
||||
"sonner": "^2.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.18",
|
||||
@ -1548,6 +1551,65 @@
|
||||
"tailwindcss": "4.1.18"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/query-core": {
|
||||
"version": "5.90.19",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.19.tgz",
|
||||
"integrity": "sha512-GLW5sjPVIvH491VV1ufddnfldyVB+teCnpPIvweEfkpRx7CfUmUGhoh9cdcUKBh/KwVxk22aNEDxeTsvmyB/WA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-query": {
|
||||
"version": "5.90.19",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.19.tgz",
|
||||
"integrity": "sha512-qTZRZ4QyTzQc+M0IzrbKHxSeISUmRB3RPGmao5bT+sI6ayxSRhn0FXEnT5Hg3as8SBFcRosrXXRFB+yAcxVxJQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/query-core": "5.90.19"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18 || ^19"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-table": {
|
||||
"version": "8.21.3",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
|
||||
"integrity": "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/table-core": "8.21.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8",
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/table-core": {
|
||||
"version": "8.21.3",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
|
||||
"integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "20.19.30",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.30.tgz",
|
||||
@ -2385,6 +2447,16 @@
|
||||
"@img/sharp-win32-x64": "0.34.5"
|
||||
}
|
||||
},
|
||||
"node_modules/sonner": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
|
||||
"integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
||||
"react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
|
||||
@ -8,11 +8,14 @@
|
||||
"start": "next start -p 2996"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "^5.90.11",
|
||||
"@tanstack/react-table": "^8.21.3",
|
||||
"clsx": "^2.1.1",
|
||||
"next": "16.1.2",
|
||||
"next-intl": "^4.7.0",
|
||||
"react": "19.2.3",
|
||||
"react-dom": "19.2.3"
|
||||
"react-dom": "19.2.3",
|
||||
"sonner": "^2.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.18",
|
||||
@ -24,4 +27,4 @@
|
||||
"tailwindcss": "^4.1.18",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,14 @@
|
||||
import type { Metadata } from "next";
|
||||
import Providers from '@/app/providers/getQueryServer'
|
||||
import { NextIntlClientProvider, hasLocale } from 'next-intl';
|
||||
import { routing } from '@/i18n/routing';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { getQueryClient } from '@/app/providers/getQueryClient';
|
||||
import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
|
||||
import { prefetchLayoutQueries } from '@/app/lib/prefetch-queries';
|
||||
import { routing } from '@/i18n/routing';
|
||||
import AdminNavLinks from '@/app/ui/admin-nav-links'
|
||||
import AdminHeaderPanel from '@/app/ui/admin-header-panel';
|
||||
|
||||
import "../styles/globals.css";
|
||||
import "../styles/global-styles.scss"
|
||||
|
||||
@ -28,19 +33,26 @@ export default async function RootLayout({
|
||||
notFound();
|
||||
}
|
||||
|
||||
const queryClient = getQueryClient();
|
||||
await prefetchLayoutQueries(queryClient);
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className="admin-panel">
|
||||
<NextIntlClientProvider>
|
||||
<AdminNavLinks />
|
||||
<div className="admin-main">
|
||||
<AdminHeaderPanel />
|
||||
<main className="main-containter">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</NextIntlClientProvider>
|
||||
</body>
|
||||
<NextIntlClientProvider>
|
||||
<Providers>
|
||||
<HydrationBoundary state={dehydrate(queryClient)}>
|
||||
<body className="admin-panel">
|
||||
<AdminNavLinks />
|
||||
<div className="admin-main">
|
||||
<AdminHeaderPanel />
|
||||
<main className="main-containter">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</HydrationBoundary>
|
||||
</Providers>
|
||||
</NextIntlClientProvider>
|
||||
</html >
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
export default function Page() {
|
||||
import { UsersTable } from '@/app/ui/users/users-table';
|
||||
export default async function Page() {
|
||||
return (
|
||||
<div>
|
||||
users-page
|
||||
<UsersTable />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
80
src/app/components/dropDownList.tsx
Normal file
80
src/app/components/dropDownList.tsx
Normal file
@ -0,0 +1,80 @@
|
||||
import React, { ReactNode, useState, useRef } from 'react';
|
||||
import { useClickOutside } from '@/app/hooks/useClickOutside';
|
||||
|
||||
interface DropDownListProps {
|
||||
children: ReactNode;
|
||||
value: string | number;
|
||||
callBack: (value: string) => void;
|
||||
translatedValue?: string;
|
||||
}
|
||||
|
||||
interface ChildProps {
|
||||
value?: string;
|
||||
onClick?: () => void;
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function DropDownList({ children, value, callBack, translatedValue }: DropDownListProps) {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const dropdownRef = useRef<HTMLDivElement>(null)
|
||||
useClickOutside(dropdownRef, () => {
|
||||
setIsOpen(false);
|
||||
});
|
||||
|
||||
const enhancedChildren = React.Children.map(children, (child, index) => {
|
||||
if (React.isValidElement<ChildProps>(child)) {
|
||||
const childValue = child.props.value || undefined;
|
||||
|
||||
return React.cloneElement<ChildProps>(child, {
|
||||
onClick: () => {
|
||||
callBack(childValue || "");
|
||||
setIsOpen(false);
|
||||
},
|
||||
className: `dropdown-item ${value === childValue ? "current" : ""}`,
|
||||
key: index,
|
||||
});
|
||||
}
|
||||
return child;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="dropdown-wrapper" ref={dropdownRef}>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsOpen(!isOpen)
|
||||
}}
|
||||
className="dropdown-button"
|
||||
>
|
||||
<span className="flex items-center">
|
||||
<span className="mr-2">
|
||||
{translatedValue ? translatedValue : value}
|
||||
</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 && (
|
||||
<div className="dropdown-list">
|
||||
<ul
|
||||
className="py-1"
|
||||
role="listbox"
|
||||
aria-labelledby="language-selector"
|
||||
>
|
||||
{enhancedChildren}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
940
src/app/components/tanstakTable.tsx
Normal file
940
src/app/components/tanstakTable.tsx
Normal file
@ -0,0 +1,940 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo, useEffect, ReactNode } from 'react';
|
||||
import {
|
||||
useReactTable,
|
||||
getCoreRowModel,
|
||||
getSortedRowModel,
|
||||
getPaginationRowModel,
|
||||
getFilteredRowModel,
|
||||
ColumnDef,
|
||||
SortingState,
|
||||
ColumnFiltersState,
|
||||
} from '@tanstack/react-table';
|
||||
import { IconImageFile, IconVideoFile, IconAudioFile, IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconShieldExclamation, IconDelete } from '@/app/ui/icons/icons';
|
||||
import { useTranslations, useLocale } from 'next-intl';
|
||||
import DropDownList from '@/app/components/dropDownList';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import ModalWindow from '@/app/components/modalWindow';
|
||||
import { toast } from 'sonner';
|
||||
import { pluralize } from '@/app/lib/pluralize';
|
||||
|
||||
type FileItem = {
|
||||
id: string;
|
||||
userId: string;
|
||||
userName: string;
|
||||
userEmail?: number | undefined;
|
||||
userCompany?: number | undefined;
|
||||
userSubscription?: number;
|
||||
_original?: ApiFile;
|
||||
};
|
||||
|
||||
type ApiFile = {
|
||||
id: string;
|
||||
originalFileName: string;
|
||||
mimeType: string;
|
||||
userEmail: number;
|
||||
userCompany: number;
|
||||
updatedAt: string;
|
||||
};
|
||||
|
||||
type ApiResponse = any;
|
||||
|
||||
// Иконки для типов файлов
|
||||
const FileTypeIcon = ({ type }: { type: string }) => {
|
||||
switch (type) {
|
||||
case 'image':
|
||||
return <span className="color-image">
|
||||
<IconImageFile />
|
||||
</span>;
|
||||
case 'video':
|
||||
return <span className="color-video">
|
||||
<IconVideoFile />
|
||||
</span>;
|
||||
case 'audio':
|
||||
return <span className="color-audio">
|
||||
<IconAudioFile />
|
||||
</span>;
|
||||
default:
|
||||
return <span>📄</span>;
|
||||
}
|
||||
};
|
||||
|
||||
// Форматирование даты из timestamp
|
||||
const formatDate = (timestamp: number) => {
|
||||
const date = new Date(timestamp);
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
const year = date.getFullYear();
|
||||
|
||||
return `${day}.${month}.${year}`;
|
||||
};
|
||||
|
||||
const formatDateTime = (timestamp: number) => {
|
||||
const date = new Date(timestamp);
|
||||
const hours = date.getHours().toString().padStart(2, '0');
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||||
|
||||
return `${hours}:${minutes}`;
|
||||
};
|
||||
|
||||
const cutFileName = (userId: string) => {
|
||||
const MAX_FILE_NAME_LENGTH = 26;
|
||||
const lastDotIndex = userId.lastIndexOf('.');
|
||||
|
||||
if (lastDotIndex <= 0) {
|
||||
return userId.length > MAX_FILE_NAME_LENGTH ? userId.substring(0, MAX_FILE_NAME_LENGTH - 3) + '...' : userId;
|
||||
}
|
||||
|
||||
const nameWithoutExtension = userId.substring(0, lastDotIndex);
|
||||
const extension = userId.substring(lastDotIndex);
|
||||
|
||||
if (userId.length <= MAX_FILE_NAME_LENGTH) {
|
||||
return userId;
|
||||
}
|
||||
|
||||
const maxNameLength = MAX_FILE_NAME_LENGTH - extension.length - 3;
|
||||
|
||||
if (maxNameLength <= 0) {
|
||||
return '...' + extension;
|
||||
}
|
||||
|
||||
return nameWithoutExtension.substring(0, maxNameLength) + '...' + extension;
|
||||
}
|
||||
|
||||
export default function TanstakFilesTable() {
|
||||
const {
|
||||
data: tableData,
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
} = useQuery<ApiResponse, Error, any>({
|
||||
queryKey: ['userFilesData'],
|
||||
queryFn: () => {
|
||||
return []
|
||||
},
|
||||
|
||||
select: (data: ApiResponse): any => {
|
||||
if (!data?.files) return [
|
||||
{
|
||||
id: 1,
|
||||
userId: 1,
|
||||
userName: 'userName',
|
||||
userEmail: 'userEmail',
|
||||
userCompany: 'userCompany',
|
||||
userSubscription: 'userSubscription',
|
||||
userRole: 'role',
|
||||
userContent: 0,
|
||||
}
|
||||
];
|
||||
|
||||
return data.files.map((item: ApiFile) => {
|
||||
const [datePart, timePart] = item.updatedAt.split(' ');
|
||||
const [day, month, year] = datePart.split('-').map(Number);
|
||||
const [hours, minutes, seconds] = timePart.split(':').map(Number);
|
||||
const newDate = new Date(year, month - 1, day, hours, minutes, seconds).getTime();
|
||||
|
||||
return {
|
||||
id: item.id,
|
||||
userId: item.originalFileName,
|
||||
userName: item.mimeType.toLocaleLowerCase(),
|
||||
userEmail: item.userEmail,
|
||||
userCompany: item.userCompany,
|
||||
userSubscription: newDate,
|
||||
userRole: 'role',
|
||||
userContent: 0,
|
||||
_original: item
|
||||
};
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// Состояния
|
||||
const [sorting, setSorting] = useState<SortingState>([]);
|
||||
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
|
||||
const [dateFilter, setDateFilter] = useState<string>('all');
|
||||
const [typeFilter, setTypeFilter] = useState<string>('all');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [pagination, setPagination] = useState({
|
||||
pageIndex: 0,
|
||||
pageSize: 10,
|
||||
});
|
||||
const [openWindow, setOpenWindow] = useState<boolean>(false);
|
||||
const [openWindowChildren, setOpenWindowChildren] = useState<ReactNode>(null);
|
||||
|
||||
const [isFileLoading, setIsFileLoading] = useState(false);
|
||||
|
||||
const t = useTranslations("Global");
|
||||
const locale = useLocale();
|
||||
|
||||
// Определение колонок
|
||||
const columns = useMemo<ColumnDef<FileItem>[]>(
|
||||
() => [
|
||||
{
|
||||
accessorKey: 'userId',
|
||||
header: ({ column }) => (
|
||||
<div className="column start">
|
||||
<span>
|
||||
ID
|
||||
</span>
|
||||
<button
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
className="sort-button"
|
||||
>
|
||||
{
|
||||
column.getIsSorted() === 'asc' ?
|
||||
<span>
|
||||
<IconArrowUp />
|
||||
</span>
|
||||
: column.getIsSorted() === 'desc' ?
|
||||
<span>
|
||||
<IconArrowDown />
|
||||
</span>
|
||||
: <span>
|
||||
<IconFilter />
|
||||
</span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center space-x-2">
|
||||
<div>
|
||||
<div className="font-medium w-full truncate" title={row.original.userId}>
|
||||
{/* {row.original.userId} */}
|
||||
{row.original.userId}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
enableColumnFilter: false,
|
||||
},
|
||||
{
|
||||
accessorKey: 'userName',
|
||||
header: ({ column }) => (
|
||||
<div className="column">
|
||||
<span>
|
||||
Пользователь
|
||||
</span>
|
||||
<button
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
className="sort-button"
|
||||
>
|
||||
{
|
||||
column.getIsSorted() === 'asc' ?
|
||||
<span>
|
||||
<IconArrowUp />
|
||||
</span>
|
||||
: column.getIsSorted() === 'desc' ?
|
||||
<span>
|
||||
<IconArrowDown />
|
||||
</span>
|
||||
: <span>
|
||||
<IconFilter />
|
||||
</span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<div className={`text-center font-semibold`}>
|
||||
User name
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'userEmail',
|
||||
header: ({ column }) => (
|
||||
<div className="column">
|
||||
<span>
|
||||
email
|
||||
</span>
|
||||
<button
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
className="sort-button"
|
||||
>
|
||||
{
|
||||
column.getIsSorted() === 'asc' ?
|
||||
<span>
|
||||
<IconArrowUp />
|
||||
</span>
|
||||
: column.getIsSorted() === 'desc' ?
|
||||
<span>
|
||||
<IconArrowDown />
|
||||
</span>
|
||||
: <span>
|
||||
<IconFilter />
|
||||
</span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
let classCollor = () => {
|
||||
let result = ''
|
||||
if (row.original.userEmail !== undefined) {
|
||||
result = row.original.userEmail > 0 ? 'text-red-600' : 'text-green-600'
|
||||
}
|
||||
return result;
|
||||
}
|
||||
return (
|
||||
<div className={`text-center font-semibold ${classCollor()}`}>
|
||||
{row.original.userEmail !== undefined ? row.original.userEmail : '-'}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'userCompany',
|
||||
header: ({ column }) => (
|
||||
<div className="column">
|
||||
<span>
|
||||
Компания
|
||||
</span>
|
||||
<button
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
className="sort-button"
|
||||
>
|
||||
{
|
||||
column.getIsSorted() === 'asc' ?
|
||||
<span>
|
||||
<IconArrowUp />
|
||||
</span>
|
||||
: column.getIsSorted() === 'desc' ?
|
||||
<span>
|
||||
<IconArrowDown />
|
||||
</span>
|
||||
: <span>
|
||||
<IconFilter />
|
||||
</span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<div className="text-center">
|
||||
{row.original.userCompany !== undefined ? row.original.userCompany : '-'}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'userSubscription',
|
||||
header: ({ column }) => (
|
||||
<div className="column">
|
||||
<span>
|
||||
Подписка
|
||||
</span>
|
||||
<button
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
className="sort-button"
|
||||
>
|
||||
{
|
||||
column.getIsSorted() === 'asc' ?
|
||||
<span>
|
||||
<IconArrowUp />
|
||||
</span>
|
||||
: column.getIsSorted() === 'desc' ?
|
||||
<span>
|
||||
<IconArrowDown />
|
||||
</span>
|
||||
: <span>
|
||||
<IconFilter />
|
||||
</span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<div className="text-center">
|
||||
{row.original.userSubscription ? (
|
||||
<>
|
||||
{formatDate(row.original.userSubscription)}
|
||||
<br />
|
||||
{formatDateTime(row.original.userSubscription)}
|
||||
</>
|
||||
) : (
|
||||
<div>-</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
enableColumnFilter: false,
|
||||
},
|
||||
{
|
||||
accessorKey: 'userRole',
|
||||
header: ({ column }) => (
|
||||
<div className="column">
|
||||
<span>
|
||||
Роль
|
||||
</span>
|
||||
<button
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
className="sort-button"
|
||||
>
|
||||
{
|
||||
column.getIsSorted() === 'asc' ?
|
||||
<span>
|
||||
<IconArrowUp />
|
||||
</span>
|
||||
: column.getIsSorted() === 'desc' ?
|
||||
<span>
|
||||
<IconArrowDown />
|
||||
</span>
|
||||
: <span>
|
||||
<IconFilter />
|
||||
</span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<div className={`text-center font-semibold`}>
|
||||
User Роль
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}, {
|
||||
accessorKey: 'userContent',
|
||||
header: ({ column }) => (
|
||||
<div className="column">
|
||||
<span>
|
||||
Контент
|
||||
</span>
|
||||
<button
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
className="sort-button"
|
||||
>
|
||||
{
|
||||
column.getIsSorted() === 'asc' ?
|
||||
<span>
|
||||
<IconArrowUp />
|
||||
</span>
|
||||
: column.getIsSorted() === 'desc' ?
|
||||
<span>
|
||||
<IconArrowDown />
|
||||
</span>
|
||||
: <span>
|
||||
<IconFilter />
|
||||
</span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<div className={`text-center font-semibold`}>
|
||||
User Роль
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: () => {
|
||||
return (
|
||||
<div className="column">
|
||||
{t('actions')}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
cell: ({ row }) => (
|
||||
<div className="actions">
|
||||
<div className="actions-group">
|
||||
<button
|
||||
onClick={() => handleView(row.original)}
|
||||
className="bg-blue-500 hover:bg-blue-600"
|
||||
>
|
||||
<IconEye />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDownload(row.original)}
|
||||
disabled={isFileLoading}
|
||||
className="bg-green-500 hover:bg-green-600"
|
||||
>
|
||||
<IconFileDownload />
|
||||
</button>
|
||||
</div>
|
||||
<div className="actions-group">
|
||||
<button
|
||||
onClick={() => handleProtect(row.original)}
|
||||
className="bg-violet-500 hover:bg-violet-600"
|
||||
>
|
||||
<IconShieldExclamation />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleOpenWindowForRemove(row.original)}
|
||||
className="bg-red-700 hover:bg-red-800"
|
||||
>
|
||||
<IconDelete />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
),
|
||||
enableSorting: false,
|
||||
enableColumnFilter: false,
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
// Обработчики действий
|
||||
const handleView = (file: FileItem) => {
|
||||
console.log(`Просмотр файла: ${file.userId}`);
|
||||
};
|
||||
|
||||
const handleDownload = async (file: FileItem) => {
|
||||
setIsFileLoading(true);
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/download/${file.id}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`error: ${response.status}`);
|
||||
}
|
||||
|
||||
const blob = await response.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = file.userId || `file-${file.id}`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
toast.success(`${t('file-is-downloading')} - ${file.userId}`);
|
||||
} catch (error) {
|
||||
toast.error(t('failed-to-download-file'))
|
||||
} finally {
|
||||
setIsFileLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleProtect = (file: FileItem) => {
|
||||
console.log(`Щиток: ${file.userId}`);
|
||||
};
|
||||
|
||||
const handleOpenWindowForRemove = async (file: FileItem) => {
|
||||
|
||||
setOpenWindowChildren(() => {
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-2xl">
|
||||
{t('you-sure-you-want-to-delete')}
|
||||
</h3>
|
||||
<div className="mt-2 mb-8 text-center">{file.userId}</div>
|
||||
<div className="flex justify-center gap-4">
|
||||
<button className="btn-primary btn-modal"
|
||||
onClick={() => {
|
||||
/* deleteMutation.mutate(file.id) */
|
||||
}}
|
||||
/* disabled={deleteMutation.isPending} */
|
||||
>
|
||||
{/* {deleteMutation.isPending ? '...' : t('yes')} */}
|
||||
{t('yes')}
|
||||
</button>
|
||||
<button className="btn-primary btn-modal"
|
||||
onClick={() => {
|
||||
setOpenWindow(false);
|
||||
setOpenWindowChildren(null);
|
||||
}}
|
||||
>
|
||||
{t('no')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
setOpenWindow(true);
|
||||
};
|
||||
|
||||
/* const deleteMutation = useMutation({
|
||||
mutationFn: removeUserFile,
|
||||
|
||||
onMutate: async (fileId: string) => {
|
||||
await queryClient.cancelQueries({ queryKey: ['userFilesData'] });
|
||||
|
||||
queryClient.setQueryData<ApiResponse>(['userFilesData'], (old) => {
|
||||
if (!old?.files) return old;
|
||||
return {
|
||||
...old,
|
||||
files: old.files.filter(file => file.id !== fileId)
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
onError: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['userFilesData'] });
|
||||
toast.error(t('error'));
|
||||
},
|
||||
|
||||
onSuccess: (response, fileId) => {
|
||||
if (response === fileId) {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ['userFilesData'],
|
||||
refetchType: 'active'
|
||||
});
|
||||
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ['userFilesInfo']
|
||||
});
|
||||
|
||||
setOpenWindow(false);
|
||||
setOpenWindowChildren(null);
|
||||
toast.success(t('file-has-been-deleted'));
|
||||
}
|
||||
},
|
||||
}); */
|
||||
|
||||
// Фильтрация по типу файла и дате
|
||||
const filteredData = useMemo(() => {
|
||||
let result = tableData;
|
||||
if (!result) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// Фильтр по типу файла
|
||||
if (typeFilter !== 'all') {
|
||||
result = result.filter((item: any) => {
|
||||
return item.userName === typeFilter
|
||||
});
|
||||
}
|
||||
|
||||
// Фильтр по дате
|
||||
if (dateFilter !== 'all') {
|
||||
const now = Date.now();
|
||||
const oneDay = 24 * 60 * 60 * 1000;
|
||||
const sevenDays = 7 * oneDay;
|
||||
const thirtyDays = 30 * oneDay;
|
||||
|
||||
switch (dateFilter) {
|
||||
case 'today':
|
||||
const todayStart = new Date().setHours(0, 0, 0, 0);
|
||||
result = result.filter((item: any) => {
|
||||
if (item.userSubscription) {
|
||||
return item.userSubscription >= todayStart
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'week':
|
||||
const weekAgo = now - sevenDays;
|
||||
result = result.filter((item: any) => {
|
||||
if (item.userSubscription) {
|
||||
return item.userSubscription >= weekAgo;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'month':
|
||||
const monthAgo = now - thirtyDays;
|
||||
result = result.filter((item: any) => {
|
||||
if (item.userSubscription) {
|
||||
return item.userSubscription >= monthAgo;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'older':
|
||||
const monthAgo2 = now - thirtyDays;
|
||||
result = result.filter((item: any) => {
|
||||
if (item.userSubscription) {
|
||||
return item.userSubscription < monthAgo2;
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (searchQuery.trim()) {
|
||||
const query = searchQuery.toLowerCase().trim();
|
||||
result = result.filter((item: any) => {
|
||||
// Ищем по всем строковым полям
|
||||
return Object.keys(item).some(key => {
|
||||
const value = item[key];
|
||||
if (typeof value === 'string') {
|
||||
return value.toLowerCase().includes(query);
|
||||
}
|
||||
// Если нужно искать по числам или другим типам
|
||||
if (typeof value === 'number' || typeof value === 'boolean') {
|
||||
return value.toString().toLowerCase().includes(query);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
}, [tableData, typeFilter, dateFilter, searchQuery]);
|
||||
|
||||
useEffect(() => {
|
||||
const currentPageRows = table.getRowModel().rows;
|
||||
const pageCount = table.getPageCount();
|
||||
|
||||
if (currentPageRows.length === 0 && pagination.pageIndex > 0 && pageCount > 0) {
|
||||
table.setPageIndex(pagination.pageIndex - 1);
|
||||
}
|
||||
}, [filteredData, pagination.pageIndex]);
|
||||
|
||||
// Создание таблицы
|
||||
const table = useReactTable({
|
||||
data: filteredData,
|
||||
columns,
|
||||
state: {
|
||||
sorting,
|
||||
columnFilters,
|
||||
pagination
|
||||
},
|
||||
autoResetPageIndex: false,
|
||||
onPaginationChange: setPagination,
|
||||
onSortingChange: setSorting,
|
||||
onColumnFiltersChange: setColumnFilters,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
initialState: {
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const pluralizeFiles = (number: number) => {
|
||||
const translate = [t('file'), t('files-few'), t('files')];
|
||||
return pluralize(number, translate[0], translate[1], translate[2], locale);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="tanstak-table-wrapper">
|
||||
<ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow}></ModalWindow>
|
||||
{/* Фильтры */}
|
||||
<div className="tanstak-table-filtres">
|
||||
<div className="table-filtres-wrapper">
|
||||
<div className="table-filtres-item">
|
||||
<div className="table-filtres-label">{t('date-filter')}:</div>
|
||||
<DropDownList
|
||||
value={dateFilter}
|
||||
translatedValue={(() => {
|
||||
switch (dateFilter) {
|
||||
case 'all':
|
||||
return t('all-dates')
|
||||
case 'week':
|
||||
return t('for-a-week')
|
||||
case 'month':
|
||||
return t('for-a-month')
|
||||
case 'older':
|
||||
return t('older-than-a-month')
|
||||
default:
|
||||
return t('today')
|
||||
}
|
||||
})()}
|
||||
callBack={setDateFilter}
|
||||
>
|
||||
<li value="all">
|
||||
{t('all-dates')}
|
||||
</li>
|
||||
<li value="today">
|
||||
{t('today')}
|
||||
</li>
|
||||
<li value="week">
|
||||
{t('for-a-week')}
|
||||
</li>
|
||||
<li value="month">
|
||||
{t('for-a-month')}
|
||||
</li>
|
||||
<li value="older">
|
||||
{t('older-than-a-month')}
|
||||
</li>
|
||||
</DropDownList>
|
||||
</div>
|
||||
|
||||
<div className="table-filtres-item">
|
||||
<div className="table-filtres-label">{t('type-filter')}:</div>
|
||||
<DropDownList
|
||||
value={typeFilter}
|
||||
translatedValue={
|
||||
(() => {
|
||||
switch (typeFilter) {
|
||||
case 'image':
|
||||
return t('images')
|
||||
case 'video':
|
||||
return t('videos')
|
||||
case 'audio':
|
||||
return t('audios')
|
||||
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>
|
||||
</DropDownList>
|
||||
</div>
|
||||
|
||||
<div className="table-filtres-item">
|
||||
<div className="table-filtres-label">{t('search')}:</div>
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={e => setSearchQuery(e.target.value)}
|
||||
placeholder="Поиск пользователей"
|
||||
className="table-filtres-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="table-filtres-item">
|
||||
<div className="table-filtres-label">{t('items-per-page')}:</div>
|
||||
<DropDownList
|
||||
value={table.getState().pagination.pageSize}
|
||||
//@ts-ignore сделал так потому что для table.setPageSize нужна цифра
|
||||
callBack={table.setPageSize}
|
||||
>
|
||||
{[5, 10, 20, 50, 100].map(pageSize => (
|
||||
<li key={pageSize} value={pageSize}>
|
||||
{t('show')} {pageSize}
|
||||
</li>
|
||||
))}
|
||||
</DropDownList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Таблица */}
|
||||
<div className="tanstak-table-block">
|
||||
<table className="tanstak-table">
|
||||
<thead className="tanstak-table-head">
|
||||
{table.getHeaderGroups().map(headerGroup => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map(header => (
|
||||
<th
|
||||
key={header.id}
|
||||
>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: typeof header.column.columnDef.header === 'function'
|
||||
? header.column.columnDef.header(header.getContext())
|
||||
: header.column.columnDef.header as string}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody className="tanstak-table-body">
|
||||
{table.getRowModel().rows.length > 0 ? (
|
||||
table.getRowModel().rows.map(row => (
|
||||
<tr key={row.id}>
|
||||
{row.getVisibleCells().map(cell => (
|
||||
<td key={cell.id}>
|
||||
{typeof cell.column.columnDef.cell === 'function'
|
||||
? cell.column.columnDef.cell(cell.getContext())
|
||||
: cell.getValue() as string}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="text-center">
|
||||
{t('no-data-for-selected-filters')}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Пагинация */}
|
||||
<div className="tanstak-table-pagination">
|
||||
<div className="pagination-info">
|
||||
<span className="pagination-info-pages">
|
||||
{t('page')}{' '}
|
||||
<strong>
|
||||
{table.getState().pagination.pageIndex + 1} {t('out-of')} {table.getPageCount() ? table.getPageCount() : 1}
|
||||
</strong>
|
||||
</span>
|
||||
<span className="pagination-info-files">
|
||||
| {t('shown')} {table.getRowModel().rows.length} {t('out-of')} {filteredData.length} {pluralizeFiles(filteredData.length || 0)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="pagination-controls">
|
||||
<button
|
||||
className="arrow"
|
||||
onClick={() => table.firstPage()}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
>
|
||||
<IconDoubleArrowLeft />
|
||||
</button>
|
||||
<button
|
||||
className="arrow"
|
||||
onClick={() => table.previousPage()}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
>
|
||||
<IconArrowLeft />
|
||||
</button>
|
||||
|
||||
<div className="pagination-controls-pages">
|
||||
{Array.from({ length: Math.min(5, table.getPageCount()) }, (_, i) => {
|
||||
const pageIndex = Math.max(
|
||||
0,
|
||||
Math.min(
|
||||
table.getPageCount() - 5,
|
||||
table.getState().pagination.pageIndex - 2
|
||||
)
|
||||
) + i;
|
||||
|
||||
if (pageIndex < table.getPageCount()) {
|
||||
return (
|
||||
<button
|
||||
key={pageIndex}
|
||||
className={`${table.getState().pagination.pageIndex === pageIndex
|
||||
? 'current'
|
||||
: 'other'
|
||||
}`}
|
||||
onClick={() => table.setPageIndex(pageIndex)}
|
||||
>
|
||||
{pageIndex + 1}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="arrow"
|
||||
onClick={() => table.nextPage()}
|
||||
disabled={!table.getCanNextPage()}
|
||||
>
|
||||
<IconArrowRight />
|
||||
</button>
|
||||
<button
|
||||
className="arrow"
|
||||
onClick={() => table.lastPage()}
|
||||
disabled={!table.getCanNextPage()}
|
||||
>
|
||||
<IconDoubleArrowRight />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
17
src/app/lib/pluralize.ts
Normal file
17
src/app/lib/pluralize.ts
Normal file
@ -0,0 +1,17 @@
|
||||
'use client'
|
||||
|
||||
export const pluralize = (number: number, one: string, few: string, many: string, currentLang: string) => {
|
||||
if (currentLang === 'ru') {
|
||||
const n = Math.abs(number) % 100;
|
||||
const n1 = n % 10;
|
||||
|
||||
if (n > 10 && n < 20) return many; // 11-19
|
||||
if (n1 > 1 && n1 < 5) return few; // 2-4 (кроме 12-14)
|
||||
if (n1 === 1) return one; // 1 (кроме 11)
|
||||
|
||||
return many; // 0, 5-9, 10-20, 25-30 и т.д.
|
||||
} else {
|
||||
if (number === 1 || number === 0) return one;
|
||||
return many;
|
||||
}
|
||||
};
|
||||
14
src/app/lib/prefetch-queries.ts
Normal file
14
src/app/lib/prefetch-queries.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { QueryClient } from '@tanstack/react-query';
|
||||
|
||||
export async function prefetchLayoutQueries(queryClient: QueryClient) {
|
||||
await Promise.all([
|
||||
queryClient.prefetchQuery({
|
||||
queryKey: ['userData'],
|
||||
queryFn: () => {
|
||||
return {
|
||||
test: 'testFetchUserData'
|
||||
}
|
||||
}
|
||||
})
|
||||
]);
|
||||
}
|
||||
17
src/app/providers/ToastProvider.tsx
Normal file
17
src/app/providers/ToastProvider.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
'use client';
|
||||
|
||||
import { Toaster } from 'sonner';
|
||||
|
||||
export function ToastProvider() {
|
||||
return (
|
||||
<Toaster
|
||||
position="bottom-left"
|
||||
expand={false}
|
||||
richColors
|
||||
closeButton={false}
|
||||
duration={1000}
|
||||
visibleToasts={3}
|
||||
gap={12}
|
||||
/>
|
||||
);
|
||||
}
|
||||
31
src/app/providers/getQueryClient.ts
Normal file
31
src/app/providers/getQueryClient.ts
Normal file
@ -0,0 +1,31 @@
|
||||
import { QueryClient } from '@tanstack/react-query'
|
||||
import { cache } from 'react'
|
||||
|
||||
const getQueryClientDefaultConfig = () => ({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
staleTime: 60 * 1000,
|
||||
refetchOnWindowFocus: false,
|
||||
retry: 1,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export function makeQueryClient() {
|
||||
return new QueryClient(getQueryClientDefaultConfig());
|
||||
}
|
||||
|
||||
export const getQueryClient = cache(() => {
|
||||
|
||||
if (typeof window === 'undefined') {
|
||||
return new QueryClient(getQueryClientDefaultConfig())
|
||||
} else {
|
||||
// @ts-ignore
|
||||
if (!globalThis.__APP_QUERY_CLIENT__) {
|
||||
// @ts-ignore
|
||||
globalThis.__APP_QUERY_CLIENT__ = makeQueryClient()
|
||||
}
|
||||
// @ts-ignore
|
||||
return globalThis.__APP_QUERY_CLIENT__
|
||||
}
|
||||
})
|
||||
16
src/app/providers/getQueryServer.tsx
Normal file
16
src/app/providers/getQueryServer.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
'use client'
|
||||
|
||||
import {
|
||||
QueryClientProvider,
|
||||
} from '@tanstack/react-query'
|
||||
|
||||
import { getQueryClient } from '@/app/providers/getQueryClient';
|
||||
|
||||
|
||||
export default function Providers({ children }: { children: React.ReactNode }) {
|
||||
const queryClient = getQueryClient();
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
)
|
||||
}
|
||||
@ -377,4 +377,359 @@
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-filtres-input {
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
|
||||
background-color: #ffffff;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
|
||||
&:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(99, 101, 241, 0.53);
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.dropdown-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
|
||||
background-color: #ffffff;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(99, 101, 241, 0.53);
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-list {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
|
||||
transform-origin: top right;
|
||||
|
||||
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-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background-color: #dbeafe;
|
||||
}
|
||||
|
||||
&.current {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tanstak-table-wrapper {
|
||||
padding: 1.5rem;
|
||||
margin: 0 auto;
|
||||
|
||||
.btn-modal {
|
||||
transition: all 0.3ms ease-in-out;
|
||||
border-radius: 10px;
|
||||
padding: 5px 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:where(.divide-gray-200 > tr:last-child) {
|
||||
border-bottom: 1px solid var(--color-gray-200);
|
||||
}
|
||||
|
||||
.tanstak-table-filtres {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table-filtres-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.table-filtres-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 12.5rem;
|
||||
}
|
||||
|
||||
.table-filtres-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tanstak-table-pagination {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-top: 1.5rem;
|
||||
gap: 1rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
|
||||
&-pages {
|
||||
color: v.$text-p;
|
||||
}
|
||||
|
||||
&-files {
|
||||
color: v.$text-s;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
.arrow {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 1px 2px #0000000d;
|
||||
/* */
|
||||
|
||||
&:hover {
|
||||
background-color: v.$bg-light;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&-pages {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
|
||||
button {
|
||||
border: 2px solid v.$p-color;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
border-radius: 10px;
|
||||
|
||||
&.current {
|
||||
background-color: v.$p-color;
|
||||
color: v.$white;
|
||||
}
|
||||
|
||||
&.other {
|
||||
&:hover {
|
||||
background-color: v.$bg-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tanstak-table-block {
|
||||
overflow-x: auto;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.tanstak-table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
/* table-layout: auto; */
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
>*+* {
|
||||
border-top: 1px solid v.$b-color-2;
|
||||
}
|
||||
|
||||
> :not(:last-child) {
|
||||
border-bottom: 1px solid v.$b-color-2;
|
||||
}
|
||||
|
||||
|
||||
&-head {
|
||||
background-color: v.$bg-light;
|
||||
|
||||
th {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
text-align: left;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: v.$text-p;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.start {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.sort-button {
|
||||
margin-left: 0.5rem;
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
&:hover {
|
||||
background-color: v.$b-color-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-body {
|
||||
background-color: v.$white;
|
||||
|
||||
>*+* {
|
||||
border-top: 1px solid v.$b-color-2;
|
||||
}
|
||||
|
||||
tr {
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: v.$bg-light;
|
||||
/* background-color: v.$b-color-1; */
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-group {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 4px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
border-radius: 4px;
|
||||
color: v.$white;
|
||||
|
||||
.icon {}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,52 +1,62 @@
|
||||
/* https://icon-sets.iconify.design/ic/ */
|
||||
|
||||
export function IconRuble() {
|
||||
import { CLIENT_STATIC_FILES_RUNTIME_WEBPACK } from 'next/dist/shared/lib/constants'
|
||||
|
||||
export function IconImageFile() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M7.5 20v-2.808h-2v-1h2v-2.73h-2v-1h2V4h6.27q1.978 0 3.354 1.375T18.5 8.727t-1.376 3.356t-3.355 1.379H8.5v2.73h4v1h-4V20zm1-7.539h5.27q1.545 0 2.638-1.092T17.5 8.73t-1.092-2.638Q15.314 5 13.769 5H8.5z" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
|
||||
<path fill="currentColor" d="M19 5v14H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-4.86 8.86l-3 3.87L9 13.14L6 17h12z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconVideoFile() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
|
||||
<path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8zM6 20V4h7v5h5v11zm8-6l2-1.06v4.12L14 16v1c0 .55-.45 1-1 1H9c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h4c.55 0 1 .45 1 1z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconAudioFile() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
|
||||
<path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8zM6 20V4h7v5h5v11zm10-9h-4v3.88a2.247 2.247 0 0 0-3.5 1.87c0 1.24 1.01 2.25 2.25 2.25S13 17.99 13 16.75V13h3z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export function IconDocument() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4 4a2 2 0 0 1 2-2h8a1 1 0 0 1 .707.293l5 5A1 1 0 0 1 20 8v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm13.586 4L14 4.414V8zM12 4H6v16h12V10h-5a1 1 0 0 1-1-1zm-4 9a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1m0 4a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconHummer() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m2.3 20.28l9.6-9.6l-1.4-1.42l-.72.71a.996.996 0 0 1-1.41 0l-.71-.71a.996.996 0 0 1 0-1.41l5.66-5.66a.996.996 0 0 1 1.41 0l.71.71c.39.39.39 1.02 0 1.41l-.71.69l1.42 1.43a.996.996 0 0 1 1.41 0c.39.39.39 1.03 0 1.42l1.41 1.41l.71-.71c.39-.39 1.03-.39 1.42 0l.7.71c.39.39.39 1.03 0 1.42l-5.65 5.65c-.39.39-1.03.39-1.42 0l-.7-.7a.99.99 0 0 1 0-1.42l.7-.71l-1.41-1.41l-9.61 9.61a.996.996 0 0 1-1.41 0c-.39-.39-.39-1.03 0-1.42M20 19a2 2 0 0 1 2 2v1H12v-1a2 2 0 0 1 2-2z" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconBell() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M14.235 19c.865 0 1.322 1.024.745 1.668A4 4 0 0 1 12 22a4 4 0 0 1-2.98-1.332c-.552-.616-.158-1.579.634-1.661l.11-.006zM12 2c1.358 0 2.506.903 2.875 2.141l.046.171l.008.043a8.01 8.01 0 0 1 4.024 6.069l.028.287L19 11v2.931l.021.136a3 3 0 0 0 1.143 1.847l.167.117l.162.099c.86.487.56 1.766-.377 1.864L20 18H4c-1.028 0-1.387-1.364-.493-1.87a3 3 0 0 0 1.472-2.063L5 13.924l.001-2.97A8 8 0 0 1 8.822 4.5l.248-.146l.01-.043a3 3 0 0 1 2.562-2.29l.182-.017z" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
|
||||
<path fill="currentColor" d="M19.834 19.75a2.25 2.25 0 0 1-2.25 2.25h-10.5a2.25 2.25 0 0 1-2.25-2.25V9.621c0-.596.236-1.169.658-1.59L10.86 2.66A2.25 2.25 0 0 1 12.45 2h5.133a2.25 2.25 0 0 1 2.25 2.25zm-2.25.75a.75.75 0 0 0 .75-.75V4.25a.75.75 0 0 0-.75-.75h-5.002l.002 4a2.25 2.25 0 0 1-2.25 2.25h-4v10c0 .414.335.75.75.75zM7.393 8.25l3.69-3.691.001 2.941a.75.75 0 0 1-.75.75zm1.19 6.25a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5h-6a.75.75 0 0 1-.75-.75m0 3a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1-.75-.75">
|
||||
</path>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconShield() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path fill="currentColor" d="m466.5 83.7l-192-80a48.15 48.15 0 0 0-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3c11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3M256.1 446.3l-.1-381l175.9 73.3c-3.3 151.4-82.1 261.1-175.8 307.7" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
|
||||
<path fill="currentColor" d="M12 22q-3.475-.875-5.738-3.988T4 11.1V5l8-3l8 3v6.1q0 3.8-2.262 6.913T12 22m0-2.1q2.6-.825 4.3-3.3t1.7-5.5V6.375l-6-2.25l-6 2.25V11.1q0 3.025 1.7 5.5t4.3 3.3M10 16h4q.425 0 .713-.288T15 15v-3q0-.425-.288-.712T14 11v-1q0-.825-.587-1.412T12 8t-1.412.588T10 10v1q-.425 0-.712.288T9 12v3q0 .425.288.713T10 16m1-5v-1q0-.425.288-.712T12 9t.713.288T13 10v1z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconBlank() {
|
||||
export function IconShieldAdd() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeWidth="2"><path d="M14.172 21H7c-1.886 0-2.828 0-3.414-.586S3 18.886 3 17V7c0-1.886 0-2.828.586-3.414S5.114 3 7 3h10c1.886 0 2.828 0 3.414.586S21 5.114 21 7v7.172c0 .408 0 .613-.076.797c-.076.183-.22.328-.51.617l-4.828 4.828c-.29.29-.434.434-.617.51c-.184.076-.389.076-.797.076Z" /><path d="M14 21v-4.667c0-1.1 0-1.65.342-1.991c.341-.342.891-.342 1.991-.342H21" /></g></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16" className="icon">
|
||||
<path fill="currentColor" d="M7.647 2.146a.5.5 0 0 1 .708 0C9.595 3.39 10.969 4 12.5 4a.5.5 0 0 1 .5.5v1.1a5.5 5.5 0 0 0-1-.393v-.226c-1.48-.112-2.815-.726-4-1.792c-1.186 1.066-2.52 1.68-4 1.792v2.52c0 1.431.361 2.56 1.017 3.44c.053.66.222 1.288.487 1.862C3.844 11.59 3 9.81 3 7.502V4.5a.5.5 0 0 1 .5-.5c1.53 0 2.904-.611 4.147-1.854M15 10.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-4-2a.5.5 0 0 0-1 0V10H8.5a.5.5 0 0 0 0 1H10v1.5a.5.5 0 0 0 1 0V11h1.5a.5.5 0 0 0 0-1H11z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconClock() {
|
||||
export function IconDownload() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><g fill="none"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" /><path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 4a1 1 0 0 0-1 1v5a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V7a1 1 0 0 0-1-1" /></g></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconGraphMultiple() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M20 16V4H8v12m14 0c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h12c1.1 0 2 .9 2 2m-6 16v2H4c-1.1 0-2-.9-2-2V7h2v13m12-9h2v3h-2m-3-8h2v8h-2m-3-6h2v6h-2Z" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
|
||||
<path fill="currentColor" d="M5 20h14v-2H5zM19 9h-4V3H9v6H5l7 7z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@ -58,20 +68,79 @@ export function IconEye() {
|
||||
)
|
||||
}
|
||||
|
||||
export function IconTelegram() {
|
||||
export function IconDoubleArrowRight() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m21.936 5.17l-3.03 14.185c-.226.999-.806 1.224-1.644.773l-4.545-3.352l-2.225 2.127c-.225.226-.451.452-.967.452l.355-4.675l8.478-7.704c.354-.355-.097-.484-.548-.193l-10.541 6.64l-4.546-1.386c-.999-.322-.999-1 .226-1.45L20.614 3.72c.87-.258 1.612.194 1.322 1.45" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M6.41 6L5 7.41L9.58 12L5 16.59L6.41 18l6-6z" /><path fill="currentColor" d="m13 6l-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6z" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconLink() {
|
||||
export function IconDoubleArrowLeft() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="none" stroke="currentColor" strokeDasharray="28" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 6l2 -2c1 -1 3 -1 4 0l1 1c1 1 1 3 0 4l-5 5c-1 1 -3 1 -4 0M11 18l-2 2c-1 1 -3 1 -4 0l-1 -1c-1 -1 -1 -3 0 -4l5 -5c1 -1 3 -1 4 0"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="28;0" /></path></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M17.59 18L19 16.59L14.42 12L19 7.41L17.59 6l-6 6z" /><path fill="currentColor" d="m11 18l1.41-1.41L7.83 12l4.58-4.59L11 6l-6 6z" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconRefresh() {
|
||||
export function IconArrowRight() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M21.074 12.154a.75.75 0 0 1 .672.82c-.49 4.93-4.658 8.776-9.724 8.776c-2.724 0-5.364-.933-7.238-2.68L3 20.85a.75.75 0 0 1-.75-.75v-3.96c0-.714.58-1.29 1.291-1.29h3.97a.75.75 0 0 1 .75.75l-2.413 2.407c1.558 1.433 3.78 2.243 6.174 2.243c4.29 0 7.817-3.258 8.232-7.424a.75.75 0 0 1 .82-.672m-18.82-1.128c.49-4.93 4.658-8.776 9.724-8.776c2.724 0 5.364.933 7.238 2.68L21 3.15a.75.75 0 0 1 .75.75v3.96c0 .714-.58 1.29-1.291 1.29h-3.97a.75.75 0 0 1-.75-.75l2.413-2.408c-1.558-1.432-3.78-2.242-6.174-2.242c-4.29 0-7.817 3.258-8.232 7.424a.75.75 0 1 1-1.492-.148" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6z" /></svg>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export function IconArrowLeft() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6l6 6z" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconArrowUp() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="m7 14l5-5l5 5z" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconArrowDown() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="m7 10l5 5l5-5z" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconFilter() {
|
||||
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 18h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1m4 6h10c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconNotification() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><g fill="none"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z" /><path fill="currentColor" d="M12 2a7 7 0 0 0-7 7v3.528a1 1 0 0 1-.105.447l-1.717 3.433A1.1 1.1 0 0 0 4.162 18h15.676a1.1 1.1 0 0 0 .984-1.592l-1.716-3.433a1 1 0 0 1-.106-.447V9a7 7 0 0 0-7-7m0 19a3 3 0 0 1-2.83-2h5.66A3 3 0 0 1 12 21" /></g></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconFileOpen() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
|
||||
<path fill="currentColor" d="M15 22H6c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h8l6 6v6h-2V9h-5V4H6v16h9zm4-.34v-2.24l2.95 2.95l1.41-1.41L20.41 18h2.24v-2H17v5.66z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconFileDownload() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
|
||||
<path fill="none" stroke="currentColor" strokeLinecap="square" strokeWidth="2" d="M16.5 10.5L12 15l-4.5-4.5m4.5 3.25V4m8.5 11v5h-17v-5" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconShieldExclamation() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M20.25 5c-2.663 0-5.258-.943-7.8-2.85a.75.75 0 0 0-.9 0C9.008 4.057 6.413 5 3.75 5a.75.75 0 0 0-.75.75V11c0 5.001 2.958 8.676 8.725 10.948a.75.75 0 0 0 .55 0C18.042 19.676 21 16 21 11V5.75a.75.75 0 0 0-.75-.75m-8.993 2.63a.75.75 0 0 1 1.486 0l.007.102v6.5l-.007.102a.75.75 0 0 1-1.486 0l-.007-.102v-6.5zM12 18a1 1 0 1 1 0-2a1 1 0 0 1 0 2" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconDelete() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12l1.41 1.41L13.41 14l2.12 2.12l-1.41 1.41L12 15.41l-2.12 2.12l-1.41-1.41L10.59 14zM15.5 4l-1-1h-5l-1 1H5v2h14V4z" /></svg>
|
||||
)
|
||||
}
|
||||
8
src/app/ui/users/users-table.tsx
Normal file
8
src/app/ui/users/users-table.tsx
Normal file
@ -0,0 +1,8 @@
|
||||
import TanstakFilesTable from '@/app/components/tanstakTable';
|
||||
export function UsersTable() {
|
||||
return (
|
||||
<div>
|
||||
<TanstakFilesTable />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -4,6 +4,243 @@
|
||||
"description": "This is a demo application with i18n support"
|
||||
},
|
||||
"Global": {
|
||||
"exit": "Exit"
|
||||
"actions": "Actions",
|
||||
"all-types": "All types",
|
||||
"statistics": "Statistics",
|
||||
"your-content": "Your content",
|
||||
"file": "File",
|
||||
"files": "Files",
|
||||
"files-few": "files",
|
||||
"content-type": "Content type",
|
||||
"quantity": "Quantity",
|
||||
"size": "Size",
|
||||
"violation": "Violation",
|
||||
"violations-few": "Violations",
|
||||
"violations": "Violations",
|
||||
"check": "Check",
|
||||
"checks": "Checks",
|
||||
"checks-few": "Checks",
|
||||
"documents": "Documents",
|
||||
"video": "video",
|
||||
"videos": "Videos",
|
||||
"videos-few": "video",
|
||||
"audio": "audio",
|
||||
"audios": "Audios",
|
||||
"audios-few": "Audios",
|
||||
"image": "image",
|
||||
"images": "Images",
|
||||
"images-few": "Images",
|
||||
"main": "Main",
|
||||
"marking": "Marking",
|
||||
"reports": "Reports",
|
||||
"settings": "Settings",
|
||||
"my-content": "My content",
|
||||
"referral-program": "Referral program",
|
||||
"search": "Search",
|
||||
"exit": "Exit",
|
||||
"photo-marking": "Photo marking",
|
||||
"video-marking": "Video marking",
|
||||
"audio-marking": "Audio marking",
|
||||
"tokens": "tokens",
|
||||
"current-balance-of-protection": "Current file protection token balance",
|
||||
"rate": "Rate",
|
||||
"expires": "Expires",
|
||||
"help": "Help",
|
||||
"home": "Home",
|
||||
"protecting-your-content": "Protecting your content",
|
||||
"current-status-of": "Current status of security and activity of the monitoring system",
|
||||
"total-files": "Total files",
|
||||
"disk-space-used": "Disk space used",
|
||||
"out-of": "out of",
|
||||
"last-check": "Last check",
|
||||
"all-dates": "All dates",
|
||||
"today": "Today",
|
||||
"for-a-week": "For a week",
|
||||
"for-a-month": "For a month",
|
||||
"older-than-a-month": "Over a month old",
|
||||
"show": "Show",
|
||||
"no-data-for-selected-filters": "No data for selected filters",
|
||||
"page": "Page",
|
||||
"shown": "Shown",
|
||||
"date-filter": "Date filter",
|
||||
"type-filter": "Type filter",
|
||||
"items-per-page": "Items per page",
|
||||
"email": "Email",
|
||||
"image-protection": "Image protection",
|
||||
"account-settings": "Account settings",
|
||||
"personal-data": "Personal data",
|
||||
"full-name": "Full name",
|
||||
"company": "Company",
|
||||
"email-cant-change": "Email address cannot be changed. Please contact support.",
|
||||
"phone": "Phone",
|
||||
"gender": "Gender",
|
||||
"birthday": "Birthday",
|
||||
"age": "Age",
|
||||
"male": "Male",
|
||||
"female": "Female",
|
||||
"used-to-send-congratulations": "Used to send congratulations",
|
||||
"automatically-filled-in-based-on-date-of-birth": "Automatically filled in based on date of birth",
|
||||
"save-changes": "Save changes",
|
||||
"video-protection": "Video protection",
|
||||
"audio-protection": "Audio protection",
|
||||
"notifications-and-monitoring": "Notifications and Monitoring",
|
||||
"email-notifications": "Email Notifications",
|
||||
"receive-violation-notifications-on-email": "Receive violation notifications via email",
|
||||
"automatic-monitoring": "Automatic Monitoring",
|
||||
"automatic-content-check-on-internet": "Automatic content check on the internet",
|
||||
"monitoring-frequency": "Monitoring Frequency",
|
||||
"daily": "Daily",
|
||||
"weekly": "Weekly",
|
||||
"monthly": "Monthly",
|
||||
"watermark-intensity": "Watermark Intensity",
|
||||
"low": "Low",
|
||||
"medium": "Medium",
|
||||
"high": "High",
|
||||
"security": "Security",
|
||||
"current-password": "Current Password",
|
||||
"new-password": "New Password",
|
||||
"minimum-8-characters": "Minimum 8 characters",
|
||||
"confirm-password": "Confirm Password",
|
||||
"change-password": "Change Password",
|
||||
"subscription": "Subscription",
|
||||
"api-settings": "API Settings",
|
||||
"your-api-key": "Your API Key",
|
||||
"copy": "Copy",
|
||||
"update-key": "Update Key",
|
||||
"api-documentation": "API Documentation",
|
||||
"full-api-documentation-available-at-link": "Full API documentation available at the link",
|
||||
"last-activity": "Last Activity",
|
||||
"no-activity-records-yet": "No activity records yet",
|
||||
"use-this-key-for-api-access": "Use this key for API access. Do not share it with third parties.",
|
||||
"danger-zone": "Danger Zone",
|
||||
"account-deletion": "Account Deletion",
|
||||
"account-deletion-warning": "Account deletion will lead to irreversible loss of all data, including uploaded content, reports and settings. This action cannot be undone.",
|
||||
"delete-account": "Delete Account",
|
||||
"reset-all-settings": "Reset All Settings",
|
||||
"reset-settings-description": "Restore all account settings to default values.",
|
||||
"reset-settings": "Reset Settings",
|
||||
"notifications": "Notifications",
|
||||
"no-new": "No new",
|
||||
"tokens-added": "Tokens added",
|
||||
"added": "Added",
|
||||
"no-data": "No data",
|
||||
"view-all": "View all",
|
||||
"days-ago": "days ago",
|
||||
"there-are-no-files-yet": "There are no files yet",
|
||||
"add": "Add",
|
||||
"file-successfully-uploaded": "File has been successfully uploaded",
|
||||
"cancel": "Cancel",
|
||||
"close": "Close",
|
||||
"upload-file": "Upload file",
|
||||
"or": "or",
|
||||
"drag-the-file-here": "Drag the file here",
|
||||
"select-files-to-protect": "Select files to protect",
|
||||
"upload-for-protection": "Upload {fileType} for protection",
|
||||
"file-has-no-extension": "File has no extension",
|
||||
"have-unsaved-changes": "You have unsaved changes. Are you sure you want to delete this page?",
|
||||
"image-size": "Image size",
|
||||
"acceptable-range": "Acceptable range",
|
||||
"pixels": "pixels",
|
||||
"error-processing-file": "Error processing file",
|
||||
"error-uploading-file": "Error uploading file",
|
||||
"unknown-validation-error": "Unknown validation error",
|
||||
"unsupported-file-format": "Unsupported file format.",
|
||||
"the-file-is-too-large": "The file is too large",
|
||||
"cost-of-protection": "Cost of protection",
|
||||
"current-balance": "Current balance",
|
||||
"image-resolution": "Image resolution",
|
||||
"file-size": "File size",
|
||||
"file-format": "File format",
|
||||
"mb": "MB",
|
||||
"to": "to",
|
||||
"yes": "yes",
|
||||
"no": "no",
|
||||
"you-sure-you-want-to-delete": "Are you sure you want to delete?",
|
||||
"reports-and-analytics": "Reports and analytics",
|
||||
"file-has-been-deleted": "The file has been deleted",
|
||||
"error": "Error",
|
||||
"failed-to-download-file": "Failed to download file",
|
||||
"file-is-downloading": "The file is downloading",
|
||||
"status": "status",
|
||||
"refferal-program": "Referral program",
|
||||
"your-image": "Your images",
|
||||
"your-videos": "Your videos",
|
||||
"your-audios": "Your audios",
|
||||
"your-documents": "Your documents",
|
||||
"multi-layered-protection-for-your-images": "Multi-layered image content protection with invisible watermarks",
|
||||
"multi-layered-protection-for-your-audios": "Multi-layered audio content protection with invisible watermarks",
|
||||
"multi-layered-protection-for-your-videos": "Multi-layered video content protection with invisible watermarks",
|
||||
"my-content-description": "Managing protected files and copyright control",
|
||||
"monitoring-copyright-infringements": "Monitoring copyright infringements",
|
||||
"monitoring-copyright-infringements-description": "Monitor and manage copyright infringement of your protected content online",
|
||||
"referral-program-description": "Invite your friends and earn up to 25% commission on every purchase! Share the link and get rewarded."
|
||||
},
|
||||
"Login-register-form": {
|
||||
"and": "and",
|
||||
"already-have-an-account": "Already have an account",
|
||||
"company": "Company",
|
||||
"company-placeholder": "Your company",
|
||||
"confirm-password": "Confirm password",
|
||||
"copyright-protection": "Copyright protection",
|
||||
"create-an-account": "Create an account",
|
||||
"email-adress": "Email adress",
|
||||
"enter-email": "Enter your email",
|
||||
"enter-password": "Enter your password",
|
||||
"forgot-password": "Forgot your password",
|
||||
"free-start": "Free start",
|
||||
"free-start-description": "Upon registration, you receive a \"DEMO\" subscription with the ability to tag up to 3 files per month and 10 MB of storage.",
|
||||
"full-name": "Full name",
|
||||
"i-agree-to": "I agree to the",
|
||||
"login": "Login",
|
||||
"login-error-email": "Email address must not be empty.",
|
||||
"login-error-password": "The password must not be empty.",
|
||||
"monitoring-violations": "Real-time monitoring of violations",
|
||||
"name-placeholder": "Ivanov Ivan Ivanovich",
|
||||
"no-account": "No account",
|
||||
"or-log-in-via": "or log in via",
|
||||
"or-register-via": "or register via",
|
||||
"password": "Password",
|
||||
"password-placeholder": "Minimum 8 characters",
|
||||
"phone": "Phone",
|
||||
"protecting-watermark": "Protecting content with hidden watermarks",
|
||||
"privacy-policy": "privacy policy",
|
||||
"register": "Register",
|
||||
"register-error-agree": "Please review the terms of use and privacy policy.",
|
||||
"register-error-name-min": "Name must be at least 2 characters long.",
|
||||
"register-error-name-max": "The name length must not exceed 100 characters.",
|
||||
"register-error-password-one-digit": "Password must contain at least 1 digit.",
|
||||
"register-error-password-one-letter": "Password must contain at least 1 letter.",
|
||||
"register-error-password-min": "Password must be at least 8 characters long.",
|
||||
"register-error-phone-min": "Please enter a phone number.",
|
||||
"register-error-company-name-min": "The company name must contain at least 2 characters.",
|
||||
"register-error-company-name-max": "The company name must exceed 200 characters.",
|
||||
"remember-me": "Remember me",
|
||||
"repeat-password": "Repeat password",
|
||||
"request-ended-with-an-error": "The request ended with an error",
|
||||
"safe-storage": "Reliable storage and data security",
|
||||
"sign-in": "Sign in",
|
||||
"terms-of-use": "terms of use",
|
||||
"email-or-already-registered": "Email or phone already registered",
|
||||
"password-does-not-match": "Password does not match",
|
||||
"email-not-found": "Email not found",
|
||||
"register-error-name-not-allowed-symbols": "The name should not contain a number or symbols.",
|
||||
"recover-password": "Recover password",
|
||||
"fullName-too-long": "Full name must be less than 100 characters.",
|
||||
"fullName-invalid-chars": "Name can only contain letters, spaces, hyphens and apostrophes.",
|
||||
"register-error-email-invalid": "Invalid email address",
|
||||
"email-too-long": "Email is too long",
|
||||
"password-too-long": "Password must be less than 50 characters",
|
||||
"register-error-email-no-uppercase": "Email must not contain capital letters.",
|
||||
"no-emoji-allowed": "The use of emoji is prohibited.",
|
||||
"register-error-password-max": "The password length must not exceed 124 characters.",
|
||||
"register-error-email-max": "Email length must not exceed 254 characters.",
|
||||
"companyName-invalid-chars": "The company name must not contain symbols.",
|
||||
"register-error-company-name-not-allowed-symbols": "The company name must not contain symbols.",
|
||||
"password-too-common": "This password is too common, please choose another.",
|
||||
"register-error-email-min": "Email length must be at least 7 characters.",
|
||||
"register-error-phone-not-allowed-symbols": "",
|
||||
"register-error-password-not-allowed-symbols": "Password contains invalid characters.",
|
||||
"confirmation-code": "Confirmation code",
|
||||
"enter-confirmation-code": "Enter the confirmation code"
|
||||
}
|
||||
}
|
||||
@ -4,6 +4,243 @@
|
||||
"description": "Это демонстрационное приложение с поддержкой i18n"
|
||||
},
|
||||
"Global": {
|
||||
"exit": "Выход"
|
||||
"actions": "Действия",
|
||||
"all-types": "Все типы",
|
||||
"statistics": "Статистика",
|
||||
"your-content": "Ваш контент",
|
||||
"file": "Файл",
|
||||
"files": "Файлов",
|
||||
"files-few": "Файла",
|
||||
"content-type": "Тип контента",
|
||||
"quantity": "Количество",
|
||||
"size": "Размер",
|
||||
"violation": "Нарушениe",
|
||||
"violations-few": "Нарушения",
|
||||
"violations": "Нарушений",
|
||||
"check": "Проверка",
|
||||
"checks": "Проверок",
|
||||
"checks-few": "Проверки",
|
||||
"documents": "Документы",
|
||||
"video": "видео",
|
||||
"videos": "Видео",
|
||||
"videos-few": "Видео",
|
||||
"audio": "аудио",
|
||||
"audios": "Аудио",
|
||||
"audios-few": "Аудио",
|
||||
"image": "изображение",
|
||||
"images": "Изображений",
|
||||
"images-few": "Изображения",
|
||||
"main": "Главная",
|
||||
"marking": "Маркировка",
|
||||
"reports": "Отчёты",
|
||||
"settings": "Настройки",
|
||||
"my-content": "Мой контент",
|
||||
"referral-program": "Реферальная программа",
|
||||
"search": "Поиск",
|
||||
"exit": "Выход",
|
||||
"photo-marking": "Маркировка фото",
|
||||
"video-marking": "Маркировка видео",
|
||||
"audio-marking": "Маркировка аудио",
|
||||
"tokens": "токенов",
|
||||
"current-balance-of-protection": "Текущий баланс токенов для защиты файлов",
|
||||
"rate": "Тариф",
|
||||
"expires": "Истекает",
|
||||
"help": "Помощь",
|
||||
"home": "Главная",
|
||||
"protecting-your-content": "Защита вашего контента",
|
||||
"current-status-of": "Текущий статус защищенности и активности системы мониторинга",
|
||||
"total-files": "Всего файлов",
|
||||
"disk-space-used": "Использовано места на диске",
|
||||
"out-of": "из",
|
||||
"last-check": "Последняя проверка",
|
||||
"all-dates": "Все даты",
|
||||
"today": "Сегодня",
|
||||
"for-a-week": "За неделю",
|
||||
"for-a-month": "За месяц",
|
||||
"older-than-a-month": "Старше месяца",
|
||||
"show": "Показать",
|
||||
"no-data-for-selected-filters": "Нет данных по выбранным фильтрам",
|
||||
"page": "Страница",
|
||||
"shown": "Показано",
|
||||
"date-filter": "Фильтр по дате",
|
||||
"type-filter": "Фильтр по типу",
|
||||
"items-per-page": "Записей на странице",
|
||||
"email": "Почта",
|
||||
"image-protection": "Защита изображений",
|
||||
"account-settings": "Настройки аккаунта",
|
||||
"personal-data": "Персональные данные",
|
||||
"full-name": "Полное имя",
|
||||
"company": "Компания",
|
||||
"email-cant-change": "Email нельзя изменить. Обратитесь в поддержку.",
|
||||
"phone": "Телефон",
|
||||
"gender": "Пол",
|
||||
"birthday": "День рождения",
|
||||
"age": "Возраст",
|
||||
"male": "Мужской",
|
||||
"female": "Женский",
|
||||
"used-to-send-congratulations": "Используется для отправки поздравления",
|
||||
"automatically-filled-in-based-on-date-of-birth": "Заполняется автоматически исходя из даты рождения",
|
||||
"save-changes": "Сохранить изменения",
|
||||
"video-protection": "Защита видео",
|
||||
"audio-protection": "Защита аудио",
|
||||
"notifications-and-monitoring": "Уведомления и мониторинг",
|
||||
"email-notifications": "Email уведомления",
|
||||
"receive-violation-notifications-on-email": "Получать уведомления о нарушениях на email",
|
||||
"automatic-monitoring": "Автоматический мониторинг",
|
||||
"automatic-content-check-on-internet": "Автоматическая проверка контента в интернете",
|
||||
"monitoring-frequency": "Частота мониторинга",
|
||||
"daily": "Ежедневно",
|
||||
"weekly": "Еженедельно",
|
||||
"monthly": "Ежемесячно",
|
||||
"watermark-intensity": "Интенсивность водяного знака",
|
||||
"low": "Низкая",
|
||||
"medium": "Средняя",
|
||||
"high": "Высокая",
|
||||
"security": "Безопасность",
|
||||
"current-password": "Текущий пароль",
|
||||
"new-password": "Новый пароль",
|
||||
"minimum-8-characters": "Минимум 8 символов",
|
||||
"confirm-password": "Подтвердите пароль",
|
||||
"change-password": "Изменить пароль",
|
||||
"subscription": "Подписка",
|
||||
"api-settings": "API настройки",
|
||||
"your-api-key": "Ваш API ключ",
|
||||
"copy": "Копировать",
|
||||
"update-key": "Обновить ключ",
|
||||
"api-documentation": "Документация API",
|
||||
"full-api-documentation-available-at-link": "Полная документация API доступна по ссылке",
|
||||
"last-activity": "Последняя активность",
|
||||
"no-activity-records-yet": "Пока нет записей о активности",
|
||||
"use-this-key-for-api-access": "Используйте этот ключ для доступа к API. Не передавайте его третьим лицам.",
|
||||
"danger-zone": "Опасная зона",
|
||||
"account-deletion": "Удаление аккаунта",
|
||||
"account-deletion-warning": "Удаление аккаунта приведет к безвозвратной потере всех данных, включая загруженный контент, отчеты и настройки. Это действие нельзя отменить.",
|
||||
"delete-account": "Удалить аккаунт",
|
||||
"reset-all-settings": "Сброс всех настроек",
|
||||
"reset-settings-description": "Восстановить все настройки аккаунта к значениям по умолчанию.",
|
||||
"reset-settings": "Сбросить настройки",
|
||||
"notifications": "Уведомления",
|
||||
"no-new": "Нет новых",
|
||||
"tokens-added": "Токены добавлены",
|
||||
"added": "Добавлено",
|
||||
"no-data": "Нет данных",
|
||||
"view-all": "Посмотреть все",
|
||||
"days-ago": "дней назад",
|
||||
"there-are-no-files-yet": "Файлов пока нет",
|
||||
"add": "Добавить",
|
||||
"file-successfully-uploaded": "Файл успешно загружен",
|
||||
"cancel": "Отмена",
|
||||
"close": "Закрыть",
|
||||
"upload-file": "Загрузить файл",
|
||||
"or": "или",
|
||||
"drag-the-file-here": "Перетащите файл сюда",
|
||||
"select-files-to-protect": "Выбрать файлы для защиты",
|
||||
"upload-for-protection": "Загрузить {fileType} для защиты",
|
||||
"file-has-no-extension": "Файл не имеет расширения",
|
||||
"have-unsaved-changes": "У вас есть несохраненные изменения. Вы уверены, что хотите покинуть страницу?",
|
||||
"image-size": "Размер изображения",
|
||||
"acceptable-range": "Допустимый диапазон",
|
||||
"pixels": "пикселей",
|
||||
"error-processing-file": "Ошибка при обработке файла",
|
||||
"error-uploading-file": "Ошибка при загрузке файла",
|
||||
"unknown-validation-error": "Неизвестная ошибка валидации",
|
||||
"unsupported-file-format": "Неподдерживаемый формат файла.",
|
||||
"the-file-is-too-large": "Файл слишком большой",
|
||||
"cost-of-protection": "Стоимость защиты",
|
||||
"current-balance": "Текущий баланс",
|
||||
"image-resolution": "Разрешение изображения",
|
||||
"file-size": "Размер файла",
|
||||
"file-format": "Формат файла",
|
||||
"mb": "МБ",
|
||||
"to": "до",
|
||||
"yes": "да",
|
||||
"no": "нет",
|
||||
"you-sure-you-want-to-delete": "Уверены, что хотите удалить?",
|
||||
"reports-and-analytics": "Отчёты и аналитика",
|
||||
"file-has-been-deleted": "Файл удален",
|
||||
"error": "Ошбка",
|
||||
"failed-to-download-file": "Не удалось скачать файл",
|
||||
"file-is-downloading": "Скачивается файл",
|
||||
"status": "статус",
|
||||
"refferal-program": "Реферальная программа",
|
||||
"your-image": "Ваши изображения",
|
||||
"your-videos": "Ваш видео",
|
||||
"your-audios": "Ваш аудио",
|
||||
"your-documents": "Ваши документы",
|
||||
"multi-layered-protection-for-your-images": "Многослойная защита изображений с невидимыми водяными знаками",
|
||||
"multi-layered-protection-for-your-audios": "Многослойная защита аудиоконтента с невидимыми водяными знаками",
|
||||
"multi-layered-protection-for-your-videos": "Многослойная защита видеоконтента с невидимыми водяными знаками",
|
||||
"my-content-description": "Управление защищенными файлами и контролем авторских прав",
|
||||
"monitoring-copyright-infringements": "Мониторинг нарушений авторских прав",
|
||||
"monitoring-copyright-infringements-description": "Отслеживание и управление нарушениями авторских прав на ваш защищенный контент в интернете",
|
||||
"referral-program-description": "Приглашайте друзей и зарабатывайте до 25% комиссии с каждой их покупки! Делитесь ссылкой, получайте вознаграждение."
|
||||
},
|
||||
"Login-register-form": {
|
||||
"and": "и",
|
||||
"already-have-an-account": "Уже есть аккаунт",
|
||||
"company": "Компания",
|
||||
"company-placeholder": "ООО «Ваша компания»",
|
||||
"confirm-password": "Подтвердите пароль",
|
||||
"copyright-protection": "Защита авторских прав",
|
||||
"create-an-account": "Создать аккаунт",
|
||||
"email-adress": "Email адрес",
|
||||
"enter-email": "Введите ваш email",
|
||||
"enter-password": "Введите пароль",
|
||||
"forgot-password": "Забыли пароль",
|
||||
"free-start": "Бесплатный старт",
|
||||
"free-start-description": "При регистрации вы получаете подписку \"ДЕМО\" с возможностью маркировки до 3 файлов в месяц и 10 МБ хранилища.",
|
||||
"full-name": "Полное имя",
|
||||
"i-agree-to": "Я соглашаюсь с",
|
||||
"login": "Войти",
|
||||
"login-error-email": "Адрес электронной почты не должен быть пустым.",
|
||||
"login-error-password": "Пароль не должен быть пустым.",
|
||||
"monitoring-violations": "Мониторинг нарушений в реальном времени",
|
||||
"name-placeholder": "Иванов Иван Иванович",
|
||||
"no-account": "Нет аккаунта",
|
||||
"or-log-in-via": "или войти через",
|
||||
"or-register-via": "или зарегистрироваться через",
|
||||
"password": "Пароль",
|
||||
"password-placeholder": "Минимум 8 символов",
|
||||
"phone": "Телефон",
|
||||
"protecting-watermark": "Защита контента скрытыми водяными знаками",
|
||||
"privacy-policy": "политикой конфиденциальности",
|
||||
"register": "Зарегистрироваться",
|
||||
"register-error-agree": "Пожалуйста, ознакомьтесь с условиями использования и политикой конфиденциальности.",
|
||||
"register-error-name-min": "Имя должно содержать не менее 2 символов.",
|
||||
"register-error-name-max": "Длина имени не должна превышать 100 символов.",
|
||||
"register-error-password-one-digit": "Пароль должен содержать как минимум 1 цифру.",
|
||||
"register-error-password-one-letter": "Пароль должен содержать как минимум 1 букву.",
|
||||
"register-error-password-min": "Длина пароля должна быть не менее 8 символов.",
|
||||
"register-error-phone-min": "Пожалуйста, введите телефонный номер.",
|
||||
"register-error-company-name-min": "Название компании должно содержать не менее 2 символов.",
|
||||
"register-error-company-name-max": "Название компании должно превышать 200 символов.",
|
||||
"remember-me": "Запомнить меня",
|
||||
"repeat-password": "Повторите пароль",
|
||||
"request-ended-with-an-error": "Запрос завершился с ошибкой",
|
||||
"safe-storage": "Надежное хранение и безопасность данных",
|
||||
"sign-in": "Войти в систему",
|
||||
"terms-of-use": "условиями использования",
|
||||
"email-or-already-registered": "Такой email и/или телефон уже зарегистрированы",
|
||||
"password-does-not-match": "Неверный пароль",
|
||||
"email-not-found": "Email не найден",
|
||||
"register-error-name-not-allowed-symbols": "В имени не должно быть цифр и символов.",
|
||||
"recover-password": "Восстановить пароль",
|
||||
"fullName-too-long": "Полное имя должно содержать менее 100 символов.",
|
||||
"fullName-invalid-chars": "В имени могут содержаться только буквы, пробелы, дефисы и апострофы.",
|
||||
"register-error-email-invalid": "Неверный адрес электронной почты",
|
||||
"email-too-long": "Email слишком длинный.",
|
||||
"password-too-long": "Пароль должен содержать менее 50 символов.",
|
||||
"register-error-email-no-uppercase": "Email не должен содержать заглавных букв.",
|
||||
"no-emoji-allowed": "Использование эмодзи запрещено.",
|
||||
"register-error-password-max": "Длина пароля не должна превышать 124 символа.",
|
||||
"register-error-email-max": "Длина Email не должна превышать 254 символа.",
|
||||
"companyName-invalid-chars": "Название компании не должно содержать символов.",
|
||||
"register-error-company-name-not-allowed-symbols": "Название компании не должно содержать символов.",
|
||||
"password-too-common": "Этот пароль слишком простой, пожалуйста, выберите другой.",
|
||||
"register-error-email-min": "Длина Email не должна быть меньше 7 символов.",
|
||||
"register-error-phone-not-allowed-symbols": "",
|
||||
"register-error-password-not-allowed-symbols": "Пароль содержит недопустимые символы.",
|
||||
"confirmation-code": "Код подтверждения",
|
||||
"enter-confirmation-code": "Введите код подтверждения"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user