update errors handler

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

@@ -1,4 +1,5 @@
 import SectionSearchFile from '@/app/ui/search/section-search-file';
+import { SupportedFormats } from '@/app/ui/search/supported-formats';
 export default function Page() {
 	return (
 		<>
@@ -17,7 +18,7 @@ export default function Page() {
 					fileType="image"
 				/>
 				<div className="search-sidebar">
-					side
+					<SupportedFormats />
 				</div>
 			</div>
 		</>

src/app/lib/convertBytes.ts

@@ -1,4 +1,8 @@
 export function convertBytes(bytes: number) {
+	if (!bytes) {
+		return 0;
+	}
+
 	const units = ['B', 'KB', 'MB', 'GB', 'TB'];
 
 	if (bytes === 0) return '0 B';

src/app/styles/pages-styles.scss

@@ -3696,3 +3696,63 @@
 		white-space: nowrap;
 	}
 }
+
+.supported-formats {
+	background: v.$white;
+	border-radius: 12px;
+	padding: 20px;
+	box-shadow: 0 4px 6px v.$shadow-1;
+
+	.formats-title {
+		font-weight: 600;
+		color: v.$text-p;
+		;
+		margin-bottom: 16px;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.format-group {
+		margin-bottom: 16px;
+	}
+
+	.format-type {
+		font-weight: 500;
+		color: v.$text-p;
+		margin-bottom: 8px;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+
+		&.image {
+			svg {
+				color: v.$color-image;
+			}
+		}
+
+		&.audio {
+			svg {
+				color: v.$color-audio;
+			}
+		}
+
+		&.video {
+			svg {
+				color: v.$color-video;
+			}
+		}
+
+		&.document {
+			svg {
+				color: v.$color-document;
+			}
+		}
+	}
+
+	.format-list {
+		color: v.$text-s;
+		font-size: 14px;
+		line-height: 1.5;
+	}
+}

src/app/styles/payment-container.scss

@@ -34,6 +34,7 @@
 			padding: 16px;
 			text-align: center;
 			border: 1px solid #e2e8f0;
+			height: 100%;
 		}
 
 		.stat-value {

src/app/ui/payment/user-usage.tsx

@@ -3,7 +3,7 @@
 import { getUserData } from '@/app/actions/action';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
-import {convertBytes} from '@/app/lib/convertBytes';
+import { convertBytes } from '@/app/lib/convertBytes';
 
 export default function UserUsage() {
 	const {
@@ -15,6 +15,18 @@ export default function UserUsage() {
 		queryKey: ['userData'],
 		queryFn: () => {
 			return getUserData();
+		},
+		select: (data) => {
+			if (data.tariffInfo) {
+				return {
+					diskSize: data.tariffInfo?.maxFileOnDisk,
+					id: data.tariffInfo?.id,
+					maxFilesCount: data.tariffInfo?.maxFileCounts,
+					name: data.tariffInfo?.tariffName,
+					endTariff: data.tariffInfo?.endTariff,
+					tokens: data.tariffInfo?.tokens
+				}
+			}
 		}
 	});
 
@@ -25,7 +37,7 @@ export default function UserUsage() {
 			</h3>
 			<div className="stats-grid">
 				<div className="stat-card">
-					<div className="stat-value">0 / {userData?.tariffInfo?.tariff?.maxFilesCount}</div>
+					<div className="stat-value">0 / {userData?.maxFilesCount}</div>
 					<div className="stat-label">Файлов в месяц</div>
 					<div className="progress-bar">
 						<div
@@ -36,7 +48,7 @@ export default function UserUsage() {
 					</div>
 				</div>
 				<div className="stat-card">
-					<div className="stat-value">0 / {convertBytes(userData?.tariffInfo?.tariff?.diskSize)}</div>
+					<div className="stat-value">0 / {userData?.diskSize ? convertBytes(userData?.diskSize) : 0}</div>
 					<div className="stat-label">Объём хранилища</div>
 					<div className="progress-bar">
 						<div
@@ -47,12 +59,14 @@ export default function UserUsage() {
 					</div>
 				</div>
 				<div className="stat-card">
-					<div className="stat-value">0</div>
+					<div className="stat-value">
+						{userData?.tokens ? userData?.tokens : 0}
+					</div>
 					<div className="stat-label">Токенов на балансе</div>
 				</div>
 				<div className="stat-card">
 					<div className="stat-value">
-						{userData?.tariffInfo?.tariff?.name}
+						{userData?.name ? userData?.name : 'ERROR'}
 					</div>
 					<div className="stat-label">Текущий план</div>
 				</div>

src/app/ui/search/supported-formats.tsx

@@ -0,0 +1,46 @@
+import { IconImageFile, IconVideoFile, IconAudioFile, IconDocument } from '@/app/ui/icons/icons';
+export function SupportedFormats() {
+	return (
+		<div className="supported-formats">
+			<div className="formats-title">
+				Поддерживаемые форматы
+			</div>
+
+			<div className="format-group">
+				<div className="format-type image">
+					<IconImageFile /> Изображения
+				</div>
+				<div className="format-list">
+					JPEG, PNG, GIF, BMP
+				</div>
+			</div>
+
+			<div className="format-group hidden">
+				<div className="format-type video">
+					<IconVideoFile /> Видео
+				</div>
+				<div className="format-list">
+					MP4, AVI, MOV, WMV
+				</div>
+			</div>
+
+			<div className="format-group hidden">
+				<div className="format-type audio">
+					<IconAudioFile /> Аудио
+				</div>
+				<div className="format-list">
+					MP3, WAV, FLAC, AAC
+				</div>
+			</div>
+
+			<div className="format-group hidden">
+				<div className="format-type document">
+					<IconDocument /> Документы
+				</div>
+				<div className="format-list">
+					PDF, DOC, DOCX
+				</div>
+			</div>
+		</div>
+	)
+}

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

@@ -25,11 +25,6 @@ export default function PersonalDataSettings() {
 		}
 	});
 
-	useEffect(() => {
-		console.log('show => userData');
-		console.log(userData);
-	}, [])
-
 	const [selectedValue, setSelectedValue] = useState('male');
 
 	const t = useTranslations('Global');

src/app/ui/settings/subscription-settings.tsx

@@ -18,16 +18,12 @@ export default function SubscriptionSettings() {
 			return getUserData();
 		},
 		select: (data) => {
-			if (data.tariffInfo?.tariff) {
+			if (data.tariffInfo) {
 				return {
-					diskSize: data.tariffInfo?.tariff?.diskSize,
-					id: data.tariffInfo?.tariff?.id,
-					maxFilesCount: data.tariffInfo?.tariff?.maxFilesCount,
-					maxUsers: data.tariffInfo?.tariff?.maxUsers,
-					name: data.tariffInfo?.tariff?.name,
-					price: data.tariffInfo?.tariff?.price,
-					tokens: data.tariffInfo?.tariff?.tokens,
-					type: data.tariffInfo?.tariff?.type,
+					diskSize: data.tariffInfo?.maxFileOnDisk,
+					id: data.tariffInfo?.id,
+					maxFilesCount: data.tariffInfo?.maxFileCounts,
+					name: data.tariffInfo?.tariffName,
 					endTariff: data.tariffInfo?.endTariff
 				}
 			}
@@ -35,6 +31,9 @@ export default function SubscriptionSettings() {
 	});
 
 	function dateHandler(date: string) {
+		if (!date) {
+			return 'error'
+		}
 		return date.split(' ')[0];
 	}