update translate and styles

src/app/[locale]/pages/marking-audio/page.tsx

@@ -1,7 +1,6 @@
-import ProtectedFilesTable from '@/app/ui/marking-page/protected-files-table';
 import ProtectionSummary from '@/app/ui/marking-page/protection-summary';
 import TestSection from '@/app/ui/marking-page/test-section';
-import { IconAudioFile } from '@/app/ui/icons/icons';
+import FilesTable from '@/app/ui/dashboard/files-table';
 
 export default function Page() {
 	return (
@@ -11,7 +10,7 @@ export default function Page() {
 			</div>
 			<ProtectionSummary />
 			<TestSection />
-			<ProtectedFilesTable />
+			<FilesTable />
 		</div>
 	)
 }

src/app/[locale]/pages/marking-photo/page.tsx

@@ -2,8 +2,8 @@ import ProtectedFilesTable from '@/app/ui/marking-page/protected-files-table';
 import ProtectionSummary from '@/app/ui/marking-page/protection-summary';
 import TestSection from '@/app/ui/marking-page/test-section';
 import UploadSectionImage from '@/app/ui/marking-page/upload-section-image';
-import TanstakFilesTable from '@/app/components/tanstakTable';
 import { useTranslations } from 'next-intl';
+import FilesTable from '@/app/ui/dashboard/files-table';
 
 export default function Page() {
 	const t = useTranslations('Global');
@@ -17,7 +17,7 @@ export default function Page() {
 			<ProtectionSummary />
 			<UploadSectionImage />
 			<TestSection />
-			<TanstakFilesTable/>
+			<FilesTable />
 			{/* <ProtectedFilesTable /> */}
 		</div>
 	)

src/app/[locale]/pages/marking-video/page.tsx

@@ -1,7 +1,7 @@
-import ProtectedFilesTable from '@/app/ui/marking-page/protected-files-table';
 import ProtectionSummary from '@/app/ui/marking-page/protection-summary';
 import TestSection from '@/app/ui/marking-page/test-section';
 import UploadSectionVideo from '@/app/ui/marking-page/upload-section-video';
+import FilesTable from '@/app/ui/dashboard/files-table';
 
 
 export default function Page() {
@@ -13,7 +13,7 @@ export default function Page() {
 			<ProtectionSummary />
 			<UploadSectionVideo />
 			<TestSection />
-			<ProtectedFilesTable />
+			<FilesTable />
 		</div>
 	)
 }

src/app/[locale]/pages/settings/page.tsx

@@ -5,20 +5,25 @@ import SubscriptionSettings from '@/app/ui/settings/subscription-settings';
 import APISettings from '@/app/ui/settings/api-settings';
 import LastActivitySettings from '@/app/ui/settings/last-activity-settings';
 import DangerZone from '@/app/ui/settings/danger-zone';
+import { useTranslations } from 'next-intl';
 
 export default function Page() {
+	const t = useTranslations('Global');
+
 	return (
 		<>
-			<h1 className="page-title">⚙️ Настройки аккаунта</h1>
+			<h1 className="page-title">
+				{t('account-settings')}
+			</h1>
 			<div className="settings-grid">
 				<PersonalDataSettings />
-				<NotificationsMonitoringSettings/>
+				<NotificationsMonitoringSettings />
-				<SafetySetting/>
+				<SafetySetting />
-				<SubscriptionSettings/>
+				<SubscriptionSettings />
-				<APISettings/>
+				<APISettings />
-				<LastActivitySettings/>
+				<LastActivitySettings />
 			</div>
-			<DangerZone/>
+			<DangerZone />
 		</>
 	)
 }

src/app/components/StackedBarChart.tsx

@@ -32,7 +32,7 @@ export const StackedBarChart = ({ data }: Files) => {
 	const mainColors = ['#0088FE20', '#00C49F20', '#FFBB2820', '#FF804220', '#FF000020', '#FFC0CB20'];
 	const secondColors = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', 'red', 'pink'];
 
-	const strokeColor = "#fff";
+	const strokeColor = "#bfbdbdd1";
 	const strokeWidth = 1;
 
 	const renderBarWithPartialBorder = (props: BarShapeProps) => {
@@ -163,7 +163,7 @@ export const StackedBarChart = ({ data }: Files) => {
 
 	return (
 		<BarChart
-			style={{ width: '100%', maxWidth: '700px', maxHeight: '210px', aspectRatio: 1.618 }}
+			style={{ width: '100%', maxWidth: '400px', maxHeight: '210px', aspectRatio: 1.618 }}
 			responsive
 			data={editedData}
 			margin={{
@@ -177,12 +177,13 @@ export const StackedBarChart = ({ data }: Files) => {
 			<XAxis
 				dataKey="name"
 				stroke="#fff"
+				fontSize={12}
 				axisLine={false}
 			/>
 			<Bar
 				dataKey="checks"
 				stackId="a"
-				label={{ position: 'top', fill: '#fff' }}
+				label={{ position: 'top', fill: '#fff', fontSize: 12 }}
 				shape={renderBarWithPartialBorder as any}
 			>
 				{data.map((_entry, index) => (
@@ -192,7 +193,7 @@ export const StackedBarChart = ({ data }: Files) => {
 			<Bar
 				dataKey="violations"
 				stackId="a"
-				label={{ position: 'top', fill: '#fff' }}
+				label={{ position: 'top', fill: '#fff', fontSize: 12 }}
 				shape={renderBarWithTopBorder as any}
 			>
 				{data.map((_entry, index) => (

src/app/components/dropDownList.tsx

@@ -43,7 +43,7 @@ export default function DropDownList({ children, value, callBack }: DropDownList
 				onClick={() => {
 					setIsOpen(!isOpen)
 				}}
-				className="flex items-center justify-between w-full px-4 py-2 text-sm font-medium bg-white border-2 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#6365f186]"
+				className="flex items-center justify-between w-full px-4 py-2 text-sm font-medium bg-white border-2 border-[#d1cece] rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#6365f186]"
 			>
 				<span className="flex items-center">
 					<span className="mr-2">
@@ -64,7 +64,7 @@ export default function DropDownList({ children, value, callBack }: DropDownList
 				</svg>
 			</button>
 			{isOpen && (
-				<div className="absolute right-0 z-10 w-full mt-2 origin-top-right bg-white rounded-md shadow-lg border-2 focus:outline-none">
+				<div className="absolute right-0 z-10 w-full mt-2 origin-top-right bg-white rounded-md shadow-lg border-2 border-[#d1cece] focus:outline-none">
 					<ul
 						className="py-1"
 						role="listbox"

src/app/components/tanstakTable.tsx

@@ -427,48 +427,50 @@ export default function TanstakFilesTable() {
 			</div>
 
 			{/* Таблица */}
-			<div className="overflow-x-auto rounded-lg shadow">
+			<div className='w-full tanstak-file-table'>
-				<table className="min-w-full divide-y divide-gray-200">
+				<div className="overflow-x-auto rounded-lg shadow">
-					<thead className="bg-gray-50">
+					<table className=" divide-y divide-gray-200 table-fixed md:table-auto w-full">
-						{table.getHeaderGroups().map(headerGroup => (
+						<thead className="bg-gray-50">
-							<tr key={headerGroup.id}>
+							{table.getHeaderGroups().map(headerGroup => (
-								{headerGroup.headers.map(header => (
+								<tr key={headerGroup.id}>
-									<th
+									{headerGroup.headers.map(header => (
-										key={header.id}
+										<th
-										className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider"
+											key={header.id}
-									>
+											className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider whitespace-nowrap"
-										{header.isPlaceholder
+										>
-											? null
+											{header.isPlaceholder
-											: typeof header.column.columnDef.header === 'function'
+												? null
-												? header.column.columnDef.header(header.getContext())
+												: typeof header.column.columnDef.header === 'function'
-												: header.column.columnDef.header as string}
+													? header.column.columnDef.header(header.getContext())
-									</th>
+													: header.column.columnDef.header as string}
-								))}
+										</th>
-							</tr>
-						))}
-					</thead>
-					<tbody className="bg-white divide-y divide-gray-200">
-						{table.getRowModel().rows.length > 0 ? (
-							table.getRowModel().rows.map(row => (
-								<tr key={row.id} className="hover:bg-gray-50 transition-colors">
-									{row.getVisibleCells().map(cell => (
-										<td key={cell.id} className="px-6 py-4 whitespace-nowrap">
-											{typeof cell.column.columnDef.cell === 'function'
-												? cell.column.columnDef.cell(cell.getContext())
-												: cell.getValue() as string}
-										</td>
 									))}
 								</tr>
-							))
+							))}
-						) : (
+						</thead>
-							<tr>
+						<tbody className="bg-white divide-y divide-gray-200">
-								<td colSpan={columns.length} className="px-6 py-8 text-center text-gray-500">
+							{table.getRowModel().rows.length > 0 ? (
-									{t('no-data-for-selected-filters')}
+								table.getRowModel().rows.map(row => (
-								</td>
+									<tr key={row.id} className="hover:bg-gray-50 transition-colors">
-							</tr>
+										{row.getVisibleCells().map(cell => (
-						)}
+											<td key={cell.id} className="px-6 py-4 whitespace-nowrap">
-					</tbody>
+												{typeof cell.column.columnDef.cell === 'function'
-				</table>
+													? cell.column.columnDef.cell(cell.getContext())
+													: cell.getValue() as string}
+											</td>
+										))}
+									</tr>
+								))
+							) : (
+								<tr>
+									<td colSpan={columns.length} className="px-6 py-8 text-center text-gray-500">
+										{t('no-data-for-selected-filters')}
+									</td>
+								</tr>
+							)}
+						</tbody>
+					</table>
+				</div>
 			</div>
 
 			{/* Пагинация */}

src/app/styles/global-styles.scss

@@ -113,3 +113,17 @@
 		}
 	}
 }
+
+@media (max-width: 1300px) {
+	.tanstak-file-table {
+		max-width: 800px;
+		margin: 0 auto;
+	}
+}
+
+@media (max-width: 1200px) {
+	.tanstak-file-table {
+		max-width: 500px;
+		margin: 0 auto;
+	}
+}

src/app/ui/marking-page/protection-summary.tsx

@@ -52,8 +52,25 @@ export default function ProtectionSummary() {
 				</div>
 
 				<div className="protection-stat total-checks">
-					<div className="protection-stat-value">0</div>
+					{isOpen ? (
-					<div className="protection-stat-label">{t('size')}</div>
+						<>
+							<div className="protection-stat-value">0</div>
+							<div className="protection-stat-label">
+								{t('size')}
+							</div>
+						</>
+					) :
+						<>
+							<div className="protection-stat-row">
+								<div className="protection-stat-value">0</div>
+								<div className="protection-stat-label">{t('check')}</div>
+							</div>
+							<div className="protection-stat-row">
+								<div className="protection-stat-value">0</div>
+								<div className="protection-stat-label">{t('violations')}</div>
+							</div>
+						</>
+					}
 				</div>
 				{isOpen ? (
 					<div className="protection-stat total-usage">

src/app/ui/settings/personal-data-settings.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useTranslations } from 'next-intl';
 import { useActionState, useState } from 'react'
 
 export default function PersonalDataSettings() {
@@ -12,58 +13,82 @@ export default function PersonalDataSettings() {
 
 	const [selectedValue, setSelectedValue] = useState('male');
 
+	const t = useTranslations('Global');
+
 	return (
 		<div className="settings-form">
 			<div className="form-section">
-				<h3 className="form-section-title">👤 Персональные данные</h3>
+				<h3 className="form-section-title">
+					{t('personal-data')}
+				</h3>
 				<form action={formAction}>
 					<div className="form-group">
-						<label className="form-label">Полное имя:</label>
+						<label className="form-label">
+							{t('full-name')}:
+						</label>
 						<input type="text" name="full_name" className="form-input" />
 					</div>
 					<div className="form-group">
-						<label className="form-label">Компания:</label>
+						<label className="form-label">
+							{t('company')}:
+						</label>
 						<input type="text" name="company" className="form-input" />
 					</div>
 					<div className="form-group">
-						<label className="form-label">Email:</label>
+						<label className="form-label">
+							{t('email')}:
+						</label>
 						<input type="text" name="email" className="form-input" />
 						<small>
-							Email нельзя изменить. Обратитесь в поддержку.
+							{t('email-cant-change')}
 						</small>
 					</div>
 					<div className="form-group">
-						<label className="form-label">Телефон:</label>
+						<label className="form-label">
+							{t('phone')}:
+						</label>
 						<input type="phone" name="phone" className="form-input" />
 					</div>
 					<div className="form-group">
-						<label className="form-label">Пол:</label>
+						<label className="form-label">
+							{t('gender')}:
+						</label>
 						<select
 							name="gender"
 							className="form-input"
 							value={selectedValue}
 							onChange={(e) => setSelectedValue(e.target.value)}
 						>
-							<option value="male">Мужской</option>
+							<option value="male">
-							<option value="female">Женский</option>
+								{t('male')}
+							</option>
+							<option value="female">
+								{t('female')}
+							</option>
 						</select>
 					</div>
 					<div className="form-group">
-						<label className="form-label">🎂 День рождения:</label>
+						<label className="form-label">
+							{t('birthday')}:
+						</label>
 						<input type="date" name="birthday" className="form-input" />
 						<small>
-							Используется для отправки поздравления
+							{t('used-to-send-congratulations')}
 						</small>
 					</div>
 					<div className="form-group">
-						<label className="form-label">Возраст:</label>
+						<label className="form-label">
+							{t('age')}:
+						</label>
 						<input type="text" name="age" className="form-input" />
 						<small>
-							Заполняется автоматически исходя из даты рождения
+							{t('automatically-filled-in-based-on-date-of-birth')}
 						</small>
 					</div>
 
-					<button type="submit" className="btn btn-primary">💾 Сохранить изменения</button>
+					<button type="submit" className="btn btn-primary">
+						{t('save-changes')}
+					</button>
 				</form>
 			</div >
 		</div >

src/i18n/messages/en.json

@@ -54,7 +54,22 @@
 		"date-filter": "Date filter",
 		"type-filter": "Type filter",
 		"items-per-page": "Items per page",
-		"image-protection": "Защита изображений"
+		"email": "Email",
+		"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"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -54,7 +54,22 @@
 		"date-filter": "Фильтр по дате",
 		"type-filter": "Фильтр по типу",
 		"items-per-page": "Записей на странице",
-		"image-protection": "Защита изображений"
+		"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": "Сохранить изменения"
 	},
 	"Login-register-form": {
 		"and": "и",